In any language, it is essential to understand the meaning of words during communication. And if this is a computer communication then it becomes more critical. So HTML5 provides more semantic elements which make easy understanding of the code.
Hence Semantics defines the meaning of words and phrases, i.e.
Semantic elements= elements with a meaning. Semantic elements have a simple and clear meaning for both, the browser and the developer.
For example:
In HTML4 we have seen <div>, <span> etc. are which are non-semantic elements. They don’t tell anything about its content.
On the other hand, <form>, <table>, and <article> etc. are semantic elements because they clearly define their content.
HTML5 semantic elements are supported by all major browsers.
Why to use semantic elements?
In HTML4, developers have to use their own id/class names to style elements: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.
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.”
Semantic elements can increase the accessibility of your website, and also helps to create a better website structure.
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 <figure> 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
HTML <article> element defines article content within a document, page, application, or a website. It can be used to represent a forum post, a magazine, a newspaper article, or a big story.
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 represent the content which is indirectly giving information to the main content of the page. It is frequently represented as a sidebar.
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> element is used to represent the standalone section within an HTML document. A page can have various sections and each section can contain any content, but headings for each section is not mandatory.
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 <article> tag in <section> tag or Vice Versa?
We know that the<article> element specifies independent, self-contained content and the <section> element defines section in 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 newspaper, the sport <article> in the sport section, may have a technical section in each <article>.
HTML5 <nav> Element
The HTML <nav> element is used to define a set of navigation links.
Example:
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="https://www.javatpoint.com/html-tutorial">HTML</a> |
<a href="https://www.javatpoint.com/java-tutorial">Java</a> |
<a href="https://www.javatpoint.com/php-tutorial">PHP</a> |
<a href="https://www.javatpoint.com/css-tutorial">CSS</a>
</nav>
</body>
</html> HTML5 <header> Element
The <header> element represent the header of the document which can contain introductory content or navigation links.
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> tag defines the footer of an HTML document or page.
Example:
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="https://www.javatpoint.com/html-tutorial">HTML</a> |
<a href="https://www.javatpoint.com/java-tutorial">Java</a> |
<a href="https://www.javatpoint.com/php-tutorial">PHP</a> |
<a href="https://www.javatpoint.com/css-tutorial">CSS</a>
</nav>
</body>
</html>
Leave a Reply