This content originally appeared on Level Up Coding - Medium and was authored by Dylan Oh
HTML tags tell the browser how to structure, and display the content for the web pages. Semantic HTML is a feature in which we can write HTML code in a more descriptive way. It makes people understand the role of this line or chunk of codes, instead of how they should structure or look like. Before semantic HTML, we often see a bunch of div tags, p tags, and span tags, which tell nothing about their content and we normally use an “id” to tell what they are for (or commenting). However, we can do this in a more self-explanatory way without putting id, or classes to describe what their roles are.
Here are codes before semantic HTML:
<div id="header">
<div id="nav-bar">
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
</div>
</div>
<div id="main">
This is the section where main content goes.
<div class="content">
<div>This is for section 1 content.</div>
</div>
<div class="content">
<div>This is for section 2 content.</div>
</div>
<div class="content">
<div>This is for section 3 content.</div>
</div>
</div>
<div id="footer">
<div>This is for footer.</div>
</div>
This is with the utilization of semantic HTML.
<header>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
</nav>
</header>
<main>
This is the section where main content goes.
<section>
<h2>Section 1</h2>
<div>This is for section 1 content.</div>
</section>
<section>
<h2>Section 2</h2>
<div>This is for section 2 content.</div>
<article>
<figure>
<img src="/whatever.png" />
<figcaption>
This is the image caption.
</figcaption>
</figure>
<p>Article content goes here.</p>
</article>
</section>
<section>
<h2>Section 3</h2>
<div>This is for section 3 content.</div>
</section>
</main>
<footer>
<div>This is for footer.</div>
</footer>
These are some examples of semantic HTML tags which were introduced in HTML5 that you can use in your codes:
<header>
- Containing introductory items for the webpage and navigation menu. It is similar but different from <h1>, as <header> is used to represent the section, and <h1> is used to put the title for that section.
<footer>
- Containing the footer information for example copyrights, privacy policy, contacts, etc.
<nav>
- Containing navigation links
<main>
- Represents the main content area, this should only be used once in the page. ( A document must not have more than one main element that does not have the hidden attribute specified.)
<section>
- Represents a standalone generic section, each section should ideally have a header for that section itself.
<figure> & <figcaption>
- This self-contained element can be used to group images with its caption
And there are around 100 of them…
Here are some of the benefits of using semantic HTML:
1) Readability
<header>, <footer>, <nav>… they act mostly like a <div>, however, this will give a clearer understanding of what are the contents inside these blocks. The second block is easier to read and understand than the two code blocks above. As a developer, we often need to look at other people’s codes. Therefore, semantic HTML would definitely improve the reading experience of your codes.
2) Improve SEO
These keywords will improve the search ranking of your content because it provides richer information instead of <div> which tells nothing to the search engines.
3) Accessibility
Semantic HTML will improve the accessibility of your web page, which gives more precise context to audiences who access these pages through a screen reader or rely on keyboard-only navigation (using the tab key to jump from section to section). For example, you might want to use <button> instead of just solely the <a> tag for a button. For additional information, you may also assign the “role” attribute to <a> with the value of the button. This will also be recognized by a screen reader.
I hope this gives you an insight into what semantic HTML is and how this could improve our code quality. Cheers.
What Is Semantic HTML and Why Should We Care? was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Dylan Oh
Dylan Oh | Sciencx (2022-07-13T01:42:09+00:00) What Is Semantic HTML and Why Should We Care?. Retrieved from https://www.scien.cx/2022/07/13/what-is-semantic-html-and-why-should-we-care-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.