Semantic HTML: What It Is and How It Improves Your Site

Introduction 📝

Semantic HTML, or "meaningful HTML," is a way of structuring HTML code to convey its meaning to both human readers and search engine algorithms. By using semantic tags and attributes, you can improve the accessibility, usability, and SEO of your website. In this article, we'll take a closer look at what semantic HTML is, how it works, and why it's important for your website.

What is Semantic HTML?

Semantic HTML refers to the use of specific HTML tags and attributes to convey the meaning of the content on a webpage. Unlike presentational HTML, which focuses on the visual appearance of a webpage, semantic HTML focuses on the underlying structure and meaning of the content.

For example, instead of using a <div> element to create a container for some text, you might use a <section> or <article> element, depending on the purpose of the content. By using these semantic tags, you provide more information about the content to search engines and assistive technology, which can help improve your website's ranking and accessibility.

Semantic HTML Tags

Since semantic HTML revolves around the proper use of tags, let’s review some common semantic tags you can implement on your site. We’ve broken these tags down into those used on text, those used to communicate page layout, and other handy semantic tags.

<p>(paragraph) A paragraph of text presented as a block.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> A page <h1> is the top-level heading, and there should only be one per page. The proceeding tags are ordered by descending importance. Browsers will apply font weight and size styling accordingly.
<ol> (ordered list): A list of items that must display in a particular order. Browsers typically apply numbers to each item.
<ul> (unordered list): A list of items in which order is not important. Browsers typically apply bullets or dashes to each item.
<a> (anchor): A hyperlink. By default, browsers will change the link color to blue and add an underline which you can remove.
<q> (quote) and <blockquote>: A quotation. Use <q> for shorter quotes and <blockquote> for longer quotes.
<code>: Computer code. Browsers typically apply styling to differentiate this text from the surrounding text.
<em> (emphasis): Emphasizes text. Most browsers italicize text inside this tag by default.
<strong>: Draws attention to important text. Most browsers bold the text inside this tag by default.
<header>:The header of the page. Headers often contain the organization’s name and logo, primary navigation, a search bar, a sign-in prompt, and/or a shopping cart icon.
<footer>: The footer of the page. Footers often contain additional information like an address, a contact form, and/or legal information.
<main>:Contains the main content of a page. This is the content that is unique to the specific page, and where visitors will probably spend most of their time.
<nav>: The site navigation. This tag usually contains a list of links to different parts of the website.
<aside>: Contains related content that doesn’t belong with the main content but is still related to it — this might be a related posts list or a sidebar containing display ads.
<article>: A standalone piece of content, like a blog post or a news article.
<section>: A section of a longer text piece. For example, you could assign a different to different h2s of a blog post.
<img>: An image.
<table>: A table with columns and rows of data.
<figure> and <figcaption>: Used for images that require a description. contains the image itself, and contains the caption associated with the image.
<iframe>:An embedded element.

Semantic HTML Page Layout

Let's first consider a basic HTML page template, written in non-semantic HTML:

    <head>
        <title>Example</title>
    </head>
    <body>
        <div id="header">
            Here goes logo, navigation, etc.
        </div>
        <div id="main-content">
            A place for website's main content
        </div>
        <div id="footer">
            Footer information, links, etc.
        </div>
    </body>
</html>

How consider the example of semantic HTML shown below

    <head>
        <title>Example</title>
    </head>
    <body>
        <header>
            Here goes the logo, navigation, etc.
        </header>
        <main>
            A place for the website's main content
        </main>
        <footer>
            Footer information, links, etc.
        </footer>
    </body>
</html>

Why is Semantic HTML Important?

Semantic HTML is important for a number of reasons, including:

Accessibility: Semantic HTML can help make your site more accessible to people with disabilities, including those who use screen readers and other assistive technologies.
SEO: By using semantic tags and structured data, you can help search engines understand the content of your site and improve your rankings in search results.
Consistency: Semantic HTML can help ensure that your site has a consistent and meaningful structure, which can improve usability and user experience.
Maintenance: By using semantic HTML, you can make it easier to maintain and update your site over time, since the code will be more organized and easier to understand.

Conclusion:

Semantic HTML is a powerful tool for improving the accessibility, usability, and SEO of your website. By using semantic tags and attributes, you can provide more meaningful information about your content, which can help search engines and assistive technology understand the structure and meaning of your site. So if you're looking to improve the performance and user experience of your website, consider using semantic HTML to structure your content in a meaningful and consistent way.

Support 🤗

YouTube
Website

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

Blog