HTML5 Semantics Elements Introduction and  Hands-On Solutions

What are Semantic Elements?

HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, its needs changed.

Where the internet was originally intended for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer.

Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the <table></table> to describe information using a table, programmers would use them to position other elements on a page.

As the use of visually designed layouts progressed, programmers started to use a generic “non-semantic” tag like <div>. They would often give these elements a class or id attribute to describe their purpose. For example, instead of <header> this was often written as <div class="header">.

As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.

List of new semantic elements

The semantic elements added in HTML5 are:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Elements such as <header><nav><section><article><aside>, and <footer> act more or less like <div> elements. They group other elements together into page sections. However where a <div> tag could contain any type of information, it is easy to identify what sort of information would go in a semantic <header> region.

Why use semantic elements?

To look at the benefits of semantic elements, here are two pieces of HTML code. This first block of code uses semantic elements:

<header></header>
<section>
	<article>
		<figure>
			<img>
			<figcaption></figcaption>
		</figure>
	</article>
</section>
<footer></footer>

Whilst this second block of code uses non-semantic elements:

<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
			<div class="figcaption"></div>
		</div>
	</div>
</div>
<div id="footer"></div>

First, it is much easier to read. This is probably the first thing you will notice when looking at the first block of code using semantic elements. This is a small example, but as a programmer you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier it makes your job.

Course Path: Modern Web Development/WEB BASICS/HTML5 Semantic Elements

Please follow the below steps before Run Tests to run your code successfully otherwise you will face some server issues even Hands-On code is correct.

Step 1: Run->Install

Step 2: Run->Run

Step 3: Run Tests

1.Html5-header(15 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<link rel=”icon” href=”favicon.png” type=”image/png”>

<title>Destiny</title>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

<header>

<a><h1>WELCOME TO MY PAGE<h1></a>

</header>

</body>

</html>

2.HTML5 Navigation(20 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

<nav>

<a>HOME</a> |

<a>Blog</a> |

<a>Videos</a> |

<a>About Me</a>

</nav>

</body>

</html>

3.Html5-footer(15 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<link rel=”icon” href=”favicon.png” type=”image/png”>

<title>Destiny</title>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

<footer>

<p>Copyright @ NOTES BEREAU</p>

</footer>

</body>

</html>

4.HTML 5 Registration(25 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<link rel=”icon” href=”favicon.png” type=”image/png”>

<title>Destiny</title>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

//write your code here

<h1>Registration Form</h1>

<form>

Name: <input type=”text”>

Date of Birth: <input type=”date”>

country: <input list=”country”>

<datalist id=”country”>

<option value=”India”>

<option value=”United States”>

<option value=”United Kingdom”>

<option value=”Australia”>

<option value=”France”>

</datalist>

Phone number: <input type=”tel”>

Email: <input type=”email”>

website: <input type=”url”>

</form>

</body>

</html>

5.Html5-Audio(20 Min)  | html5-music player

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<link rel=”icon” href=”favicon.png” type=”image/png”>

<title>Destiny</title>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

// write your code

<audio controls>

<source src=”SampleAudio.mp3″ type=”audio/mpeg”>

</audio>

<audio controls preload=”none”>

<source src=”SampleAudio.mp3″ type=”audio/mpeg”>

</audio>

<audio controls loop>

<source src=”SampleAudio.mp3″ type=”audio/mpeg”>

</audio>

</body>

</html>

6.HTML5-Video Player(25 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<link rel=”icon” href=”favicon.png” type=”image/png”>

<title>Destiny</title>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

//write your code here

<video controls autoplay>

<source src=”video.mp4″ type=”video/mp4″>

</video>

<video controls preload=”none”>

<source src=”video.mp4″ type=”video/mp4″>

</video>

<video controls poster=”https://cdn12.picryl.com/photo/2016/12/31/lego-stones-plastic-education-8b9a7d-1024.jpg”>

<source src=”video.mp4″ type=”video/mp4″>

</video>

</body>

</html>

7.HTML5 Canvas(25 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<link rel=”icon” href=”favicon.png” type=”image/png”>

<title>Destiny</title>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

<canvas id=”GFG”

width=”600″

height=”400″>

</canvas>

<script>

var x =

document.getElementById(“GFG”);

var ctx = x.getContext(“2d”);

ctx.strokeRect(20, 20, 200, 100);

ctx.stroke();

</script>

</body>

</html>

Click here to read more blogs

Click here to read more questions and answers

About Author


After years of Technical Work, I feel like an expert when it comes to Develop wordpress website. Check out How to Create a Wordpress Website in 5 Mins, and Earn Money Online Follow me on Facebook for all the latest updates.

1 thought on “HTML5 Semantics Elements Introduction and  Hands-On Solutions”

Leave a Comment