Site icon All About HTML

Elevate Your Web Design: Unveiling the Magic of Structural, Contextual and Semantic tags

Elevate Your Web Design: Unveiling the Magic of Structural, Contextual and Semantic tags

In HTML5, there are three main categories of tags: structural, contextual, and semantic tags. Let’s explore each of them in detail:

1. Structural tags
Structural tags are used to define the overall structure and layout of a web page. They provide a high-level organization of the content and help in creating a logical hierarchy. Some examples of structural tags in HTML5 include:

2. Contextual Tags:
Contextual tags provide additional context or meaning to specific parts of the content. They help in conveying the purpose or significance of certain elements within the document. Some examples of contextual tags in HTML5 include:

3. Semantic Tags:
Semantic tags are used to describe the meaning and purpose of the content. They convey the semantic structure of the document, making it more accessible and understandable for both humans and search engines. Semantic tags in HTML5 include:

Below is a video explanation on what is semantic and semantic tags in html5.

16 - What is Semantic and semantic tags in html5 - HTML5 Essential Training URDU / HINDI
Semantic Tags in HTML5

Code in the video can be found in the below link

https://github.com/mdn/learning-area/tree/main/html/introduction-to-html/document_and_website_structure

A example of building a webpage using semantic tags.

Using HTML5 semantic tags

<header></header>
<section>
	<article>
		<figure>
			<img>
			<figcaption></figcaption>
		</figure>
	</article>
</section>
<footer></footer>

This HTML code represents a basic structure of a webpage, where different structural tags are used to organize the content.

The HTML code represents a basic webpage structure with a header, a section containing an article, which includes a figure with an image and a caption, and finally a footer. This structure helps organize and semantically structure the content within the webpage.

Now same HTML code with out using HTML5 semantic tags.

<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
			<div class="figcaption"></div>
		</div>
	</div>
</div>
<div id="footer"></div>

The HTML code represents a basic structure of a webpage with various div elements and classes. Here’s an explanation of each line:

  1. <div id="header"></div>: This line represents a <div> element with the id attribute set to “header”. It is commonly used to define the header section of a webpage.
  2. <div class="section">: This line represents a <div> element with the class attribute set to “section”. It is used to create a section within the webpage.
  3. <div class="article">: This line represents a <div> element with the class attribute set to “article”. It is used to define an article within the section.
  4. <div class="figure">: This line represents a <div> element with the class attribute set to “figure”. It is often used to contain an image and its associated caption.
  5. <img>: This line represents an <img> element, which is used to insert an image into the webpage. The source of the image is typically specified using the src attribute.
  6. <div class="figcaption"></div>: This line represents a <div> element with the class attribute set to “figcaption”. It is commonly used to define the caption or description of an image.
  7. <div id="footer"></div>: This line represents a <div> element with the id attribute set to “footer”. It is typically used to define the footer section of a webpage.

Overall, the code is structuring a webpage with a header, a section containing an article, which in turn contains a figure (image) with its associated caption. The footer is placed at the bottom of the webpage.

Conclusion:

By using structural, contextual, and semantic tags appropriately, you can create well-structured and semantically meaningful HTML documents that are easier to understand, maintain, and navigate.

Exit mobile version