tutorialstonight logo
A Platform To Learn To Code

HTML SEMANTICS



The word semantics refers to the correct understanding of meaning of any word or sentence.

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

Few semantic elements in HTML are <header>, <footer>, <table>, <section>, <form> etc. These give clear meaning about what they are.

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


semantic elements

few semantic elements are as follows:

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.

Example

Run the code

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.

Example

Run the code

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.

Example

Run the code

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.

Example

Run the code

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.

Example

Run the code



BOX

BOX