Home > Developer > Web Develop
Most crucially, if you use semantic elements correctly, you can create a clearer page structure that will adapt to future trends in browser and web design tools. The semantic elements used to organize the document structure are described below, starting with an example to understand the HTML5 common document structure.
HTML5 Document Structure<body>The above document contains many HTML5 elements, and if you want to differentiate the different elements on the rendering, you need to match the appropriate appearance, this article does not cover the appearance.
Title
HTML defines a set of header element systems, from H1 to h6,h1 levels highest. Sibling headings are often used to divide content into sections, one topic per section. At all levels, headings are often used to denote all aspects of the same topic. Together they form the outline of the document, so users can simply browse through the headings at each level of the document to get a preliminary idea of the effect and structure, and the title system allows users to quickly navigate to the content of interest.<body>Sub-headings
The Hgroup element can be used to process several header elements as a whole (if the Hgroup element is not used, the main title and sub-headings will be used as two headings, and the main title and sub-headings will be treated as a title after using Hgroup), so as not to disturb the outline of the HTML document.<body>Here, "How I Learned to Love Citrus" is a subtitle of "Fruits I like" exists, two will be treated as a title, usually in style will be the title and sub-headings more tightly.
Mark the main area of a page
A page typically has only one section representing its main content, and you can put such content in the main element, which is used only once on a page.role= "main" can help screen readers locate the main area of the page.<body>......<main role= "main" ><article>......</article></main>......</body>
Create an article
The article element represents an independent piece of content in an HTML element that can be published or used independently of the rest of the page and can be viewed as an article. Article can be nested in another article, as long as the inside of the article and the outside of the article is part of the overall relationship, and semantically can exist independently. A page can have multiple article elements, each of which can be article independently, and a article can contain one or more section elements (see next).<body>......<main role= "main" ><ARTICLE><HEADER>......</HEADER><ASIDE> </aside><section>......</section></article><article>Section
The section element is a new HTML5, which is used to represent sections in a document. There is no clear rule as to which section element should be used, but usually the sections element should be used to contain the content that should be included in the document outline or directory. A section can belong to a article, and a article can contain one or more sections. A section element usually contains one or more paragraphs and a caption, but the title is not required.<body><section>The above defines 3 sections, nesting by layer, and each section title is H1. However, in different browsers, the default appearance of the section hierarchy will vary, and you can solve this problem by creating a custom style.
The difference between sections and article is that the section is inherently more organized and structurally stronger and can be viewed as a separate paragraph, while article represents a self-contained container.
Header and tail
The header element represents the header of a section and can contain a masthead and a logo. Header elements typically contain a CAPTION element or a Hgroup element, and can also contain navigation elements for that section. A page can contain any number of header elements, and their meanings can vary depending on their context.
The footer element represents the end of a section, usually containing summary information about the section, including author introductions, copyright information, links to related content, logos and disclaimers, and so on.<body>This example defines 3 header elements. The header element of the BODY element acts as the header for the entire document.
Note: You cannot nest headers or another footer in footer, and you cannot nest Tooter in header or address elements.
Navigation Area
The nav element represents the navigation area in the document and contains links to other pages or to other parts of the same page. Not all links need to be placed in the NAV element, which is designed to map out the main navigation area of the document.<body>Using two NAV elements, the section in the header gives the user the navigation method in this document, and the other at the end of the document, providing some additional links to the user.
Be careful not to place all the links in the Nav block, and NAV should usually be used only in the largest and most important navigation areas of the page. For example, the document navigation provided above is required to be placed in the NAV block, but it is not necessary to put it in the NAV block if it is just some information about licensing and contact.
Note Bar
The aside element is used to denote content that is slightly edged with the surrounding content, similar to the sidebar in a book or magazine, whose contents tend to have something to do with other content, article, or sections of the page, but not part of the main content, which can be background information, links to related articles, and so on.<body>You can use the aside element like a note bar in a print to introduce another related topic, or to explain some of the ideas presented in the main document. You can also use aside elements to store ads, related content links, and more.
Contact information
The address element is used to represent contact information for a document or article element. The address element, when it is a child of an article element, is treated as a article, and the contact information it provides is treated as the entire document when the address element is a child of the BODY element. The address element cannot be used to represent addresses other than the contact information for a document or article, for example: An address that cannot be used to represent a customer or a user.<body>Detail area
The details element generates a region in the document that the user can expand to learn more about a topic. The details element typically contains a summary element that is used to generate a description label or caption for the detail area.<body>The details element has a default appearance in the browser, and the effect in Chrome is as follows:
The details element, by default, is a folded state, and only the contents of its summary element are visible, so you can use its Open property (the Boolean property) to expand the page as it begins.The effect is as follows:<details Open><summary>kinds of Triathlon</summary>there is different kinds of triathlon-sprint, Oly Mpic and so on. I am aiming for Olympic, which consists of the following:<ol><li>1.5km swim</li><li>40km cycle< ;/li><li>10km run</li></ol></details>
The semantic elements of HTML5 are defined by their inventors on the basis of existing Web pages, not only browsing their favorite sites, but also studying Google's statistical information on 1 billion of pages. If you are interested, you can view it here (Google's site, which cannot be viewed directly).
Currently, the semantic elements of HTML5 are supported on all modern browsers, but some remediation is needed for some older browsers (primarily internet Explorer before IE9). Because the semantic elements themselves do nothing, to support them, just let the browser treat them as normal div elements, and the rest of the work is to add point style rules for them, and then, even using the old browser to access these pages, there is no problem. Fortunately, these work modernizr have been done for you.HTML5: Organizing Document structure
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
