HTML5 layout labels and html5 layout labels

HTML5 layout labels and html5 layout labels

HTML5 is the next version of the HTML standard. More and more programmers are starting to build HTML5 websites. Compared with HTML4, HTML5's new semantic tags can replace div for page layout (which can be safely used when combined with html5.js ), semantic tags have a corresponding structure, so we don't need to use div layer-by-layer nesting. Aside from the biggest obstacle of IE browser compatibility, front-end engineers should follow the call of the HTML5 era to familiarize themselves with HTML5 layout labels and use them flexibly and appropriately in future development.

The following describes the most common elements:

1.

The header and bottom of the page. But it is not just what we traditionally think of as the page header and bottom. In fact, they can be more flexible in defining the following content in each part of the page.

The header element is an auxiliary element with guidance and navigation functions. Generally, the header element can contain the title of a block (such as h1 to h6), but it can also contain other content, such as data tables, search forms, or related logo images. On the same page, each content block can have its own

In short, both header and footer can appear multiple times on the page.

2. <nav>

The nav element is a link group that can be used as page navigation. The navigation element links to other pages or other parts of the current page.

A page can have multiple <nav> elements as a whole or different part of the page. However, not all link groups need to be placed in the <nav> element. For example, in the footer, there is usually a set of links, including the terms of service, homepage, and copyright statement; in this case, using the <footer> element is the most appropriate, without the <nav> element.

3. <section> <article>

Sections and articles are easy to confuse for beginners, because they all represent an independent and complete related content block.

<Section> an element is used to segment similar page structures. Sections and articles can be nested with each other. That is to say, they have no parent-subordinate relationship. <article> It is an article, the article is a complete and independent content.

4. <aside>

Aside is literally "next to". It is related to the main content, but can be independent content, such as advertisements, references, and sidebar. It is generally placed on the right of the page.

5. <figure>

Used as an image display and text description module for illustrations in a document.

 

Although there are still too many obstacles to using HTML5 layout (Most desktop browsers are occupied by Internet Explorer), I think HTML5 standardization is still worth sticking to. Now it is like a transitional period, and the pains of the transitional period are inevitable, but then we will surely taste its sweetness.