HTML5 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.

The new semantic element in HTML5

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:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

HTML5

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.

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Try it out . . .

HTML5 . . .

Labels define independent content.

Examples of elements used by:

Forum post
Blog post
News story
Comment

<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>

Try it out . . .

HTML5 and lt;nav> elements

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!

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Try it out . . .

HTML5

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.

<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

Try it out . . .

HTML5 and header elements

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:

<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>

Try it out . . .

HTML5 . . .

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.

<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>

Try it out . . .

HTML5 and the elements of the .lt;figure> and .lt;figcaption

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.

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

Try it out . . .

Can we start using these semantic elements?

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):

header, section, footer, aside, nav, article, figure
{
display: block;
}

Problems in Internet Explorer 8 and earlier versions of IE

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!

HTML5 semantic elements

Table of contents