May 03, 2021 HTML5
2. What are semantic elements?
4. The new semantic element in HTML5
11.. HTML5 and header elements
15.. HTML5 and the elements of the .lt;figure> and .lt;figcaption
17.. Can we start using these semantic elements?
18.. Problems in Internet Explorer 8 and earlier versions of IE
Semantics - Meaning.
Semantic Elements - Meaning of Elements.
A semantic element can clearly describe its meaning to browsers and developers.
Examples of non-semantic elements: slt;div> and slt;span> - regardless of content.
Examples of semantic elements: slt;form>, slt;table>, and <img> - clearly define its contents.
Internet Explorer 9 Plus, Firefox, Chrome, Safari, and Opera support semantic elements.
Note: I nternet Explorer 8 and earlier versions did not support this element. But compatible solutions are available at the bottom of the article.
Many existing websites contain the following HTML codes: slt;div id="nav","lt;div class="header";, or "footer", to indicate navigation links, head, and tail.
HTML5 provides new semantic elements to clarify the different parts of a Web page:
The label defines the section (section, section) in the document. Such as chapters, headers, footers, or other parts of a document.
According to the W3C HTML5 document: section contains a set of content and its title.
Labels define independent content.
Examples of elements used by:
The label defines the part of the navigation link.
The element is used to define the navigation link portion of the page, however, not all links need to be included in the element!
The label defines content other than the main area of the page (such as sidebars).
The content of the aside tag should be relevant to the content of the main area.
The element describes the head area of the document
The element attention is used to define the presentation area of the content.
On the page you can use more than one element.
The following example defines the header of the article:
The element describes the bottom area of the document.
The element should contain its containing elements
A footer usually contains the author of the document, copyright information, linked terms of use, contact information, etc
In the document you can use more than one element.
Labels specify independent streaming content (images, charts, photos, codes, etc.).
The content of the element should be relevant to the main content, but if deleted, it should not affect the document flow.
The label defines the title of the element.
The element should be placed in the position of the first or last child element of the "figure" element.
The above elements are all block elements (except for the .lt;figcaption.
In order for these blocks and elements to take effect in all versions of the browser, you need to set the properties in the style sheet file (the following style code allows older browsers to support the block-level elements described in this chapter):
The IE8 and earlier versions of IE couldn't render CSS effects in these elements, so much so that you couldn't use the .
Solution: You can use HTML5 Shiv Javascript scripts to solve IE compatibility problems. HTML5 Shiv Download Address: http://code.google.com/p/html5shiv/
After downloading, put the following code into the web page:
The above code loads html5shiv.js files when the browser is smaller than the IE9 version. You must place them in the element, because the IE browser needs to render these new ELEMENTS of HTML5 after the head is loaded.
Note: The semantic elements described above do not cause any visual changes to the page content, they simply provide the structure of HTML documents for computers and developers to read and read!