HTML 5 Semantic Elements

Semantics = meaning

Semantic element = meaningful element

What are semantic elements?

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

Non-semantic element examples: <div> and <span>-no need to consider the content.

Examples of semantic elements: <form>, <table>, and <img>-clearly define its content.

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, head, and tail.

HTML5 provides new semantic elements to clarify different parts of a web page:

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

HTML5 <section> element

The <section> tag defines a section (section, section) in the document. Such as chapters, headers, footers, or other parts of the document.

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
  <h1>WWF's Panda symbol</h1>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

</body>
</html>

HTML5 <article> element

The <article> tag defines independent content. .

Examples of <article> element usage:

  • Forum post
  • Blog post
  • News story
  • Comment

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

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

</body>
</html>

HTML5 <nav> element

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

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

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

</body>
</html>

HTML5 <aside> element

The <aside> tag defines content outside the main area of ​​the page (such as the sidebar).

The content of the aside tag should be related to the content of the main area.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

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

</body>
</html>

HTML5 <header> element

The <header> element describes the head area of ​​the document

The <header> element is mainly used to define the introduction and display area of ​​the content.

You can use multiple <header> elements in the page.

The following example defines the head of the article:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<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 at 21:00 on March 14, 2011</p>
</article>

</body>
</html>

HTML5 <footer> element

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

The <footer> element should contain its containing element

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

You can use multiple <footer> elements in the document.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

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

</body>
</html>

HTML5 <figure> and <figcaption> elements

The <figure> tag specifies independent streaming content (images, charts, photos, codes, etc.).

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

The <figcaption> tag defines the caption of the <figure> element.

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

</body>
</html>

Can we start using these semantic elements?

The above elements are all block elements (except <figcaption>).

In order for these blocks and elements to take effect in all versions of browsers, you need to set the following attributes in the style sheet file (the following style code allows older browsers to support the block-level elements introduced in this chapter):

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

Problems in Internet Explorer 8 and earlier versions of IE

IE8 and earlier versions of IE cannot render CSS effects in these elements, so that you cannot use <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, or others HTML5 elements.

Solution: You can use HTML5 Shiv Javascript script to solve the compatibility problem of IE. HTML5 Shiv download address: https://hackerthink.com/libs/html5shiv/3.7/html5shiv.min.js

After downloading, put the following code into the web page:

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

The above code will load the html5shiv.js file when the browser is less than IE9. You must place it in the <head> element, because IE needs to render these new HTML5 elements after the head is loaded