HTML Semantic Elements

❮ Prev Next ❯

The word semantic refers to the correct understanding of meaning of any word or sentence. Semantic element defines its purpose by its name to both browser and developer.

Many HTML elements clearly define its meaning to both web developers and to browsers, these are elements called semantic elements.

HTML elements like, <header>, <footer>, <table>, <section>, <form> etc. These give clear meaning about what they are and what they are used for.

The non-semantic elements are like <div>, <span>, etc. They do not tell anything about the content to the browser.

List of HTML Semantic Elements

The following list contains the semantic elements in HTML.

Semantic element	Description
<article>	It defines an article
<aside>	It defines content aside of the webpage
<details>	It defines details of content which can be shown or hide on demand
<figcaption>	It is used inside figure element to define caption of figure
<figure>	It is used to define images
<header>	It defines header of any section in HTML document
<main>	It defines main content on webpage which is unique
<nav>	It used to create navigation section
<summary>	It used inside details tag which defines heading
<time>	It defines date or time

HTML article tag

The article tag is a semantic element. It is used to create any article which itself contains other elements.

Each article is uniquely identified by using heading tags(<h1>-<h6>) as a child of article tag.

<article>
  <h1>Inception</h1>
  <p>A great sci-fi movie written and directed by Christopher Nolan.</p>
  <p>The film star is Leonardo Dicaprio.</p>
</article>

Try It

HTML aside tag

The aside tag is used to define the part of content which is indirectly related to the document's main content.

The aside tag is generally used to create a sidebar.

<style>
  aside {
    float: left;
    font-size: 20px;
    font-weight: bold;
    width: 10%;
    color: #006699;
  }
</style>

<p>inception is a great sci-fi movie written and directed by Christopher Nolan.</p>
<p>inception is a great sci-fi movie written and directed by Christopher Nolan.</p>
<aside>
  <p>The film star is Leonardo Dicaprio.</p>
</aside>

Try It

HTML nav element

The nav element is used to create a section of page that is udes to provide navigation.

The navigation links are wrapped inside the <nav> element.

<style>
  nav a {
    color: white;
    background-color: #006699;
    font-size: 20px;
    padding: 10px;
  }
</style>

<nav>
  <a href="https://www.tutorialstonight.com/">Home</a>
  <a href="https://www.tutorialstonight.com/html/html-introduction">HTML</a>
  <a href="https://www.tutorialstonight.com/css/css-tutorial">CSS</a>
  <a href="https://www.tutorialstonight.com/js">Javascript</a>
</nav>

Try It

HTML Header tag

HTML header tag defines header an introductory section of content.

It may contain heading, any logo, search bar or other element.

A document may have many headers.

<header>
  <p>The main page.</p>
  <img src="header-logo.webp" alt="header" width="300" />
</header>

Try It

HTML footer tag

The footer tag represents a footer for the content.

Footer generally contain information about author, copyright etc.

A footer is wrapped inside a <footer> tag.

<style>
  footer {
    color: white;
    background-color: #006699;
    font-size: 20px;
    padding: 25px;
  }
</style>

<footer>
  <p>Copyright &copy; All right reserved.</p>
  <p>About us</p>
</footer>

Try It

Conclusions

The HTML semantic elements are used to define a meaningful structure of the document.

These are easy to read and understand.

The semantic elements are used to create a better user experience.

❮ Prev Next ❯