HTML Semantic Elements
This article discusses HTML semantics. An element with a semantic meaning is called a semantic element.
Semantic Elements: What are they?
Both the browser and the developer can understand the meaning of a semantic element. A non-semantic element is a <div> or <span>, which displays no information about their contents.
A <form>, a <table>, and an <article> are examples of HTML semantic elements. They clearly define their contents.
Elements in HTML Semantics
Typical HTML code on a web site is as follows:
<div id=”nav”> <div class=”header”> <div id=”footer”>
It is used to indicate the navigation bar, header, and footer.
To explain the different components of a web page, HTML semantics operates the following semantic elements:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML <section> Element:
The <section> element in a document represents a section.
The HTML documentation for mrc states: “A section is a thematic grouping of content.”
An introduction section, content section, and contact information section are included on a HTML web page.
There are two sections in a document:
<!DOCTYPE html>
<html>
<body><section>
<h1>Nikola Tesla</h1>
<p>Tesla, an Austrian native, finished his undergraduate training in engineering and physics in the 1870s without earning a degree. However, he did obtain experience working for Continental Edison and in the telephone industry in the early 1880s. In 1884, he was granted naturalization as a citizen of the United States. He was employed at New York City's Edison Machine Works before leaving alone. Partners who helped Tesla fund and sell his ideas made it feasible for him to develop mechanical and electrical devices in New York.</p>
</section><section>
<h1>WWF's Panda symbol</h1>
<p>The alternating current (AC) induction motor and polyphase AC system covered by his patents from 1888 served as the pillars of the polyphase system sold by Westinghouse Electric.</p>
</section></body>
</html>
In HTML, the <header> element contains content such as navigation links and introductory content in HTML semantics.
Typically, a <header> element contains the following information:
- Logos or icons
- It contains a heading (<h1> – <h6>)
- Information about the author
Please note that you can have more than one <header> element in the same HTML document, but It’s impossible to place headers inside another <header>, a <footer>, or an <address>.
The header of an article is as follows:
<!DOCTYPE html>
<html>
<body><article>
<header>
<h1>What is Google?</h1>
<p>Google goals</p>
</header>
<p>Formerly known as BackRub. As a research project at Stanford University, Sergey Brin and Larry Page began developing Google in 1996 in order to search the Internet for files. Their search engine's name was later changed to Google, which is inspired by the term googol. A headquarters can be found in Mountain View, California, where the company is based.</p>
</article></body>
</html>
Here is another example of the HTML <header> element
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Welcome to Mr Examples</h1>
<nav>
<ul>
<li>HTML |</li>
<li>CSS |</li>
<li>Python</li>
</ul>
</nav>
</header>
</body>
</html>
HTML <article>
Articles specify independent, self-contained content. In HTML semantics, <article> should make sense on their own and be distributed independently from the rest of the site.
The following are examples of how an <article> element can be used in HTML semantics:
- An article about entertainment.
- Article in a newspaper.
- Post on the forum.
- Post on the blog.
The following three articles are independent and self-contained:
<!DOCTYPE html>
<html>
<body><article>
<h2>Alphabet Inc</h2>
<p>The headquarters of Alphabet Inc., a holding company for an American technological corporation, are located in Mountain View, California. Google underwent a reorganisation on October 2, 2015, and in the process, became Alphabet.By revenue, Alphabet is the third-largest technology corporation in the world and one of the most valuable businesses.</p>
</article><article>
<h2>Youtube</h2>
<p>Another American social networking and video-sharing site is YouTube, which has its headquarters in San Bruno, California. On February 14, 2005, Steve Chen, Chad Hurley, and Jawed Karim established it. It is owned by Google and is the second-most visited website, after Google Search. More than one billion hours of video are seen on YouTube each day by its more than 2.5 billion monthly subscribers.</p>
</article><article>
<h2>Facebook</h2>
<p>Facebook is an online social network and social media website that was launched in 2004 and is owned by Meta Platforms in the US. Together with fellow Harvard College students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz, and Chris Hughes, Mark Zuckerberg launched Facebook in 2004. Its name is derived from the Facebook directory often sent to students at American universities. Since 2006, anybody above the age of 13 is welcome to join. Harvard students were the first to do so, and afterwards students from other North American colleges. With 2.93 billion monthly active users, Facebook ranked third among the most popular websites in the world in July 2022.</p>
</article></body>
</html>
CSS can be used to style the element:
<!DOCTYPE html>
<html><body><br><br><br><style><br>.all-tech {<br>margin: 0;padding: 5px;<br>background-color: lightpink;<br>}.all-tech<br>> h1, .browser {<br>margin: 15px;<br>padding: 10px;<br>}.tech{<br>background: lightgrey;<br>}.browser > h2,<br>p {<br>margin: 3px;<br>font-size: 80%;<br>}<br></style><br><br><article class="all-tech"><br><h1>Alphabet Inc</h1><br><article class="tech"><h2>Google by Alphabet Incorporation</h2><br><p>By revenue Alphabet is the third-largest technology corporation in the world and one of the most valuable businesses.</p><br></article><br><article class="tech"><h2>facebook</h2><br><p>Mark Zuckerberg launched Facebook in 2004. Its name is derived from the Facebook directory often sent to students at American universities.</p><br></article><article class="tech"><br><h2>Youtube</h2><p>It is also owned by Google and is the second-most visited website, after Google Search. More than one billion hours of video are seen on YouTube each day by its more than 2.5 billion monthly subscribers.</p><br></article><br></article><br>
</body></html>
HTML <details>
A disclosure component is created with the <details> HTML element by displaying information only when the component is pressed into an open state. This element must contain a summary or label when it comes to HTML semantics.
Kindly refer to the example below to understand the working of HTML <details> tag :
<!DOCTYPE html>
<html>
<body>
<details>
<summary>Google</summary>
Google LLC is an American multinational technology company focusing on search engine technology, online advertising, cloud computing, computer software, quantum computing, e-commerce, artificial intelligence, and consumer electronics.
</details>
</body>
</html>
CSS can also be applied to <detail> element to make it more attracting here is how:
<!DOCTYPE html>
<html>
<head>
<style>
details {
border: 1px solid black;
border-radius: 3px;
padding: 5px 5px 0;
}
summary {
font-weight: bold;
margin: 0;
padding: 5px;
}
details[open] {
padding: 0.5em;
}
details[open] summary {
border-bottom: 1px solid black;
margin-bottom: 5px;
}
</style>
</head>
<body>
<details>
<summary>Google</summary>
Google LLC is an American multinational technology company focusing on search engine technology, online advertising, cloud computing, computer software, quantum computing, e-commerce, artificial intelligence, and consumer electronics.
</details>
</body>
</html>
Nesting <article> in <section> or Vice Versa?
<article> specify independent, self-contained content. A document’s sections are defined by the <section> element.
Is it possible to nest those elements based on the definitions? It is not possible!
Thus, there will be HTML pages with sections containing articles, and articles containing sections as it comes to HTML semantics.
Here is an example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<article>
<h1>Tesla Model 3</h1>
<p>Model 3 comes with the option of dual motor all-wheel drive, 20" Ãœberturbine Wheels and Performance Brakes for total control in all weather conditions.</p>
<section>
<h2>User Reviews</h2>
<article>
<header>
<h3>Sam says:</h3>
<p><time datetime="2023-06-05T22:43-08:00">3 hours ago</time></p>
</header>
<p>Fun to drive, muscle-car challenging performance, great driving range for the price.</p>
</article>
<article>
<header>
<h3>Daniel says:</h3>
<p><time datetime="2023-06-05T23:45-08:00">2 hours ago</time></p>
</header>
<p>Self-driving promise remains unrealized, too many controls buried in the central touchscreen, build quality needs finessing.</p>
</article>
</section>
</article>
</body>
</html>
HTML <nav> Tag:
<nav> represents a set of navigation links in HTML. Some links within a document should NOT be inside the <nav> tag.
It should only be used to display navigation links for significant blocks of text.
The initial rendering of the content can be missed by browsers.
Here are some links to help you navigate:
<!DOCTYPE html>
<html>
<body><nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav></body>
</html>
In a document or section, the <footer> tag is used to specify the footer.
In most cases, the <footer> tag contains the following data:
- Information about authorship.
- A copyright statement.
- Get in touch.
- Website map.
- The top links of this page.
- Related or latest posts..
In a single document, you can have multiple <footer> tags.
Document footers include the following:
HTML <aside> Tag:
This tag describes the content that is different from the content it is placed in (like a sidebar).
HTML semantics mandates that the content of a <aside> be indirectly interconnected to its surrounding content.
You may also display some content aside from the place where it is placed:
<!DOCTYPE html>
<html>
<body><p>The American business Meta Platforms is the owner of the social networking and social media website Facebook. The name of the social networking site, which was established in 2004 by Mark Zuckerberg and fellow Harvard College students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz, and Chris Hughes, is derived from the Face Book directories that are frequently distributed to students at American universities.</p><aside>
<h4>Mark Zuckerberg</h4>
<p>Mark Elliot Zuckerberg, an American business mogul, internet entrepreneur, and philanthropist, was born on May 14, 1984. He is renowned for co-founding Facebook, a social networking platform, and Meta Platforms, the corporation that owns it (formerly known as Facebook, Inc.), of which he serves as chairman, chief executive officer, and majority shareholder.</p>
</aside></body>
</html>
The following CSS code can be used to style the <aside> element:
<!DOCTYPE html>
<html><body><br><br><br><style><br>aside {<br>width: 33%;padding-left: 10px;<br>margin-left: 10px;<br>float: right;font-style: italic;<br>background-color: lightpink;<br>}<br></style><br><br><p>The American business Meta Platforms is the owner of the social networking and social media website Facebook. The name of the social networking site, which was established in 2004 by Mark Zuckerberg</p><aside><br><p>Mark Elliot Zuckerberg, an American business mogul, internet entrepreneur, and philanthropist, was born on May 14, 1984.</p><br></aside><p>He is renowned for co-founding Facebook, a social networking platform, and Meta Platforms, the corporation that owns it (formerly known as Facebook, Inc.), of which he serves as chairman, chief executive officer, and majority shareholder.</p><br><p>While a student at Harvard University, Eduardo Saverin, Andrew McCollum, Dustin Moskovitz, and Chris Hughes were his roommates when they founded Facebook in February 2004.</p><br>
</body></html>
In HTML semantics, figures are self-contained content, such as illustrations, diagrams, photos, code listings, etc.
The <figcaption> tag represents a caption for the <figure> element. Figure captions can be placed as either the first or last child of a figure.
<img> tag demonstrates the existing image/illustration.
<!DOCTYPE html>
<html>
<body><figure>
<img src="https://mrexamples.com/wp-content/uploads/html_images/pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. -- Trulli, Puglia, Italy.</figcaption>
</figure></body>
</html>
Semantic Elements: Why are they important?
Per the MRC’s characterization, A semantic web permits users to share and reuse data across various applications, enterprises, and communities.
A Semantic Approach to HTML Elements
HTML has a number of semantic elements, which are listed below.
| Tag | Overview |
|---|
| <time> | Represents a date/time. |
| <aside> | Content that isn’t part of a page. |
| <article> | Content that is independent and self-contained. |
| <details> | Viewable or hidden additional details. |
| <figure> | Provides self-contained content, such as illustrations, diagrams, photos, code listings, etc. |
| <figcaption> | Specifies a caption for a <figure> element. |
| <mark> | Text that has been marked or highlighted. |
| <footer> | Creates a footer for a document or section. |
| <section> | An outline of a document’s sections. |
| <nav> | Characterizes navigation links. |
| <header> | Adds a header to a document or section. |
| <summary> | The heading for a <details> tag. |
| <main> | Document’s main content. |
Tip: Visit our HTML Tag Reference to see a complete list of HTML tags.
Advantages of HTML Semantic Elements:
- Better Accessibility: Semantic elements provide a better structure to the webpage, making it more accessible to users with disabilities.
- Improved SEO: Semantic elements help search engines understand the content, which can improve search rankings.
- Clearer Code: Semantic elements provide a clear and concise way to structure code, making it easier for other developers to understand and maintain the code.
- Future-proofing: Semantic elements are designed to be forward-compatible, ensuring they stay relevant as web standards evolve.
- Consistency: Using semantic elements ensures a consistent structure, improving the user experience and making maintenance and updates easier.
Do subscribe to our Newsletter below in order to be in touch with the technical information on this site.
