HTML Semantics

By | January 28, 2020

There are many word semantic in HTML5 which we use in our web page, in this chapter we will learn about Semantic. It is very important to understand the words of any language, when it is of a computer, it becomes more important, so HTML5 gives us the meaning of such things which we can easily understand.

A semantic study of the meaning of words and phrases in a language is.

Semantic elements = elements with a meaning.

There is a connotation that clearly conveys its meaning to both the developer and browser.

Some examples of non-semantic:- <div>,<span>

Some examples of semantic:- <form>,<table>,<article>

HTML5 semantic runs in all modern browsers.

Why use HTML5 Semantic:-

Earlier, in HTML4, the header footers used IDs for sidebars, etc., which the search engines could not easily find.

But in HTML5 it became easier because in this, a special tag is used to do each task like <header>,<footer>,<nav> etc.

New Semantic Elements of HTML5

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

HTML5 <aside> Element

<aside> is used to display the main content of our web page or it is used as a sidebar.

<body>
	<h1>aside Element</h1>
	
	<aside>
		<h3>Heading</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, iure.</p>
	</aside>
</body>

HTML5 <article> Element

If you want to write an article or write a document inside a web page, then we use the article, this article can be a full article of a story or a news paper.

<body>
	<article>
	<h1>article Element</h1>

        <p>Story No. 1</p>
	<p>Story No. 2</p>
	<p>Story No. 3</p>
	</article>
</body>

HTML5 <section> Element

A web page can have different types of content and each content has a different type of section. If we want to subdivide the content, we use <section> tag.

<body>
	<section>
		<h2>First Section</h2>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, quam!</p>
	</section>

	<section>
	   <h2>Second Section</h2>	

	   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, numquam.</p>
	</section>
</body>

HTML5 <nav> Element

Navigation uses <nav> tag to represent a set of links.

<body>
	<nav>
		<a href="home.html">Home</a>
		<a href="about.html">About</a>
		<a href="blog.html">Blog</a>
		<a href="contact.html">Contact</a>
	</nav>
</body>

HTML5 <header> Element

<header> tag is used to represent the main head of a web site. A header may contain navigation links, web site logos, etc.

<body>
<header>
	<h2>Site Logo</h2>
	
	<nav>
		<a href="home.html">Home</a>
		<a href="about.html">About</a>
		<a href="blog.html">Blog</a>
		<a href="contact.html">Contact</a>
	</nav>
</header>
</body>

HTML5 <footer> Element

<footer> tag is used to indicate the footer of a web page.

         <footer>
	       <p>&copy; 2020. All rights reserved.</p>
	</footer>
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *