In every programming language, comprehending the significance of terms is crucial for effective communication. This becomes even more vital in computer communication. HTML5 offers a variety of semantic elements that enhance the clarity and understanding of code.
Therefore, Semantics is responsible for determining the significance of words and phrases, such as.
Elements with semantic value are those that carry meaning. These elements are easily understood by both the browser and the developer due to their clear and straightforward purpose.
For example:
In HTML4, we have encountered elements like <div>, <span>, and so forth, which are considered non-semantic as they do not provide any information about the content they hold.
On the other hand, <form>, <table>, and <article> etc. are semantic elements because they clearly define their content.
All popular web browsers provide support for HTML5 semantic elements.
Why to use semantic elements?
In HTML4, developers are required to create their own unique id and class names to apply styles to elements such as header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, and more.
This is so difficult for search engines to identify the correct web page content. Now in HTML5 elements (<header> <footer> <nav> <section> <article>), this will become easier. It now allows data to be shared and reused across applications, enterprises, and communities."
Utilizing semantic elements on your website can enhance its accessibility and contribute to establishing a more robust website architecture.
Semantic Elements in HTML5
| Index | Semantic Tag | Description |
|---|---|---|
1. |
<article> |
Defines an article |
2. |
<aside> |
Defines content aside from the page content |
3. |
<details> |
Defines additional details that the user can view or hide |
4. |
<figcaption> |
Defines a caption for a <table> element |
5. |
<figure> |
Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
6. |
<footer> |
Defines a footer for a document or section |
7. |
<header> |
Specifies a header for a document or section |
8. |
<main> |
Specifies the main content of a document |
9. |
<mark> |
Defines marked/highlighted text |
10. |
<nav> |
Defines navigation links |
11. |
<section> |
Defines a section in a document |
12. |
<summary> |
Defines a visible heading for a <details> element |
13. |
<time> |
Defines a date/time |
Some important semantic elements in HTML5
HTML5 <article> Element
The HTML <article> tag is utilized to delineate the content of an article within various contexts such as a document, webpage, application, or a site. This element is versatile and can be employed to present a wide range of content like a forum post, a magazine feature, a newspaper article, or a significant narrative.
Example:
<article>
<h2>Today's highlights</h2>
<p>First story</p>
<p>Second story</p>
<p>Third story</p>
</article>
HTML5 <aside> Element
The <aside> element serves as supplementary content that provides indirect information related to the main content of the webpage. This type of content is commonly displayed in a sidebar format.
Example:
<body>
<h2>My last year memories</h2>
<p>I have visited Paris with my friends last month. This was the memorable journey and i wish to go there again.</p>
<aside>
<h4>Paris</h4>
<p>Paris, France's capital, is a major European city and a global center for art, fashion, gastronomy and culture</p>
</aside>
</body>
HTML5 <section> Element
The <section> tag is utilized to define an independent segment in an HTML file. A webpage can consist of multiple segments, and each segment has the flexibility to include diverse content without the requirement of having headings for every segment.
Example:
<h2>Web designing Tutorial</h2>
<section>
<h3>HTML</h3>
<p>HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications.</p>
</section>
<section>
<h3>CSS</h3>
<p>CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML.</p>
</section>
Nesting <section> tag in <section> tag or Vice Versa?
The <article> element is used to indicate content that is standalone and self-contained, while the <section> element is employed to delineate sections within a document.
In HTML, we can use <section> elements within <article> elements, and <article> elements within <section> elements.
We can also use <section> elements within <section> elements, and <article> elements within <article> elements.
For example:
In a publication like a newspaper, the athletic <article> highlighted in the sports segment might include a specialized segment within each edition.
HTML5 <nav> Element
The HTML <nav> tag is employed to establish a collection of navigation hyperlinks.
Example:
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="html-tutorial">HTML</a> |
<a href="java-tutorial">Java</a> |
<a href="php-tutorial">PHP</a> |
<a href="css-tutorial">CSS</a>
</nav>
</body>
</html>
HTML5 <header> Element
The <header> element serves as the document's header, where introductory information or navigation links can be included.
Example:
<header>
<h1>Welcome to Web123.com</h1>
<nav>
<ul>
<li>Home |</li>
<li>About us |</li>
<li>Contact us</li>
</ul>
</nav>
</header>
HTML5 <footer> Element
The <footer> element specifies the bottom section of an HTML webpage or document.