html semantic tags

HTML tags are classified in two types.

• Semantic
• Non Semantic

Semantic HTML elements are those that clearly describe means human readable.

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.

html semantic elements

Why Do You Need to Use Semantic Tags

• Greater accessibility.
• Much easier to read.
• Offers a better user experience.
• Leads to more consistent code.

According to the W3C: A semantic Web allows data to be shared and reused across applications, enterprises, and communitie

html semantics

HTML <section> Element

The <section> element defines a section in a 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, Contact information etc..

			
					<section>
  <h1>Hello Section Element</h1>
  <p>Lorem Ipsum ,sdqq iftkad opp onmfffeg qfeftn</p>
</section>

			
	

			
	
			

		
	

HTML <article> Element

The <article> element defines self-contained content.Examples include forum posts ,blog posts ,user comments ,product cards, newspaper articles

			
					<article>
  <h1>HTML Sematics Element</h1>
  <time>2022 May</time>
  <span>HTML</span>
</article>

			
	

			
	
			

		
	

HTML <header> Element

The <header> element defines a container for a set of navigational links.It typically contains one or more heading elements , logo or icon, a search form, an author name, and other elements.

			
					<header class="page-header">
  <h1>Hello World</h1>
  <span>CJ</span>
  <div>Something else</div>
</header>

			
	

			
	
			

		
	

Note: You can have several <header> elements in one HTML document.Ot cannot be placed within a <footer>, <address> or another <header> element.

HTML <footer> Element

The <footer> element defines a footer for a document.It typically contains information about the author of the section, copyright data or links to related documents , sitemap etc...

			
					<footer>
  <p>2022 ©CJ</p>
  <p><a href="mailto:admin@codejagd.com">Mail us</a></p>
</footer>

			
	

			
	
			

		
	

HTML <nav> Element

The <nav> element defines a set of navigation links.The <nav> element is intended only for major block of navigation links, Some examples are menus, tables of contents

			
					<nav>
  <a href="/tags/html/">HTML</a>
  <a href="/tags/css/">CSS</a>
  <a href="/tags/javascript">JavaScript</a>
</nav>

			
	

			
	
			

		
	

HTML <aside> Element

The

element defines some content aside from the content it is placed in (like a sidebar).

			
					<aside>
  <p>Some SideBar Datas like ad placements , table of contents</p>
</aside>

			
	

			
	
			

		
	

HTML <figure> and <figcaption> Element

The <figure> tag defines self-contained content, like illustrations, diagrams, photos, code listings, etc.The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.

			
					<figure>
  <img src="logo.jpg" alt="CJ">
  <figcaption>Some Caption of Image</figcaption>
</figure>

			
	

			
	
			

		
	

html5 semantic elements

List of some of the semantic elements in HTML.