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

All About HTML

2 years ago

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:

<header>: Represents the introductory content at the top of a document or a section.
<nav>: Defines a section of navigation links.
<main>: Represents the main content of a document.
<footer>: Defines the footer section at the bottom of a document or a section.
<article>: Represents a self-contained composition, such as a blog post or a news article.
<section>: Defines a standalone section of content.
<aside>: Represents content that is tangentially related to the main content. Structural tags help in creating a well-organized and easily maintainable web page structure.

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:

<blockquote>: Represents a section that is quoted from another source.
<figure>: Represents self-contained content, such as images, diagrams, or code snippets.
<figcaption>: Represents the caption or description of a figure element.
<cite>: Specifies the title of a work, such as a book or an article.
<time>: Represents a specific date, time, or duration. Contextual tags enrich the meaning of the content and provide additional information to both humans and machines.

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:

<h1> to <h6>: Represents headings of different levels, with <h1> being the highest level and <h6> the lowest.
<p>: Defines a paragraph of text.
<a>: Creates a hyperlink to another resource.
<strong>: Indicates strong importance or emphasis.
<em>: Indicates emphasis.
<mark>: Highlights a portion of text.
<code>: Represents a piece of computer code.
<list>: Represents an ordered or unordered list of items. Semantic tags help in structuring the content in a meaningful way, improving accessibility, search engine optimization, and overall code readability.

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.

<header>: The <header> tag represents the introductory or navigational section of a webpage. It typically contains the logo, site title, and main navigation menu.
<section>: The <section> tag defines a section of a webpage, which groups related content together. It helps in organizing the content and improving the document structure.
<article>: The <article> tag represents a self-contained piece of content within a document. It can be a blog post, a news article, a forum post, or any other independent content unit.
<figure>: The <figure> tag is used to encapsulate and represent content that is referenced from the main document. It is often used to contain images, illustrations, diagrams, or videos.
<img>: The <img> tag is used to embed an image in the document. It requires the src attribute to specify the image source (URL) and can have additional attributes like alt for alternative text and width/height for dimensions.
<figcaption>: The <figcaption> tag is used to provide a caption or description for the content within the <figure> tag. It is typically used to provide a textual explanation or context for the associated image.
<footer>: The <footer> tag represents the closing section of a webpage. It often contains information such as copyright notices, contact details, or links to related resources.

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:

<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.
<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.
<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.
<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.
<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.
<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.
<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.