What is Semantic HTML Elements
So before writing semantical HTML elements, you should know what actually semantic HTML element means. Semantics in HTML just means giving content of the web page proper meaning, outline and structure and by using appropriate semantic HTML elements. So in short semantic HTML element indicates what kind of content it contains and it could be as followings
- address - which semantically indicates that content it contains is contact information of the organization, person, author and so on so forth.
- quote or blockquote - both contains content that is copied from book or speech or song or poem and so on
- cite - which contains text that is the title of quoted speech or book and it is used inside blockquote HTML element And tons more semantical HTML elements which you can learn in mdn element reference
Why should you care about writing Semantic HTML Elements
So there's two reasons to strive to write semantic HTML elements
- Search engines - So if you website is built with as semantical as possible, it'll be easier for search engines to read and understand contents of your website, so as a result your website'll be among first one show up on search results.
- Screen reader - is basically software that many disabled people such as visually impaired people use which reads content of the web page for them. Screen readers understand well semantic elements, so semantic elements make website accessible to everyone.
Text Based Semantic HTML Elements
Text based semantic HTML elements are elements that gives meaning to the text they contain. And they are as followings
Heading h1 to h6
Heading h1 to h6 basically creates different level of section headings and <h1> is the highest level heading and <h6> is the lowest level section heading.
So <h1> the highest level heading and it's best practise to use single <h1> for each web page although as of HTML5, you are allowed to use more then one for each web page.
<h1></h1> can be compared to title of the book, <h2></h2> is the title of the chapters and <h3></h3> is the title of the each section.
<h1>The Power of Now</h1>
<h2>You Are Not Your Mind</h2>
<h3>The Greatest Obstacle to Enlightenment</h3>
Mark
So <mark> can be considered as highlighted text, so information it contains basically is important for user of the current page mark is used
<mark>Semantic Element basically indicates type of content it
contains
</mark>
Strong
<strong> semantically indicates that text it contains is super super important. Text inside strong is rendered as bold.
<strong>Restricted Content</strong>
Em
<em> semantical HTML5 element that contains text that is emphasized. And text inside <em> is written italized.
<p>
Do it <em> now </em> or you are <em>fired</em>
</p>
Output
<output> output element semantically indicates that its content is result of calculation like coordinates of mouse position, sum of series of numbers
<p>
4 + 4 is: <output>8</output>
</p>
Small
<small> small element semantically indicates that what it contains is side-comments, copyright text and all in small print
<small>
© 2005-2021 Mozilla and individual contributors
</small>
Time
<time> time element semantically indicates that what it contains is time and date and it uses datetime attribute which contains real time format while time can contain normal time format
<time datetime="15-09-2019">15th Sept 2019 </time>
Code
<code> element semantically indicates that it contains computer code. And it's mostly used as child of element is used to indicate preformatted text and it's used to wrap around code element.
<pre>
<code>let i = 11;</code>
</pre>
Address
<address> element contains text that semantically indicates that text is contact information of the organization, person, author and so on.
<address>
<a href="mailto:someexample@gmail.com">someexample@gmail.com</a><br>
</address>
Structural Semantic HTML Elements
They give semantic structure to the web page and can be used multiple times as long as used correctly. And they as followings
Main
<main> element semantically indicates that it contains main part of the document and it should only be used once throughout the web page.
What kind of content it should not contain
Content inside main must be unique which means that they should not be repeated in document such as sidebars, copyright info, navigational links, site logos and search forms
What elements can't contain main element
- aside
- footer
- header
- article
- nav
<main>
<header>
<h1>I'm Johongir</h1>
<p>Aspiring programmer</p>
</header>
<section>
<h2>About Me</h2>
</section>
<footer>
<h2>Projects</h2>
</footer>
</main>
Header
<header> elements semantically means that it's top part of the web page, article, sections, and other fragment of the web page. Inside header element can include followings introductory text, heading h1 to h6 and even navigation
<header>
<h1>Hey I'm Johongir</h1>
<p>Aspiring programmer</p>
</header>
Nav
<nav> is used to indicate that it contains major navigational links of the web page. It should only be used with major navigational sections such as global navigations, a table of contents, next/previous links and other major navigational links
<header class="header">
<nav class="nav flex flex--space-between">
<ul class="nav__list-left flex flex--align-items-center">
<li class="nav__list-left-item pr-4">
<div class="nav__list-left-hamburger">
<div class="nav__list-left-bars"></div>
<div class="nav__list-left-bars"></div>
<div class="nav__list-left-bars"></div>
</div>
</li>
<li class="nav__list-left-item">
<a href="#" class="nav__list-left-link flex flex--align-items-center">
<span class="nav__list-left-link-logo pr-1">
<i class="fa fa-youtube-play fa-2x" ></i>
</span>
<span class="nav__list-left-link-text">
Youtube
</span>
</a>
</li>
</ul>
</nav>
</header>
Article
<article> element is used to indicate independent and context free section of the page that can be independently distributed and reused and still makes sense when used in different context.
Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
<article>
<h1>Wariors</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto beatae quae quo tempore enim ullam temporibus quasi, quos totam magni officiis. Adipisci aliquam unde totam nesciunt repellat nobis, temporibus nam!
<p>
<article>
<h2>Amer Temur was the greatest warrior of all time</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto beatae quae quo tempore enim ullam temporibus quasi, quos totam magni officiis. Adipisci aliquam unde totam nesciunt repellat nobis, temporibus nam!
<p>
</article>
<article>
Section
<section> semantically indicates that it contains thematically related group of content and generally includes heading. Section element is useful to break up and provide a hierarchy for the web page. Section can be about, contact, projects, portfolio etc...
<section>
<h2>About me</h2>
</section>
<section>
<h2>Projects</h2>
</section>
Aside
<aside> element contains content like sidebars, inserts or brief explanations and content in it is indirectly related to its surrounding content
<article>
<h2>Amer Temur was the greatest warrior of all time</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto beatae quae quo tempore enim ullam temporibus quasi, quos totam magni officiis. Adipisci aliquam unde totam nesciunt repellat nobis, temporibus nam!
<p>
<aside>
Timur was born in Transoxiana near the city of Kesh (modern Shahrisabz, Uzbekistan), some 80 kilometres (50 mi) south of Samarkand, part of what was then the Chagatai Khanate
</aside>
</article>
Footer
<footer> element semantically indicates that content it contains is the end of the page, section, article or other fragment of the web page. And it's at the bottom of its parent element. And it should only contains content that's related to its parent element not different
<article>
<h2>Amer Temur was the greatest warrior of all time</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto beatae quae quo tempore enim ullam temporibus quasi, quos totam magni officiis. Adipisci aliquam unde totam nesciunt repellat nobis, temporibus nam!
<p>
<aside>
Timur was born in Transoxiana near the city of Kesh (modern Shahrisabz, Uzbekistan), some 80 kilometres (50 mi) south of Samarkand, part of what was then the Chagatai Khanate
</aside>
<footer>
You can read more about him at <a href="https://en.wikipedia.org/wiki/Timur">here</a>
</footer>
</article>
Summary
So you've learned
- Semantic HTML elements gives meaningful structure to the content on the web page
- Writing semantical HTML elements is super important for
- Making website accessible to all people regardless of the abilities
- For being among the first ones on googl search results
- Semanitc element indicates what kind of content it contains
- Text based semantic elements give meaning to the text they contain
- Structural semantic elements give meaningful structure to the content of the web page.
References:
HTML elements reference at mdn
HTML semantic elements at educba
Top comments (0)