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

See Live Example

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="https://www.techstrikers.com/HTML4/html4-tutorials.php">HTML4</a> |
	<a href="https://www.techstrikers.com/HTML5/html5-tutorials.php">HTML5</a> |
	<a href="https://www.techstrikers.com/PHP/php-tutorials.php">PHP</a> |
	<a href="https://www.techstrikers.com/Javascript/javascript-tutorials.php">JavaScript</a> |
	<a href="https://www.techstrikers.com/AngularJS/angularjs-tutorials.php">AngularJS</a>
	</nav>
</body>  
</html>

See Live Example

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>

See Live Example

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>

See Live Example

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>

See Live Example

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>

See Live Example

« Previous