Semantic Markup

Semantic markup is a way of writing and structuring your HTML so it reinforces the meaning of the content rather than its appearance.

Semantic HTML for meaningful websites.

Semantic Markup

* * *

  • Semantics is the study of Meaning
  • It is HTML code structured for meaning
  • Using HTML elements according to their intended purpose
  • HTML elements are not used for visual presentation
  • header, footer, nav, section, article, aside, blockquote are some of the most common semantic tags

Why is it important?

  • Search Engines do not see the webpage styles, they go by the content
  • Establishes a clear hierarchy
  • It is easier to understand for people who use assistive technologies like screen readers. (Accessibility)

The History of HTML

The History of HTML


Writing semantic markup means understanding the hierarchy of your content and how both users and machines will read it.

Web Accessibility

Accessibility is the practice of making your websites usable by as many people as possible.

We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.

https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility

Silktide, Web accessibility simulator.

Basic HTML accessibility.

  • Always provide an "alt" text in images. This will help people with screen readers to identify the content of the image.
    image of 3 fruits
  • When including Videos with autoplay, make sure you allow users to stop it if they are more than 5 seconds long. Videos should be muted by default, allowing users to enable audio.
  • Websites should be viewed in mobile devices in portrait and landscape modes.
  • Web pages should only scroll horizontally or verticaly. Not both.
  • Use Headings appropriately. There should be only 1 < h1 > tag per page.
  • HTML content should follow a logical reading order, regardles of the layout on the page.
  • Make sure the text is legible by allowing enough space, between letters and lines.
  • There should be enough contrast between text color and background.
  • Use descriptive text for Links. Cliick Here is not good enough. Read more needs more context. Read more about our latest product.

Guide to Web accessibility by SilkTide

Why Alt text Matters

When you fail to provide an alt attribute, screen readers will still announce there is an image, and will read out the file name.

Alt text has two main purposes:

  • Accessibility: alt text provides a text description so that people who cannot see the image can still understand what its about.
  • Fail state: if the image fails to load for whatever reason, the text alternative will be displayed on the page, so the context of it is not lost.

When writing alt text, you have to strike a balance between too descriptive and too generic.

A close up headshot of a ginger cat wearing mirrored sunglasses. It's in a car, and its sunglasses reflect the dark orange clouds of a sunset.

A cat.

A close up headshot of a ginger cat wearing mirrored sunglasses. It's in a car, and its sunglasses reflect the dark orange clouds of a sunset.

An artistic portrait shot of a cat. Set against a subdued background which depicts a soft bokeh effect with an interplay of light and shadow. The cat has meticulously detailed medium length fur, which displays varying shades of earthy browns and oranges against a white face mask and pink nose, reminiscent of the classic tabby pattern. What captures immediate attention are the round, reflective sunglasses it adorns. These mirrored glasses encapsulate a scene with a setting sun and thick dark orange clouds. The cat's whiskers appear prominent, adding symmetry of the image. It's sitting in a car, which offers a sense of sophistication by fusing the natural world with elements of human luxury.

Inline HTML Tags

Tags that are used inside other tags to change the apperance or meaning. They can be used by themselves or inisde other elements.

For more information, check Can I include?

  • Bold or Strong?

    Use <b> when you want to give <b>visual</b> contrast


    Use <strong> when you want to give <strong>importance</strong> to part of the paragraph

  • Italic or Emphasis?

    Use <i> when you want to give <i>visual</i> emphasis to express an alternate voice or mood.


    Use <em> when you want to give <em>emphasis</em> to a word

  • Span

    It is used to change the visual attributes of a group of words inside a paragraph

    <p>This is a text <span>that will change color</span> in the same line</p>

    This is a text that will change colorin the same line

  • Mark

    When you need to highlight or mark specific portions of text.

    This store will be closed for 15 minutes after 6pm.

  • Abbreviation

    Is used for abbreviations or acronyms. It can be used to provide a tooltip or additional information about the abbreviation by adding the title tag.


    The <abbr title="World Wide Web"> WWW</abbr>

    the WWW is everywhere.

  • Inline quote

    Used to indicate quotations inside a paragraph.

    <p>Small quote inside a paragraph. He said:<q>It's cold in here</q></p>


    Small quote inside a paragraph. He said: It's cold in here

Boxes with a purpose

Every element in HTML creates an "invisible" box. It is important to use each one for its intended purpose.

display of cardboard boxes

Make sure you use the right box for your content.

Tidying Up the Web

When you only add HTML tags with no semantic tags

A messy drawer

When you organize and group your HTML content

An organized drawer

Grouping HTML Tags

Tags that are used to create a grup of a specific type of content.

  • Quotations - blockquote

    Used to indicate quotations.

    <blockquote>
    <p>Quam diu etiam furor iste tuus nos eludet?</p>
    <img src="../static/images/beach-sm.jpg" alt="empty chair on a beach" width="500" /> </blockquote>


    empty chair on a beach

    Quam diu etiam furor iste tuus nos eludet?

  • Figure and Figcaption

    Use it to group images and captions on one container.

    <figure>

    <img src="images/myImage.png" alt="add description here" width="50" height="50"/>

    <figcaption>This is the caption<figcaption>

    </figure>


    empty chair on a beach
    This is the caption

  • Address

    Use <adress> when you want to give contact information
    <address>
    Your Name
    Your Address
    Phone Number
    Email
    </address>


Structural HTML Tags

We use them to structure the content of webpages.

The DIV Tag

  • <div></div>
  • This is called the Division Tag.
  • Is the most used tag in web development.
  • It is a generic container tag used to separate and structure content.
  • Groups various HTML tags so they can be styled as a group.
  • They are used with ids and classes for styling and positioning.
  • Divs do not give semantic meaning to the content inside.
div structure

The Main tag

  • The "main" HTML element represents the dominant content of the "body" of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

  • main tag illustration

Semantic structural tags

These tags give semantic meaning to the content inside.

  • Header

    <header> </header>

    • Not to be confused with the <head> tag

    • Marks the introductory content of a website or a section.

    • Mostly used for the website top area or masthead.

    • It can also mark the header of an article or section.

  • Nav

    <nav> </nav>

    • Contains the main navigation (menu) sections of your website.

    • Can be located anywhere in the page, but usually inside the header.

    • Not every group of links belong inside the nav element.

  • Footer

    <footer> </footer>

    • Similar to headers, but at the end of a document.

    • Mostly used for the website bottom area.

    • Footer should contain information about the article author, copyright information and links to related content.

    • It can also mark the footer of an article or section.

  • Aside

    <aside> </aside>

    • Use it for extra information related to the content but not part of it.

    • Mostly used for Sidebars, but sidebar does not refers to position.

    • Ads related to the content can be placed here

    If the content can be removed without affecting the meaning, it can be an aside.

    The aside element

  • Article

    <article> </article>

    • • Represents a complete, or self-contained content on a page that can be reused and distributed independently.
    • • Think of a magazine article
    • • Common examples of articles are: Blog posts, News stories, Comments, Reviews.

  • Section

    <section> </section>

    • It's a more general-purpose container like the div, but used to group related content.

    • Can group articles (e.g. sports section, arts section).

    • Can define parts of an article.

    • Think of chapters on a book.

semantic div structure
div structure

A note on closing tags

  • HTML elements usually consist of a start and end tag, with the content in between.
  • <p> content goes here </p>
  • Note the / before the tag name, on the closing tag </p>
  • There are some tags that do not need closing, because they hold no content in between.
  • They are empty elements that either add external elements or break the flow of the page
  • <img>, <br>, <hr>, <link>, <meta>, <input> are the most common.