The introduction of structural elements in H5: header, NAV, article, aside, section, footer


Structural elements do not have any style, but make the semantics of page elements clearer.

Header element

The header element is a structural element with guidance and navigation functions,This element can contain all the content normally placed in the page header。 The header element is usually used to place the title of the whole page or a content block within the page, and it can also contain website logo pictures, search forms or other related content.

Web Theme

You can use multiple header elements in a web page, or you can add header elements for each content block.

NAV element

NAV element is used to define navigation links, which is a new element in HTML5. This element canGeneralize navigation links into a regionTo make the semantics of page elements clearer.

NAV elements are often used in the following situations:

  • Traditional navigation bar
  • Sidebar navigation
  • Page navigation
  • Page turning operation
home page
        Company profile
        Product display
        Contact us

Article element

The article element represents a context independent part of a document, page, or application, and is often used to define a log, news, or user comment. Article elements are usually divided by multiple section elements. Article elements can appear multiple times in a page.

Chapter 1

            First quarter
            Second quarter

Aside element

The aside element is used to define the complex information part of the current page or article. It can contain references, sidebars, advertisements, navigation bars and other similar parts different from the main content related to the current page or main content.

There are two main usages of aside element:

  • Is included in the article element as the subsidiary information of the main content.
  • Used outside the article element as part of the page or site’s global affiliate information. The most commonly used form is sidebar, in which the content can make links, advertising units, etc.
    Main content of the article
    Other relevant contents

Right menu

Section element

Section element is used to block the content on the page in a website or application. A section element is usually composed of content and title. When using the section element, you need to pay attention to three points:

  • Don’t use the section element as a page container for styling, it’s a div feature.
  • If the article element, aside element, or NAV element is more qualified for use, do not use the section element.
  • Do not use section element definition for content block without title.
Personal introduction of Xiao Zhang
    Xiao Zhang is a good student, a handsome man...
            Xiao Zhang is really handsome
            Xiao Zhang is a good student

In HTML5, article element can be regarded as a special section element, which is more independent than section element, that is, section element emphasizes segmentation or block, while article element emphasizes independence. If a piece of content is relatively independent and complete, the article element should be used; however, if you want to divide a piece of content into multiple segments, the section element should be used.

Footer element

The footer element is used to define the bottom of a page or area, and it can contain all the content normally placed at the bottom of the page. As with the header element, a page can contain multiple footer elements. At the same time, you can also add a footer element to the article element or section element.

Article content
        Page list of articles

    Bottom of page