My Understanding of Semantic HTML
In this article, I will explain about Semantic HTML concepts.
Before we go to Semantic HTML we should know about What is Semantic.
What is Semantic?
Semantics is the study of the meanings of words and phrases in a language. Semantic elements = elements with a meaning.
Let’s move to Semantic HTML
Semantic HTML:
Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational, because people know what paragraphs and browsers know how to display them.
What are the Semantic Elements?
A Semantic element clearly describes its meaning to both the browser and the developer.
<header>
This HTML5 element defines a header of your webpage. It is always visible for the users and is located on the top of your website.
Example
<header>
<h1>JavaScript</h1>
<h3>What is JavaScript?</h3>
<p>Today we are going to talk about JavaScript</p>
</header><nav>
This is one of the main HTML5 semantic tags. It allocates the space for navigation link on your website.
Example
<nav>
<ul>
<li>
<a href="https://www.bitdegree.org/tag/gamified/">Gamified Courses</a>
</li>
<li>
<a href="https://www.bitdegree.org/tutorials/">Tutorials</a>
</li>
<li>
<a href="https://www.bitdegree.org/course/learn-solidity-space-doggos/">Space doggo courses</a>
</li>
<li>
<a href="https://www.bitdegree.org/tag/game-dev/">Game Dev Courses
</a>
</li>
</ul>
</nav><main>
This is one of the HTML5 semantic tags which sets space for the main content of a webpage. It can be an article, regular paragraph or else.
Example
<main id="content" class="group" role="main">
<!-- other tags come inside this -->
</main><article>
The article element is one of the major HTML5 semantic tags. It is used to define the article content on your website. It is usually used for big parts of the text.
Example
<article>
<h1>Fun Fact</h1>
<p>
Fun fact: most of the fun facts on the Internet are not actuallyfun.</p>
</article><section>
This HTML5 semantic tag is an important tag. The <section> element is used to mark the sections of a document, such as chapters or major sections of a long form list. <section> tag part of something else.
<section>
<h1>Section Heading</h1>
<p>The section tag can contain any elements.</p>
<img src="image.png" alt="section example" />
</section><aside>
The <aside> semantic element defines the content which will be set to the side. It is occasionally used for creating sidebars but can also be used for less important content sharing.
Example
<aside>
<h4>Lake</h4>
<p>Oxford lake is a lake in the state.</p>
</aside><footer>
The HTML5 element <footer> describes the footnote for your website or part of the content.
Example
<footer>
<p>Copyright © 2018 All rights reserved.</p>
</footer><details>
This is one of the HTML5 semantic tags that define the details on your website.
Example
<details>
<summary>Copyright</summary>-by Your company All the rights are owned by your company
</details><figure>
This <figure> content can be photos, diagrams, codes, etc.
Example
<figure>
<figcaption>Logo</figcaption>
<img src="image.png" alt="Logo" width="300" height="300">
</figure><figcaption>
The <figcaption> tag generates a title for <figure> element. It always goes together with <figure> element.
Example
<figure>
<figcaption>Dog</figcaption>
<img src="image.png" alt="The Bread Dog" width="300" height="300"/>
</figure><summary>
The <summary> element defines a title for <details> element on your websit.
Example
<details>
<summary>Some details</summary>
<p>Provide more info about the details here.</p>
</details><time>
This is one of the very useful HTML5 semantic tags. It is used to define and display time and date on your page.
Example
<h2>The premiere show starts at <time>21:00</time> today.</h2><img>
The <img> is an HTML5 semantic tag which describes the area for an image on your website. It is one of the most popular and used HTML5 elements.
Example
<img src="image.png" alt="Space Doggo" width="50" height="50"><form>
The <form> element is one of the HTML5 semantic tags. It creates a space to include several spaces for user input on your web page.
<form action="search" method="GET">
Search Term:
<input type="text" name="search_query">
<input type="submit" value="Search">
</form><table>
This HTML5 semantic tag makes a table on a web page with rows and columns. It is a very useful HTML5 element for grouping huge parts of data.
Example
<table>
<tr>
<th>Place</th>
<th>Animal</th>
</tr>
<tr>
<td>Space</td>
<td>Dog</td>
</tr>
</table>In above I explain about various Semantic HTML tags.
Now I am going to explain when to use what. Especially <article>, <section> and <aside>. Because most of us confusing with these.
article and section
People often time confusing, article come inside section or section come inside the article. There is no fixed rule about sections and articles, and their implementation is pretty flexible.
Tips: I have found that nesting sections inside an article of content is both logical for a machine, but also for a human.
Now I will tell about the general rules.
- A section forms part of something else
- An article is its own thing.
aside
we can split aside into two part. Related Aside and Indirectly Related Aside.
- Related Aside — Related aside comes inside the article
- Indirectly Related Aside — Indirectly Related Aside comes outside the article
Full understanding of Semantic HTML tag orders
The above picture explains about semantic HTML flows.
Kindly give me your valuable feedback.
Thank you for reading! Have a great day!
