Semantic elements = elements with a meaning.
What are Semantic Elements?
Semantic elements clearly describe its meaning to developer and browser.
Non-semantic elements like <div> and <span> tells nothing about it.
Semantic elements like <section>, <form>, <main> Clearly defines its content.
Semantic Elements in HTML
Many website (specially old one) contains html code like, <div class=”nav”>, <div class=”main”>, <div class=”header”> to indicate navigation, main content, and header respectively.
But in HTML we have some semantic element to describe different from other tags.
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
Why Semantic Elements?
According to the W3C: “A semantic Web allows data to be shared and reused across applications, enterprises, and communities.”
HTML <section> Element
<section> tag used to define various section in the web page.
According to W3C’s HTML documentation: “A section is a thematic grouping of content, typically with a heading.”
A web page could normally be divided into various different sections for introduction, content, and contact information.
See the Pen section in html by Arpit (@soniarpit) on CodePen.
HTML <article> Element
<article> tag describe independent, self-contained content.
As a name suggests it is mostly used in describe article in blogs. It should be possible to distribute it independently from the rest of the web site.
Examples of where an <article> tag can be used
- Forum post
- Blog post
- Newspaper article
See the Pen article tag by Arpit (@soniarpit) on CodePen.
Nesting <article> in <section> or Vice Versa?
The <article> tag specifies independent, self-contained content.
The <section> tag defines section in a document.
Can we use the definitions to decide how to nest those elements? No, we cannot!
So, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.
HTML <header> Element
<header> tag may contains set of navigation links or container for introductory content.
A <header> element typically contains,
- one or more heading elements (<h1> – <h6>)
- logo or icon
- authorship information
Note: You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.
See the Pen header tag by Arpit (@soniarpit) on CodePen.
HTML <footer> Element
<footer> tag used to specify footer in the web page.
Footer may contains,
- authorship information
- copyright information
- contact information
- sitemap
- back to top links
- related documents
You can have several <footer> elements in one document.
See the Pen footer tag by Arpit (@soniarpit) on CodePen.
HTML <nav> Element
<nav> tag used to defines set of navigation link.
See the Pen nav tag by Arpit (@soniarpit) on CodePen.
Note: NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
HTML <aside> Element
<aside> tag describe the side content. Content may placed in left or right side. The <aside> content should be indirectly related to the surrounding content.
Try following example in your system
<!DOCTYPE html>
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
</body>
</html>
HTML <figure> and <figcaption> Tags
The <figure> tag specifies self-contained content, photos, diagrams, like illustrations, code listings, etc.
The <figcaption> tag used to defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.
The <img> element defines the actual image/illustration.
See the Pen qBqmWyJ by Arpit (@soniarpit) on CodePen.
I hope you enjoyed. Happy coding 🙂
Previous: #18 HTML – The Head Element
Next: #20 HTML Entities
