Layout in HTML, create web page layout

In the previous article, introduced you to the head element in HTML, the next article below will introduce you to the layout in HTML.

Layout is a part of graphic design that involves arranging visual elements on a web page. Basically the layout is used to establish the overall interface and the relationship between the graphic elements, making the site more eye-catching.

Self-study Layout in HTML

Refer to the following article of to learn details about Layout in HTML.

1. Layout elements in HTML

HTML consists of several semantic elements that identify different parts of a web page:

– Header tag: specifies a title for the document or a part of a document.

– Nav tag: Identify the element that contains navigation links.

– Section card: Define a part in the document.

– Card article: identify an article.

– Card aside : define external content (such as sidebar).

– Footer card: Define footer for the document or part of the document.

– Tags details: identify additional details.

– Summary card: specify the title for the details element.

2. Multicolumn layout in HTML

There are 5 ways to create multicolumn layouts in HTML. Each one will have its own advantages and disadvantages:

– Table (table) in HTML

– The float property in CSS.

– CSS flexbox.

– CSS framework

– CSS grid.

2.1 How to choose multicolumn layout in HTML?

– Table (table) in HTML:

The table element in HTML is designed to display table data. So it is best not to use this element to create a layout.

– CSS Framework:

If we create a quick and simple layout, we can use the framework.

– CSS Float:

Normally to create a layout for the entire site, we will use the CSS float property.

Example 1: Here’s an example of using CSS float to create a layout in HTML:

layout in html

– CSS Flexbox:

Flexbox is the new layout mode in CSS3.

Use flexbox to ensure the layout displays properly on different device screen sizes. However, the downside of flexbox is that it does not work on IE10 and earlier versions.

Example 2: Here is an example using CSS flexbox to create layout in HTML:

layout in html 2

– CSS Grid View:

The CSS Grid Layout module provides a series of grid-based layouts, which make designing the site easier. However, the biggest drawback of CSS Grid View is that it does not support IE15 and earlier versions.

The article above has just introduced you to the layout in HTML. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article.
In the next article, will introduce you further Responsive Web Design in HTML.


Add a Comment

Your email address will not be published. Required fields are marked *