The document part, the body part, contains the content that the visitors can see. Traditional HTML documents usually organize document structures through DIV elements, and coupled with appropriate style tables. However, the problem of DIV element is lacking semantic information. When viewing the source code of others, you must take some effort to understand which DIV means and how to set up the entire page. Jump around. Especially if the tissue structure of the HTML page is not good, it will easily cause confusion. In this regard, many semantic elements are added to HTML5 to replace DIV elements and separate semantics and presentation.
All semantic elements have a significant characteristic: they do not really do anything, they have little impact on the content on the appearance, and even have no effect at all. There are several reasons for the existence of semantic elements:
1) Easy to modify and maintain. Through the semantic element of HTML5, additional structured information can be conveyed, which makes it easy for people to understand the overall layout of the document and the role of different blocks.
2) Non -obstacle. An important theme of modern web design is to allow anyone to access the webpage without obstacles, that is, people who use screen readers and other auxiliary tools can navigate freely on the page.
3) Search engine optimization. Using HTML5 allows search engines to better understand your website and allow them to collect more information on their index pages.
4) Future function. New browsers and web editing tools will definitely use semantic elements in the future. For example: the main part of the document is presented.
The most important thing is that if you use semantic elements correctly, you can create a clearer page structure, and you can adapt to the development trend of future browsers and web design tools. The following will introduce semantic elements for organizational document structures. First of all, use a example to understand the general document structure of HTML5.
Html5 document structureThe old HTML page uses DIV elements, coupled with appropriate style tables, but the problem of DIV element is that it does not reflect any information related to the page. The HTML5 page is to replace these DIV elements with descriptive semantic elements. The following example contains the main semantic elements used in HTML5 to describe the document structure. The use of semantic elements is closely related to the meaning they labeled. If you understand the meaning of them, you can use them flexibly.
<body> <header> <hgroup> <h1> Things I like </h1> <h2> by adam freeman </h2> </hgroup> <address> Questions and comments? Then, then com> email me </a> </address> <nav> <h1> Contents </h1> <li> <a href =#fruitsilike> fruits I like </a> </li> <ul> <li> <A href =#Morefruit> additional from </a> </li> </ul> <li> <a href =#activities I like </a> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <ul> <li> <li> <li> <ul> <li> <li> <li> <li > <A HREF =#TRITYPES> Kinds of Triathlon </a> </li> <li> <A href =#mytri> The Kind of Triathlon I am aiming for </a> </li> </ul> < /ul> </nav> </header> <main room = main> <Artadicle> <header> ...... </header> <aside> <h1> Why from is healthy </h1> <section> Here AR Three Reason Everyone Should Eat More Fruit: <OL> <li> FRUIT Contains Lots of Vitamins </li> <li> FRUIT is a Source of Fibre </li> <li> FRUIT Contains w callies </li> </ol> <section> <<SECTION> <p> I like to swim, cycle and run. I am in trailing for my first trithlon, but it is hard work. </p> <summary > Kinds of Triathlon </Summary> There are different kinds of triathlon -sprint, lympic and so on. I am aiming for lympic, which consist of the footowing: <OL> <Li> 1.5km swim </li> <li> 40KM Cycle </li> <li> 10km Run </li> </ol> </Details> </Section> </Article> </Main> <nav> More Information: <A href = http: // fruit .org> Learn More About FRUIT </a> <A href = http://triathlon.org> Learn More About Trithlons </a> </nav> <foloter ID = Mainfooter> © 2011, adam freeman. = http://apress.com> Visi APress </a> </fotern> </body>
The above document contains many HTML5 elements. If you want to distinguish different elements in the presentation, you need to cooperate with the appropriate appearance. This article does not involve the appearance.
titleHTML defines a titled element system, from H1 to H6, and H1 is the highest. The title of the same level is usually used to divide the content into several parts, each part of one theme. Title at all levels is usually used to represent all aspects of the same theme. They together constitute the outline of the document, so users can initially understand their care and structure as long as they browse the title of the document, and users can quickly navigate to interest content through the title system.
<body> <H1> FRUITS I like </h1> ...... </body>Subtitle
HGROUP element can be used as a overall processing (if HGROUP element is not used, the main title and subtitles will be used as two title, and after using HGROUP, the title and subtitles will be treated as a title) to avoid The outline of disturbing the HTML document.
<body> <hgroup> <h1> FRUITS I like </h1> <h2> How I Learned to Love Citrus </h2> </hgroup> ...... </body> </body> </body>
Here, how I learn to love citrus exists as a sub -title of FRUITS I like. Two will be treated as a title, and the title and subtitles are usually tighter in style.
The main area of the mark pageThere is usually only one part of the page representing its main content. This content can be placed in the main element, which is used only once on one page.
<body> ...... <main Role = main> <Artlicle> ...... </Article> </main> ...... </body>
Role = main can help the main area of the screen reader positioning page.
Create an articleArticle element represents an independent content in the HTML element. It can be published or used by the rest of the page, which can be regarded as an article. Article can be nested in another Article. As long as the article inside and the outside article are partially related to the overall relationship, and it can exist in semantically. One page can have multiple Article elements, each Article can be independently formed, and one Article can contain one or more section elements (see the next section).
<body> ...... <main Role = Main> <Artadicle> <Header> ...... </header> <aside> ... </aside> <section> ... ... </section> </Article> <Arttern <Artader> ...... </header> <aside> ...... </aside> <section> ... /section> </Article> ... </main> ...... </body>section
The Section element is newly added HTML5 to represent a section in the document. There is no clear specification to use the section element, but usually the section element should be used to include that should be included in the document outline or the directory. Section can belong to a certain Article, and a Article can contain one or more sections. Section elements usually contain one or more paragraphs and one title, but the title is not necessary.
<body> <section <hgroup> <h1> FRUITS I like </h1> <H2> How I Learned to Love Citrus </h2> </hgroup> I like Apples and Oranges. ruits </h1> I Also Like Bananas, MANGOES, Cherries, Apricots, Plums, Peaches and Grapes. = fruitlist.html> Here < /a>. </section> </section> </section> </body>
The above defines 3 sections, nested layers, the title of each section is H1. However, on different browsers, the default appearance of the hierarchical structure of Section will be different, and this problem can be solved by creating a custom style. The difference between Section and Article is that the Section is more organized and structural in essence and can be regarded as an independent paragraph, while Article represents a container contained.
First and tailThe header element represents the first section, which can include the header and the logo. Header element usually contains a title element or a Hgroup element, and can also contain the navigation elements of this section. A page can contain an arbitrary number of Header elements, and their meaning can be different according to its context.
The foos element represents the tail of the section, which usually contains the summary information of the section, and can also include the author introduction, copyright information, links to related content, logo and exemptional statements.
<body> <header> <hgroup> <h1> Things I like </h1> <h2> by adam freeman </h2> </hgroup> </header> <seader> <hgroup> <h1> FRUITS I like </h1> <h2> How I Learned to Love Citrus </h2> </hgroup> </header> ...... </section> <seader> <h1> Activities I like < /h1> </header> ...... <section> <fooler id = mainfooter> © 2011, adam freeman. <a href = http://apress.com> visi apuse </a> </footer> </body>
This example defines 3 header elements. The header element of Body elements is the first of the entire document.
Note: You cannot be nested with header or another FOOTER in the footer, nor can it be nested in the header or address element.
Navigation areaNAV elements represent the navigation area in the document, which contains links to other parts of other pages or other parts of the same page. Not all links need to be placed in NAV elements. The purpose of this element is to plan the main navigation area of documents.
<body> <header> <hgroup> <h1> Things I like </h1> <h2> by adam freeman </h2> </hgroup> <nav> <h1> contents </h1> <ul> <li> <A HREF =#FRUITSILIKE> FRUITS I Like </a> </li> <ul> <li> <A HREF =#Morefruit> Additional FRUITS </a> </li> </ul> <li> <A href =#Activitiesilike> Activities I like </a> </li> <li> <a href =#Tritypes> KINDS of Triathlon </a> </li> <li> <A href =#mytri> The Kind of Triathlon I am aiming for </a> </li> </ul> </ul> </nav> </header> <section> ...... </section> <section> .. .... </section> <nav> More information: <a href = http://fruit.org> Learn More about Fruit </a> <a href = http: //triathlon.org> Learn More About Triathlons </a> </nav> <footer id = mainfooter> ...... </footer> </body>
Two NAV elements are used here. Some of the people in the header provide the navigation method in this document, and the other is placed at the end of the document, providing users with additional links.
Be careful not to put all links in the NAV block, NAV should usually only be used in the largest and most important navigation area in the page. For example, the document navigation provided above is necessary to put it in the NAV block, but if it is only some information about the license and contact information, there is no need to put it in the NAV block.
Annotation barThe ASIDE element is used to indicate the content that is slightly stained with the surrounding content, similar to the sidebar in the book or magazine. The content is often related to the other content of the page, Article or Section, but not part of the main content. Some background information, links to related articles, and so on.
<body> <header> ...... </header> <Artadicle> <header> ...... </header> <aside> <h1> Why fruit is healthy </h1> <section> here AR THREEE REASONERYONE ShULD EAT More Fruit: <OL> <li> FRUIT Contains Lots of Vitamins </li> <li> FRUIT is a Source of Fibre </li> <li> FRUIT Contains Few CA lories </li> < /ol> <section> </asside> ...... </Article> <Footer ID = Mainfooter> ...... </Footer> </Body>
You can use ASIDE elements like a note bar in a printed matter, you can introduce another related topic through it, or explain the point of view proposed in the main document. You can also use ASIDE elements to store advertisements, related content links, etc.
contact informationAddress element is used to represent the contact information of document or Article element. If the address element is a sub -element of the Article element, the contact information it provides is regarded as the Article; when the address element is a body element, the contact information it provides is considered the entire document. The address element cannot be used to represent the address beyond the contact information of the document or article, such as: cannot be used to represent the address of the customer or user.
<body> <header> ...... <address> Questions and Comments? > ...... </body>Detail area
Details elements generate a area in the document, and users can start it to understand more details about a theme. Details elements usually contain a Summary element to generate a description label or title for the details area.
<body> <header> ...... </header> <Artcticle> <header> ...... </header> <section> <p> I like to swim, cycle and run. I am in Training for my first triathlon, but it is hard work. </p> <details> <summary> Kinds of Triathlon </Summary> There are differents of triferhlon, lympic so on. I am aiming for lympic, which Consist of the Following: <OL> <li> 1.5km Swim </li> <li> 40km Cycle </li> <li> 10km Run </li> </ol> </section> </</section> </ Article> </body>
Details elements have the default appearance in the browser. The effect in Chrome is as follows:
Details elements will be folded by default. Only the content of its Summary element can be seen. To let the page start at the beginning, you can use its Open property (Boolean attribute).
<Details Open> <summary> Kinds of Triathlon </Summary> There are different Kinds of Triathlon -Sprint, Olympic and so on. he following: <om> <li> 1.5km swim < /li> <li> 40km cycle </li> <li> 10km run </li> </ol> </defails>
The effect is as follows:
summaryThe semantic elements of HTML5 are defined on the basis of its inventors on the study of existing web pages. They not only browsed their favorite sites, but also studied Google's statistical information on the billion webpage. If you are interested, you can view it here (Google's site, you can't directly view it).
At present, the semantic elements of HTML5 have been supported on all modern browsers, but for some old versions of browser (mainly IE9's Internet Explorer), some remedial measures are needed. Because the semantic elements itself do not do anything, they need to support them, as long as the browser is allowed to treat them as ordinary DIV elements, and the rest of the job is to add some style rules to them. These webpages are all problematic. Fortunately, these work Modernizr has helped you achieve it.