HTML Semantic Elements

❮ Previous Home Next ❯

The HTML have several semantic elements.




What are Semantic Elements?

The semantic means means elements with a meaning and clearly describes its meaning to both the browser and the developer.




Non-Semantic elements:

The Non-Semantic elements means they don't tells nothing about its content.

<div> and <span>




Semantic Elements:

The Semantic elements means they clearly tells about its content.

<article> <aside> <details> <figcaption> <figure> <footer> <form> <header> <main> <mark> <nav> <table> <section>



HTML <header> Element

The <header> element represents the header section of a document or a section element it is contained within.

Typical document header in print, it should contain title and heading information about the related content.

Example

<header>
  <h1>Title of the document</h1>
  <p>By John Doe</p>
  <p>On Sunday, <time datetime="2020-01-01">1 January 2020</time></p>
</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id ipsum sit amet nunc venenatis finibus at tincidunt mauris.</p>



HTML <nav> Element

The <nav> element represents a group of links to other locations either inside or outside of a document.

Links are not restricted to occur solely within <nav> elements.

The intent of this element is that it collects navigation together often as a unit; commonly this would be primary or secondary site navigation or possibly page-related links.

A document may have several <nav> elements.

Example

<nav>
  <a href="home.html" >Home</a>
  <a href="about.html" >About</a>
  <a href="contact.html" >contact</a>
</nav>



HTML <section> Element

The <section> element defines a generic section of a document and it may contain a heading and footer of its own.

Note: Authors are encouraged to use the <article>article element instead of the section element when it would make sense to syndicate the contents of the element.

Example

<section>
<h2>HTML</h2>
<p>The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have been many different versions of HTML. The most widely used version throughout the 2000`s was HTML 4.01, which became an official standard in December 1999.</p>
</section>

<section>
<h2>CSS</h2>
<p>CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was working with Tim Berners-Lee at CERN.</p>
</section>

<section>
<h2>JavaScript</h2>
<p>Brendan Eich created JavaScript in 1995 while he was at Netscape Communications Corporation, the creators of the legendary Netscape Navigator web browser. At the time, the Java coding language was rapidly gaining traction and Netscape Communications was working to make it available in Netscape Communicator.</p>
</section>






HTML <article> Element

The <article> is a block element defines a subset of a document’s content that forms an independent part of the document, such as a blog post, article, or other self-contained unit of information, that may be linked to or included in some other content body.

Note: This element does not have any specialty, use CSS to implemented in any browser.

Example

<article>
<h2>HTML</h2>
<p>The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have been many different versions of HTML. The most widely used version throughout the 2000`s was HTML 4.01, which became an official standard in December 1999.</p>
</article>

<article>
<h2>CSS</h2>
<p>CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was working with Tim Berners-Lee at CERN.</p>
</article>

<article>
<h2>JavaScript</h2>
<p>Brendan Eich created JavaScript in 1995 while he was at Netscape Communications Corporation, the creators of the legendary Netscape Navigator web browser. At the time, the Java coding language was rapidly gaining traction and Netscape Communications was working to make it available in Netscape Communicator.</p>
</article>



HTML <aside> Element

The <aside> element defines a section of a document that encloses content that is related to the other content the element may be associated with.

Note: This element does not have any specialty, use CSS to implemented in any browser.

Example

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id ipsum sit amet nunc venenatis finibus at tincidunt mauris.</p>
<aside>
  <h2>Side contect</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id ipsum sit amet nunc venenatis finibus at tincidunt mauris.</p>
</aside>



HTML <footer> Element

The <footer> element represents the footer section of a document.

Note: Using a <div> tag with a special class will also similar.

Example

<footer>
  <p>Author: John Doe</p>
  <p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>



HTML <figure> and <figcaption> Elements

The <firure> element specifies captions for elements. It also block level element.

The <figcaption> element is used to add a caption for the <figure> element.

The <figcaption> element represents a caption or legend describing the rest of the contents of its parent <figure>.

Example

<h2> Figure caption top </h2>

<figure>
  <figcaption>Fig.1 - Demo.</figcaption>
  <img src="img-boy.jpg" alt="demo" style="width:100%">
</figure>


<h2> Figure caption bottom </h2>

<figure>
  <img src="img-boy.jpg" alt="demo" style="width:100%">
  <figcaption>Fig.1 - Demo.</figcaption>
</figure>



Why Semantic Elements?

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

Tag Description
<article> Defines a subset of a document’s content that forms an independent part of the document, such as a blog post, article, or other self-contained unit of information, that may be linked to or included in some other content body.
<aside> This element defines a section of a document that encloses content that is related to the other content the element may be associated with.
<details> Defines a disclosure widget in which additional information or interactive elements that can be shown on demand.
<figcaption> Defines a caption or legend describing the rest of the contents of its parent <figure>.
<figure> Defines captions for elements
<footer> Defines a footer section of a document.
<header> Defines the header section of a document or a section element it is contained within.
<main> Defines the main content of the body of a document or application.
<mark> Defines a marked section of text.
<nav> Defines a group of links to other locations either inside or outside of a document.
<section> Defines a generic section of a document and it may contain a heading and footer of its own.
<summary> Defines a summary for the <details> element.

<time> Defines content that represents a date and/or time.

A complete list of all HTML tags, see HTML Tag Reference.

❮ Previous Home Next ❯