Skip to content

What exactly is semantic HTML and how would I use it to describe the American flag?

Semantic HTML just means that the markup has meaning. If you were to mark up the american flag using HTML, the most basic way would be to include an image:

<img src="flag.png" alt="American Flag" />

The [alt] attribute describes the content to users with assisted navigation and the image displays whatever image you want.

If you were to build out the flag with <div>s, <span>s and whatnot, then you'd be creating something that assisted navigation would not be able to natively read, and therefor would not be semantic markup, however if you use ARIA roles, you could fix the semantics of the inner non-semantic markup:

<div role="img" class="flag" aria-label="American Flag">
  <div class="stars">
    <span class="star"></span>
    ...x50 `.star`s
  </div>
  <div class="stripe white"></div>
  <div class="stripe red"></div>
  ... x13 `.stripe`s
</div>

Unfortunately, browser support for ARIA standards is relatively minimal, so your best option is to leave it as an <img> element, because it's an image.


This post is in response to a closed question on StackOverflow