Semantic Content

Search engines and other crawlers

A crawler service that visits your website on behalf of a search engine like Google or social network like Instagram expects semantic content.

Semantic HTML elements allow meaning and structure to be determined.

The better these crawlers can understand, and the more meaning they can infer, the higher they will rank you.

A web page that is just made of <div> and <span> elements means that the only content they have to use is the text. Which is a subjective and messy process. Better to provide precise, meaningful elements instead.

Headings

<h1>One Thousand and One Nights</h1>

screen.getByRole('heading');

Links

<p><a href="https://en.wikipedia.org/wiki/One_Thousand_and_One_Nights">One Thousand and One Nights</a> is a collection of Middle Eastern folk tales compiled in Arabic during the <a href="https://en.wikipedia.org/wiki/Islamic_Golden_Age">Islamic Golden Age</a>.

screen.getByRole('link', { name: 'One Thousand and One Nights' });

screen.getByRole('link', { name: /islamic golden age/i });

Lists

<ul>
  <li>First
  <li>Second
  <li>Third
</ul>

screen.getByRole('list');

Terms & Definitions

<dl>
  <dt id=movie-1-name>Name</dt>
  <dd aria-labelledby=movie-1-name>The Lion King</dd>
  
  <dt id=movie-1-year>Year Released</dt>
  <dd aria-labelledby=movie-1-year>1994</dd>
  
  <dt id=movie-1-runtime>Runtime</dt>
  <dd aria-labelledby=movie-1-runtime>88 min</dd>
</dl>

screen.getByRole('definition', { name: 'Name' });

screen.getByRole('definition', { name: 'Year Released' });

screen.getByRole('definition', { name: 'Runtime' });

Images

<img
  alt="The HTML 5 logo"
  src="https://unpkg.com/super-tiny-icons@0.4.0/images/svg/html5.svg"
  width=200
>

screen.getByRole('img', { name: /logo/ });

Figures

<figure>
  <img
    src="https://unpkg.com/super-tiny-icons@0.4.0/images/svg/html5.svg"
    width=200
  >
  <figcaption>The HTML 5 logo</figcaption>
</figure>

screen.getByRole('figure');

Details & Summary

<details>
  <summary>Expand me…</summary>
  <p>To see more content</p>
</details>

screen.getByRole('group');

Separator

Before
<hr>
After

screen.getByRole('separator');

Content roles cheatsheet
Role name	HTML element
link	`<a href=…>`
none	`<a>`
heading	`<h1>`, `<h2>`, `<h3>`, etc
list	`<ul>`, `<ol>`
listitem	`<li>`
term	`<dt>`
definition	`<dd>`
img	`<img alt="Some description">`
none	`<img alt="">`
figure	`<figure>`
separator	`<hr>`, `<li role=separator>`
none	`<p>`
none	`<div>`
none	`<span>`
group	`<details>`
button	`<summary>`