HTML5 semantic elements

What are semantic elements?

A semantic element can clearly describe its meaning to browsers and developers.

Examples of no semantic elements: <div> and <span> -there is no need to consider the content.

Semantic element instance: <form> , <table> , and <img> -Clearly defined its content.

Browser support

Internet Explorer 9 supports semantic elements, Firefox, Chrome, Safari, and Opera.

Note: this element is not supported in Internet Explorer 8 and earlier. But a compatible solution is provided at the bottom of the article.

New semantic elements in HTML5

Many existing websites contain the following HTML code: < div id= “nav” >, < div class= “header” >, or < div id= “footer” > to indicate the navigation link, header, and tail.

HTML5 provides new semantic elements to identify different parts of a Web page:

• <header>

• <nav>

• <section>

• <article>

• <aside>

• <figcaption>

• <figure>

• <footer>

HTML5 < section > element

<section> tags define sections (section, sections) in the document. Such as chapters, headers, footers, or other parts of the document.

According to the W3C HTML5 documentation: section contains a set of content and its title.

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

HTML5 < article > element

<article> tags define independent content. .

<article> examples of element usage:

• Forum post

• Blog post

• News story

• Comment

<article><h1>Internet Explorer 9</h1><p>Windows Internet Explorer
9(Abbreviated as IE9 )Released on March 14, 2011 at 21:00.</p></article>

HTML5 <nav> element

<nav> the tag defines the part of the navigation link.

<nav> element is used to define the navigation links section of the page, but not all links need to be included in the <nav> in the element!

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

HTML5 <aside> element

<aside> tags define content outside the main area of the page (such as a sidebar).

aside the content of the tag should be related 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>

HTML5 <header> element

<header> element describes the header area of the document

<header> elements are mainly used to define the presentation area of the content.

On the page, you can use multiple <header> element。

The following example defines the head of the article:

<article><header><h1>Internet Explorer
9</h1><p><timepubdatedatetime="2011-03-15"></time></p></header><p>Windows
Internet Explorer 9(Abbreviated as IE9
)It was released on March 14, 2011 at 21:00</p></article>

HTML5 < footer > element

<footer> the element describes the bottom area of the document.

<footer> element should contain its containing element

A footer usually contains the author of the document, copyright information, terms of use of the link, contact information, etc.

You can use multiple files in the document <footer> element。

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

HTML5 < figure > and < figcaption > elements

<figure> tags specify independent streaming content (images, diagrams, photos, codes, and so on).

<figure> the content of the element should be related to the main content, but if deleted, it should not affect the document flow.

<figcaption> label definition <figure> the title of the element.

<figcaption> the element should be placed in the first or last child of the “figure” element.

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

Can we start using these semantic elements?

The above elements are all block elements (except for < 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 stylesheet 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;
}

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->