Semantic HTML5, Semantic Markup

2 min readDec 17, 2023

Semantic markup is the right way to organize content, to prepare it for humans and robots.

Official Spec: https://html.spec.whatwg.org

Tag <article> by value equals tag <body>. Both hint at the main content.
<div> and <span> — semantically neutral elements, will be ignored by robots.
<section> describes different qualities, delving into the property of the main topic. Nesting means specificity.

<body>
  <h1>
    Name of Entity
  </h1>
  <p>Entity Description</p>
  <section>
    <h2>
      Some characteristic of Entity
    </h2>
    <section>
      <h3>
        The Nested Property of this characteristic
      </h3>
      <p>Description</p>
    </section>
  </section>
</body>

Use <article> for the same semantic structure that can be used several times.

<body>
  <h1>
    Name of Entity
  </h1>
  ...
  <article>
    <h5>
      Item1 Name
    </h5>
  </article>
  <article>
    <h5>
      Item2 Name
    </h5>
  </article>
  ...
  <article>
    <h5>
      ItemN Name
    </h5>
  </article>
</body>

(!) While using <div> on semantic elements such as goods and cards, we risk losing a search traffic, use <article> for these goals.

<h1-6> should be one inside of the block, describes the summary of the <article> and<section>. Numbers 1-6 don’t matter, semantically <h1> equals <h6>.
<i> — phrase tag, hints at allegory.
<b> functions as a tag on Instagram, representing keywords for the entire project, while <strong> emphasizes the main theme in the text.
The google search engine uses <table> to create snippets.
<header>, <footer> groups content and represents meta-information; avoid adding the main information of the page in these sections. They are suitable for licenses, meta-info, etc.
<aside>— indicates that this content is unrelated to the main topic of the page; robots typically ignore it.
<main> represents page content and can be used multiple times but with the hidden attribute; one <main> should equal one page content. It will be deprecated.
<figure> is used for abstract image constructions, including diagrams, photos, and code listings.
If an image is needed in the search results, always use the <img> tag related to the main content; otherwise, use a CSS background (for icons, navigations etc).
<nav> — for the navigation list wrapper.
<ul>— for an unsorted list.
<ol>— for a sorted list in case you need to keep the order (breadcrumbs etc).

Microdata

Microdata is a specification in HTML that allows web developers to embed machine-readable data within HTML documents. Microdata allows developers to annotate HTML elements with specific attributes that convey additional information about the content.

The primary Microdata attributes include itemscope, itemtype, and itemprop.

itemscope: Indicates the start of an item (a set of properties) in the markup.
itemtype: Specifies the type of the item, often using URLs that reference predefined vocabularies or custom schemas.
itemprop: Defines the individual properties (attributes) of the item.

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">John Doe</span>
  <span itemprop="jobTitle">Web Developer</span>
</div>

Elements Spec: https://html.spec.whatwg.org/multipage/semantics.html#semantics

Kinds of Content: https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content

Semantic HTML5, Semantic Markup

Microdata

Written by TheTechnoCult

No responses yet