techglobal

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

Sanjay Kumbhar's photo
Sanjay Kumbhar
·

4 min read

Table of contents

What is semantic HTML?

Semantic HTML (also called semantic markup) is HTML code that uses HTML tags to effectively describe the purpose of page elements. Semantic HTML code communicates the meaning of its elements to both computers and humans, which helps web browsers, search engines, assistive technologies, and human developers understand the components of a web page.

The key to well-written semantic HTML is the use of semantic tags. Semantic HTML tags have names that tell the person or machine reading the code what exactly they’re meant to do.

Here’s a basic example: The <p> (paragraph) tag is a semantic HTML tag — all content between its opening <p> tag and closing </p> tag is a block of paragraph of text. Anyone or any device reading this tag will understand its purpose.

Semantic HTML Example

  • <h1> <h2> <h3> etc.: Headings on the page in descending order of importance.
  • <a> : A hyperlink.
  • <button>: A button element.
  • <strong> and <emphasis>: These elements signal that the text inside them is important.
  • <ol> and <ul> : Ordered and unordered lists, respectively
  • <header> and <footer>: Denote the header and footer sections of a web page.

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.

  • : 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. <figure> 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>

ow consider the example of semantic HTML shown below:

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