Example of Semantic Tags

<section> Element

The <section> element is used to represent the standalone section within an HTML document. According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading."

<section> element can be used

Chapters
Introduction
News items
Contact information

Example :

<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Tutor Joes</title>
</head>
<body>
<section class="home">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, vero nostrum doloremque itaque ipsa velit iure. Veritatis quisquam, labore dolorum sequi velit quaerat voluptatibus omnis quam veniam? Quia modi nemo esse facere rerum sequi tenetur, aliquid soluta fugiat enim dicta, obcaecati repellendus sed error aspernaporibus laboriosam laudantium, voluptatum perferendis id architecto suscipit inventore aperiam est ducimus! Doloribus saepe quasi quisquam fuga, sapiente, soluta amet at similique optio officiis ipsam maiores quae rem culpa labore. Libero vel voluptatem quibusdam deleniti pariatur at culpa ipsa et incidunt recusandae cupiditate unde, facilis tempora. Exercitationem, deleniti atque! Rem, autem voluptatem magnam vitae, ex illo magni veritatis cum minima culpa, consequatur ad nobis dolorem cumque tenetur fugiat dolor explicabo mollitia? Illo nulla totam officiis repudiandae unde tenetur eos autem sed, in atque numquam modi, impedit voluptate labore voluptas officia accusantium eum corporis veritatis debitis eligendi beatae adipisci. Necessitatibus maiores, illo nemo facere eius provident voluptates expedita iure unde est, enim rem facilis nisi.</p>
</section>
<section class="service">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, vero nostrum doloremque itaque ipsa velit iure. Veritatis quisquam, labore dolorum sequi velit quaerat voluptatibus omnis quam veniam? Quia modi nemo esse facere rerum sequi tenetur, aliquid soluta fugiat enim dicta, obcaecati repellendus sed error aspernaporibus laboriosam laudantium, voluptatum perferendis id architecto suscipit inventore aperiam est ducimus! Doloribus saepe quasi quisquam fuga, sapiente, soluta amet at similique optio officiis ipsam maiores quae rem culpa labore. Libero vel voluptatem quibusdam deleniti pariatur at culpa ipsa et incidunt recusandae cupiditate unde, facilis tempora. Exercitationem, deleniti atque! Rem, autem voluptatem magnam vitae, ex illo magni veritatis cum minima culpa, consequatur ad nobis dolorem cumque tenetur fugiat dolor explicabo mollitia? Illo nulla totam officiis repudiandae unde tenetur eos autem sed, in atque numquam modi, impedit voluptate labore voluptas officia accusantium eum corporis veritatis debitis eligendi beatae adipisci. Necessitatibus maiores, illo nemo facere eius provident voluptates expedita iure unde est, enim rem facilis nisi.</p>
</section>
</body>
</html>

Output :

<aside> Element

The <aside> element represent the content which is indirectly giving information to the main content of the page. It is frequently represented as a sidebar.

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 - Tutor Joes</title>
	</head>
	<body>
		<aside>
			<h4>Tutor Joes</h4> 
			<p>Learn More...Be Smart..!</p>			
		</aside>
	</body>
</html>

Output :

<article> Element

The <article> element defines article content within a document, page, application, or a website. It can be used to represent a forum post, a magazine, a newspaper article, or a big story.

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 - Tutor Joes</title>
	</head>
	<body>
		<article>
			<h4>Tutor Joes</h4> 
			<p>Learn More...Be Smart..!</p>	
			<ul>
				<li> HTML</li>
				<li> CSS</li>
				<li> Bootstrap</li>
				<li> JavaScript</li>
				<li> jQuery</li>
				<li> mySQL</li>
			</ul>
		</article>
	</body>
</html>

Output :

<details> Element

The <details> tag is used to specify the additional details on the web page that the user can view or hide on demand.

It is used together with a relevant tag known as <summary>. Technically, there is no need of summary tag, but if you ignore this then the browser will use some default text.

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 - Tutor Joes</title>
	</head>
	<body>
		<details>  
			<summary>Tutor Joes Computer Education</summary>  
			<p> Learn More Be Smart.</p>  
			<p>Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. </p>  
		</details> 
	</body>
</html>

Output :

<figure> and <figcaption> Element

HTML <figure> tag is used to mark up a photo in the document on a web page.

While the content of the figure element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

The <figcaption> element is used to provide a caption to an image.

Only one this element can be nested within a figure tag although the figure element itself may contain multiple other elements like <img> or <code>. The <figcaption> element is used with <figure> element and it can be placed as the first or last child of the figure element.

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 - Tutor Joes</title>
	</head>
	<body>
		<article>
			<h4>Tutor Joes</h4> 
			<figure>
				<img src="tj.jpg" height="500" width="500">
				<figcaption>Picture 1.1 - Tutor Joes Computer Education</figcaption>
			</figure>
		</article>
	</body>
</html>

Output :

<header> Element

HTML <header> tag is used as a container of introductory content or navigation links. Generally a <header> element contains one or more heading elements, logo or icons or author's information.

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 - Tutor Joes</title>
	</head>
	<body>
		<header>
			<h4>Tutor Joes</h4> 
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
		</header>
	</body>
</html>

Output :

<footer> Element

This tag is used to define a footer for a document or a section. It is generally used in the last of the section (bottom of the page).A <footer> element typically contains:

authorship Details
copyright Details
contact Details
sitemap
back to top links
related documents

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 - Tutor Joes</title>
	</head>
	<body>
	<h4>Tutor Joes</h4> 
		<footer>
			<p>Designed & Developed By <a href="https://tutorjoes.com/">Tutor Joes</a></p>
		</footer>
	</body>
</html>

Output :

<main> Element

This tag specifies the main content of a document.

The content inside the >main< element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 - Tutor Joes</title>
	</head>
	<body>
	<main>
	  <h1>Tutor Joes</h1>
	  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
	  <article>
		<h2>Title 1</h2>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
	  </article>
	  <article>
		<h2>Title 2</h2>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
	  </article>
	  <article>
		<h2>Title 3</h2>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
	  </article>
	</main>
		<footer>
			<p>Designed & Developed By <a href="https://tutorjoes.com/">Tutor Joes</a></p>
		</footer>
	</body>
</html>

Output :

<nav> Element

This tag define a set of navigation links.

HTML <nav> tag is used to represent a section which contains navigation links, either within current document or to another document.Notice that NOT all links of a document should be inside a nav element.This tag is intended only for major blocks of navigation links.

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 - Tutor Joes</title>
	</head>
	<body>
		<nav>
		  <a href="#">Office Automation</a> |
		  <a href="#">Mobile Application</a> |
		  <a href="#">Web Designing</a> |
		  <a href="#">Programming</a>
		</nav>
		<h4>Tutor Joes</h4> 
	</body>
</html>