HTML5 Semantic Elements

HTML5 semantic elements include a set of elements (listed below) that overcome the limitations of web page design. These semantic tags include <article> , <section>, <header> ,<footer>, <aside>, <nav>, <figure> tags. These new tages have meaningful names so that just by looking at these tags you get a clear idea about their content. These semantic tags of HTML5 are listed below:

HTML5 Semantic Elements

Tag NameDescription
<article>Defines an article
<aside>Defines content aside from the page content
<details>Defines additional details that the user can view or hide
<figcaption>Defines a caption for a <figure> element
<figure>Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>Defines a footer for a document or section
<header>Specifies a header for a document or section
<main>Specifies the main content of a document
<mark>Defines marked/highlighted text
<nav>Defines navigation links
<section>Defines a section in a document
<summary>Defines a visible heading for a <details> element
<time>Defines a date/time

You can see that above elements are more expressive and just by looking at them, you get an idea of the intended purpose.


Typical page layout with semantic HTML5 sectioning tags

Above image shows a structure of HTML5 document with various tags. Here the important thing is that the document's tag arrangement depends on how and where you want to add them on the document. For example, the <aside> element can be placed on the left hand side of the <section> or even above or below it.

Here are HTML5 Semantic Elements with Example.

Header Element

The <header> element represents a group of introductory or navigational aids. A header element is intended to usually contain the section's heading, but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta charset="UTF-8" />  
    <title>The Best HTML5 Page Structure</title>  
</head>  
<body>  
    <section>  
        <header>  
          <h2>Header Title</h2> 
            <article>  
              <p>Here the important thing, the document's tag arrangement 
			  depends on how and where you want to add on the document.</p>  
            </article>  
        </header>  
    </section>  
</body>  
</html> 
Try Now

Nav Element

The <nav> section can contain links to the other pages from the website or to other parts of the same web page.

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta charset="UTF-8" />  
    <title>The Best HTML5 Page Structure</title>  
</head>  
<body>  
  <nav>
    <a href="http://www.techstrikers.com/HTML4/html4-tutorials.php">HTML4</a> |
    <a href="http://www.techstrikers.com/HTML5/html5-tutorials.php">HTML5</a> |
    <a href="http://www.techstrikers.com/PHP/php-tutorials.php">PHP</a> |
    <a href="http://www.techstrikers.com/Javascript/javascript-tutorials.php">JavaScript</a> |
    <a href="http://www.techstrikers.com/AngularJS/angularjs-tutorials.php">AngularJS</a>
  </nav>
</body>  
</html> 
Try Now

Section Element

The <section> element represents a generic section of a document or application.A section can also have its own <header> elements as well as a <footer> element.

<!DOCTYPE HTML>  
<html>  
<head>   <!-- www.techstrikers.com -->
    <meta charset="UTF-8" />  
    <title>The Best HTML5 Page Structure</title>  
</head>  
<body>  
    <section>  
        <header>  
          <h2>Section1 Header</h2>
        </header>  
      <p>HTML5 includes a set of markup elements (listed below) that 
	  overcome from limitation of web page design. These semantic tags are 
	  includes article, section, header ,footer, aside, nav, figure tags. 
	  These new tages have meaningful names so that just by looking at these 
	  tags you get a clear idea about their content.</p>
    </section>  
    <section>  
        <header>  
          <h2>Section2 Header</h2>
        </header>  
      <p>Here the important thing, the document's tag arrangement 
	  depends on how and where you want to add on the document. </p>
    </section> 
</body>  
</html>  
Try Now

Article Element

The <article> element represents an independent item section of content such as a blog post, forum post or a comment. You can use <section> and <article> together or use nested <article> elements.

<!DOCTYPE HTML>  
<html>  
<head>   <!-- www.techstrikers.com -->
    <meta charset="UTF-8" />  
    <title>The Best HTML5 Page Structure</title>  
</head>  
<body>  
    <article>  
        <header>  
          <h2>Article Header</h2>
        </header>  
      <p>HTML5 includes a set of markup elements (listed below) that 
	  overcome from limitation of web page design. These semantic tags are 
	  includes article, section, header ,footer, aside, nav, figure tags. 
	  These new tages have meaningful names so that just by looking at these 
	  tags you get a clear idea about their content.</p>
    </article>  
</body>  
</html> 
Try Now

Aside Element

The <aside> element is intended to house content that is related to the surrounding content but at the same time is a standalone piece of content in itself. The <aside> element can house any type of content including textual information and images.

<!DOCTYPE HTML>  
<html>  
<head>   <!-- www.techstrikers.com -->
    <meta charset="UTF-8" />  
    <title>The Best HTML5 Page Structure</title>  
</head>  
<body>  
  <p>Here the important thing, the document's tag arrangement 
  depends on how and where you want to add on the document. </p>
    <aside>  
        <h2>Aside Section</h2>
      <p>Here the important thing, the document's tag arrangement 
	  depends on how and where you want to add on the document. </p>
    </aside>  
</body>  
</html>  
Try Now

Footer Element

The <footer> element represents the footer of the whole page or a <section> element. It is intended to contain footer information such as copyright notice.

<!DOCTYPE HTML>  
<html>  
<head>   <!-- www.techstrikers.com -->
    <meta charset="UTF-8" />  
    <title>The Best HTML5 Page Structure</title>  
</head>  
<body>  
     <footer> 
      <hr/>
        <p>Copyright 2015 Your site name</p>  
    </footer>  
</body>  
</html> 
Try Now

See Also

HTML5 Web Storage
HTML5 Audio Tag
HTML5 Video Tag
HTML5 Canvas
HTML5 SVG Tag


 
 
SHARE THIS IF YOU LIKE!
submit to reddit

SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.