The HTML5 standard adds a lot of new semantic elements. If it is distinguished according to the type, there are page structures, text content, forms in the form, and so on.
Here we mainly introduce new elements on the page structure.
What is a semantic elementIn simple terms, semantic elements are to give some meaning to the element (label). The name of the element means that the element needs to express.
Such as <weader> representing the header, <footh> to indicate the footer.
Characteristic① Easy maintenance: The use of semantic elements will have clearer page structure information, which is easy to maintain the follow -up maintenance of the page. No need to view the code again: find division before finding the specific className.
② Cabinet -free: It helps to read the screen reader and other auxiliary tools.
③ Optimized search engine optimization: After checking some semantic elements of HTML5, search robots can collect information on its index page.
Original interface layoutIn the layout of the page, <div> is a very common element. With a certain style, it can be applied to specific scenes, such as header, sidebar, navigation bar, and so on.
To facilitate maintenance, designers often give these <DIV> ClassName (style category) or ID with special names.
For example, a <div> element that represents the header, its ClassName or ID can be Page-Header, Header, etc.
Example:
Page structure semantic element illustrateThe semantic elements of the page structure are mostly used for the overall layout of the page. Most of them are block -level elements, but they are only used instead of <div>, such as: header, footer, and so on.
And it has no special style, it still needs to be used with CSS.
Detailed introduction <header>: Define the head area of the webpage or article. It can contain LOGO, navigation, search bar and so on.The lowest version of the browser: IE 9, Chrome 5
Instructions for use:
① When it is used to label the webpage, it can include information such as logo, navigation, search bar.
② When the title is used to mark the content, only when the title is also attached to other information, the <header> is considered. Generally, the <H1> label the title.
<Main>: Define the main content of the webpage.The lowest version of the browser: IE does not support, chrome 35
<footer>: Define the tail area of the webpage or article. It can include copyright and filing.The lowest version of the browser: IE 9, Chrome 5
Instructions for use:
① As a webpage, it usually includes website copyright, legal restrictions and links.
② As a footnote of the article, it usually contains the author's relevant information.
<NAV>: Mark the page navigation link. Contains multiple overlocked areas.The lowest version of the browser: IE 9, Chrome 5
Instructions for use:
① One page can contain multiple <Nav> elements, such as navigation and related articles recommendation.
② The contact information and certification information in the <footer> area do not have to be included in the <NAV> element.
<section>: It is usually marked as an independent area on the webpage.The lowest version of the browser: IE 9, Chrome 5
Instructions for use:
① can be used as an independent area in the webpage, such as a section in the article.
<ArtTICLE>: Complete and independent content blocks; it can contain independent <header>, <footer> and other structural elements. Such as news, blog articles, and other independent content (excluding comments or author profiles).The lowest version of the browser: IE 9, Chrome 5
<aside>: Define the content blocks outside the main content of the surrounding. Such as: annotation.The lowest version of the browser: IE 9, Chrome 5
<figure>: It represents a section of independent content and is often used with <FIGCAPTION> (represents), which can be used for pictures, illustrations, forms, code segments, etc. in the article.The lowest version of the browser: IE 9, Chrome 8 <FIGCAPTION>: Define the title of the <figure> element.
The lowest version of the browser: IE 9, Chrome 8
Example diagram
Old version of the browser support IE8 aboveThe browser will be used as an internal element for elements that do not know. The page -related semantic elements are block -level elements, so you only need to set the browsers that do not support these elements to display them as block -level elements.
Add the following code to the style:
Article, ASIDE, DETAILS, FIGCAPTION, FIGURE, FOOTER, Header, HGROUP, Main, Nav, Section, Summary {Display: BLOCK;} IE8 and IE8 belowBrowsers below IE8 and IE8 do not support the useful element application style that cannot be recognized.
So create these semantic elements through JS and add basic styles.
Take header as an example <script> document.createelement ('header'); </script> Application external fileThese tedious creations have already written Lei Feng, just loaded on the old version of IE.
<! - [if lt ie9]> <script src = // cdn.bootcss.com/html5shiv/html5.min.js> </script> <! [Endif] ->