HTML Semantic Tags

#Semantic Tags

  1. Semantic tags are self-explanatory tags.
  2. Semantic tags in HTML are designed to give meaning to the content they contain.
  3. Example: <form>, <table>, <video>, <audio> are semantic tags, whereas <div>, <span>, etc., are non-semantic tags.

#Page Layout

It is the arrangement of visual elements on a webpage.

#Header Tag

  1. The Header semantic tag was introduced in HTML5.
  2. Header tag is used to represent the header or topmost part of a website where we have a logo and navigation links.
  3. It is a container tag.
  4. It is a block-level element.

#Nav Tag

  1. The Nav semantic tag was introduced in HTML5.
  2. All navigation links like home, contact us, services, etc., should be written within the Nav tag.
  3. It is a container tag.
  4. It is a block-level element.

#Section Tag

  1. The Section semantic tag was introduced in HTML5.
  2. Section tag is used to define sections in a webpage.
  3. It is a container tag.
  4. It is a block-level element.

#Article Tag

  1. The Article semantic tag was introduced in HTML5.
  2. Article tag is used to create divisions in a section tag.
  3. Here, we can write independent content.
  4. It is a container tag.
  5. It is a block-level element.

#Main Tag

  1. The Main semantic tag was introduced in HTML5.
  2. Main tag is used to define the main content of a webpage.
  3. The main content inside a section or article can be written within the main tag.
  4. It is a container tag.
  5. It is a block-level element.

#Aside Tag

  1. The Aside semantic tag was introduced in HTML5.
  2. The content which is not directly related to our website, like advertisements, should be written within the aside tag.
  3. It is a container tag.
  4. It is a block-level element.

#Footer Tag

  1. The Footer semantic tag was introduced in HTML5.
  2. Footer tag represents the footer/bottom part of a webpage or website.
  3. It is a container tag.
  4. It is block level element.