DEFINE
Semantic HTML

Navigable, Accessible, Informative

So, Semantic HTML...

  • Why?
  • What?
  • Why?
  • Since when?
  • Why now?
  • How?

Why

The PSP’s web browser is – charitably – pathetic. It is slow, frequently runs out of memory, and can only open 3 tabs at a time.

But the GOV.UK pages are written in simple HTML. They are designed to be lightweight and will work even on rubbish browsers. They have to. This is for everyone. -- Terence Eden

The <strong>argument</strong>

You can solve many problems
with the right html elements,

without too much ARIA

  • accessibility
  • navigation
  • SEO
  • meta data (ex.: schema)

What?

Semantic HTML is...

Meaning

What?

Ok, but what does "meaning"... mean?

What?

Semantic HTML is...

 

  • Navigating with your eyes closed
  • Knowing everyone's role
  • Beauty on the inside 
  • Judging a book by its content
  • Passing the right message 

Semantic HTML is

UBIQUITOUS

https://www.youtube.com/watch?v=L83LVfhTbzg

What?

Semantic HTML is...

NOT Presentation

<center>Centered</center>

<blink>Blinking</blink>

<marquee>Sliding</marquee>

<font>Custom Font</font>

source: webFX

(obsolete) <tag> of the day

source: searchengineland

 

"No, really,don't use it!" - W3C

The elements of the first web page:

  • <a> - link
  • <h1> - label/title
  • dl, dt, dd - define terms

What?

Semantic HTML is...

REALLY old!

there was different information on different computers, but you had to log on to different computers to get at it (...) sometimes you had to learn a different program on each computer. Often it was just easier to go and ask people when they were having coffee…

Tim Berners-Lee, World Wide Web Foundation

Why semantics
NOW? 

 

 

  • Navigation and information access
    • Easy to find, standard and predictable behaviours...
  • Search results and Machine-readability
    • SEO, Rich Snippets...
  • Accessibility
  • Internationalization

Why semantic HTML? 

 

"The benefit (...) stems from what should be the driving goal of any web page: the desire to communicate"

-- Lifewire

Summary

 

 

  • Special roles
  • Alerts and Notes
  • Menus
  • Form content
  • Phrasing
  • Internationalization and metadata
  • Special attributes

Improve web page navigation and usability
with just HTML and (very few) attributes)

 

Revisit OLD tags
Meet NEW tags

Landmarks

  • header
  • main
  • contentinfo
  • navigation
  • aside
  • form
  • search

Unique (identifiable) parts of a page

Headings = structure

Try using a web page without the mouse and find out! 

Headings are...

  • titles (for chapters)
  • navigation "checkpoints"
  • hierarchic (don't jump levels)
  • important for screen reader users

Heading (h4)

Heading (h5)

Headings are NOT...

  • subtitles (use <p>, or spans in headings, or whatever...)
  • labels (ex.: "warning, note)
  • highlights or promotional content
  • defined by styling

NOT a Heading

block has role="note" 

Heading vs not heading

A tale of two titles

 

from: Semantics - MDN Web Docs Glossary (adapted)

<h1 id="title">
  Top level heading
</h1>
<span
  id="title"    
  style="font-size: 32px; margin: 21px 0;"
>
  Top level heading?
</span>

They look the same, but are they both...

  • Navigable (ex.: with screen readers)?
  • "Seen" as a title by screen readers and crawlers?
  • Human/coder-readable?

Is it a heading? 

Personal tip

If the page had a table of contents, would that element be in it?

Article vs Section

Would it make sense to separate this block from its context? Would it be 'indexed'?

  • a comment isn't part of an article page (it's related, but not part of it)
  • however, the page's comment section is, and it would make sense to have it 'indexed'

"A section forms part of something else. An article is its own thing."-- W3C

"Articles are not meant to be considered landmark elements" -- Scott O'Hara

Article vs Section

Is it a part of a page with its own title?

 

No? Div

Dunno? Div

Yes? Section (maybe?)

Div

Article vs Section

  • <main> content?
  • complementary content either related to the main content or to the contents of an article or section? <aside>
  • banner with introductory content? <header>
  • navigation? <nav> (probably with a list inside!)
  • complementary info? <footer>
  • "just" a region? - maybe <section>

Everything

Default landmark roles 

do not set any of these roles: they're the defaults

Element Role
header banner
footer contentinfo
aside complementary
main main
article article
nav navigation
section region (generic)
h1-h6 heading

(step) <Aside>

  • complementary info
  • can be separated from the content it's related to
  • shouldn't be used in another landmark
  • not a sidebar
  • (probably) not search bar, etc.
  • very open to discussion, but...
    • is it something that could be discarder in smaller viewports? (like 'Fun Facts')

 

 

Aside = Gabriel Alves (a nice complement to the main narration, but not actually part of it)

(banner) <header>

 

  • has a banner role if not part of an article or section
  • when it's a banner, it should be the only one
  • should be present in all (or most) pages
  • common site-generic content (logo, main navigation)
  • not a hero image (or one of those "banners" with a promotional message and image)
  • not for page-specific content

 

banner
(or header)

NOT
a banner!

Bootstrap website (2020-09-26)

Links, anchors and buttons

Anchors & Buttons

The button element represents a button. If the element is not disabled, then the user agent should allow the user to activate the button.

- W3C Button Page (in Association of controls and forms)

An anchor is a piece of text which marks the beginning and/or the end of a hypertext link.

- W3C Anchors Markup Page (in Association of controls and forms)

(typical) Link vs Button
also, button vs button...

  • link is 'navigation' (to another page, or somewhere else on the page)
  • can be opened in a new tab
  • is enabled with 'Enter'
  • key attributes:
    • href
    • target
  • Toggles an action
  • has a type (default 'submit')

Impact of anchors on SEO

Links impact SEO crawlers, who consider REAL links to other pages (improving SEO)

Technical SEO for Javascript Developers
by Martin Splitt

Curiosities
on links

(in "modern" browsers)

Links can have a 'download' attribute to "download" a file instead of opening it

 

... but should you?

sources: https://gomakethings.com/how-to-force-a-file-to-download-instead-of-open-in-the-browser-using-only-html/

<a 
  href="somekind/of/document.pdf" 
  download
>
  Some kind of document
</a>

Anchors - curiosities

Links can be used to provide data about previous and next page via roles (rel)

<HEAD>
...other head information...
<TITLE>Chapter 5</TITLE>
<LINK rel="prev" href="chapter4.html">
<LINK rel="next" href="chapter6.html">
</HEAD>

source: W3C Links

Link tips - referring to next and previous pages

Roles

<div>s with a purpose

Localization

Language, dates

<date>

<abbr>

As defined by the <abbr title="World Health Organization">WHO</abbr>, ...
<abbr title="telephone">Tel.</abbr>

Acronyms and abbreviations

<abbr> (MDN page) 

<address>

  • commonly used with <article>  and <body>
  • contact information, not just physical address
    • phones, emails,URLs, social media...
  • can be used in footers, which are themselves  used for copyright and contact information

source: MDN

<article>
  <!-- ... -->
  <footer>
  	Wanna contact the author?
    
    <address>
      <ul>
        <li>Address: 42nd Street, New York, USA</li>
        <li>
          <a href="mailto:totallynotfakeemail@totallynotfake.fake">
            totallynotfakeemail@totallynotfake.fake
          </a>
        </li>
        <li>
          <a href="tel:+9999999999999">
            9999999999999 (THOUSAAA-AAAAND)
          </a>
        </li>
      </ul>
    </address>
  </footer>
</article>

'lang'

In what language is this content in?

<html lang='pt'>
    <!-- ... -->
    <p>
        Temos o Goku
    </p>
    <p lang='es'>
     Tenemos a Goku
    </p>
    <!-- ... -->
</html>

Portuguese by default

Spanish (this quote)

'lang'

A Spanish, a French and a German walk into an English bar...

<q> are 'localized' automatically

english quotes

!= german quotes
!= french quotes

Forms and controls

Forms details

  • Forms are landmarks. Multiple forms should have some kind of unique title (heading, aria-labelledby, aria-label)

<input type="number">
(but should you?)
 

source: technology.gov.uk 

<input 
  type="text" 
  inputmode="numeric" 
  pattern="[0-9]*"
>

enables numeric virtual keyboard

Issues with

  • accessibility
  • unintended errors
  • probably not what you need (ex.: money, credit cards)

Meta content

localization, SEO, sharing

<Title>



  • identifies the page
    • should be unique and identifiable
      • from other pages of the website
    • where am i? What site is this?
    • in which part of the site am I?
    • ex.: "Newsletter Subscription" - for what? In which step of the form am I?
    • ex.: "Amazon" - but where, in which page?
  • for browser tabs
  • for search results
  • should

'hreflang'

Is there a version for this page in my language?

  • points to versions of the same page matching specific languages or countries
  • finds best match based on IP address
  • x-default can be used to set a 'default' to point to when no better option is set 
<head>
  <!-- English-speaking alternatives -->
  <link rel="alternate" href="http://example.com/en" hreflang="en" /> 
  <!-- US-specific alternative -->
  <link rel="alternate" href="http://example.com/en" hreflang="en-us" />
  <!-- when no better option is available -->
  <link rel="alternate" href="http://example.com/pt" hreflang="x-default" />
</head>

Sources: Moz

Multimedia & visual

images, icons, video, code... <figure> it out!

  • figure
  • video
  • audio
  • code

<figure>

title, alt, label & aria

alt - textual representation of media
(image, video)

<!-- with this focused, a screen reader will read the url -->
<img src="http://placekitten.com/300/200">

<!-- this picture has a description -->
<img alt="A kitten" src="http://placekitten.com/300/200">

<!-- has no focus, ideal for icons in labels or background images -->
<img alt="" src="http://placekitten.com/300/200">

title, alt, label & aria

aria-label, aria-labelledby

"The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead." - MDN

Decorative elements - counter-example

<span class="nav-toggle"> ☰ Menu </span>

source: HTMLHell, recipe 11

Can be announces as 'Trigram from heaven Menu'

is menu expanded or not?

what role?

what if I click Space OR Enter?

How to focus?

The hamburger menu ('☰') can mean... 

source: Stellify

  1. Hamburger 🍔
  2. (trigram from) Heaven ㆝
  3. Mathematical equality 🧮
  4. Air vent 💨

Decorative elements - counter-example

(fixed)

<button class="nav-toggle" aria-expanded="false">
  <span aria-hidden="true">☰</span> Menu
</button>

source: HTMLHell, recipe 11

Warnings, Notes, alerts...

Roles

<div role="status" aria-live="polite">
  <!-- ... -->
</div>

Notifications

Status and Alert

<div role="alert" aria-live="assertive">
  <!-- ... -->
</div>

via: MDN

aria-live podem ser omitidos (teoricamente)

  • live updates
  • form errors
  • success messages

"alert" vs "note"

<p role="alert">
  <strong>Form updated</strong>, your changes were also saved
</p>

<p role="note">
  <strong>Warning</strong>: don't forget to save before you leave! 
</p>

"the alert role is (...) for dynamic content (...) is equivalent to aria-live="assertive" aria-atomic="true"

<table>

  • surprisingly useful (to organize info based on 2 dimensions) - basically 2d lists
  • table headings (th) matter (and it doesn't have to be the 1st row)
  • don't use for layout purposes... but if you do, change its role to "presentation"

Phrasing and Flow content

Textual elements, abbreviations, localization

<b>, <i>, <em>, <strong>

What to they mean?

<strong>er and dominant!

source: WhatWG

What matters most

 

strong importance (the rest is either details or complements to what's highlighted, most important steps, the actual title of a chapter, etc.)

seriousness (warning/caution notices)

urgency (should be seen before the rest)

A <em>problem</em>

<em>YOU</em>

You can see it in his eyes!

<em>NOW</em>

<em>phasize the intended meaning

<!-- focus on the fact they're cats -->
<p><em>Cats</em> are cute animals.</p>

<!-- enforce the fact that they ARE cute! A counter-argument, maybe? -->
<p>Cats <em>are</em> cute animals.</p>

<!-- enforce what cats are... maybe someone said they're MEAN? -->
<p>Cats are <em>cute</em> animals.</p>

<!-- enforce that cats are ANIMALS (not plants or humans, or whatever...) -->
<p>Cats are cute <em>animals</em>.</p>

<!-- you can (super)emphasize inside an already emphasized element-->
<p><em>Cats are <em>cute</em> animals!</em></p>

source: WhatWG

changes the meaning, but isn't actually more important than the rest

 

"(...) alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text"... (WhatWG)​

<i> "sound" different

Examples

  • technical and foreign expressions
  • thoughts
  • boat names (?)
     
He's got this <i lang="fr">je ne sais quoi</i>...

  • "offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is bold text"... (W3C)

  • "span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood"... (WhatWG)​

<b> class player

Examples

  • keywords (in a document abstract)
  • product names (in a review)
  • article "lede"

"a last resort when no other element is more appropriate" (WhatWG)

Summary

  • use <em> for text that, when highlighted, changes the meaning of the sentence
  • use strong for warning labels, and for text that is more important than or that should be read first and foremost
  • use <i> for text in another "language" (foreign, technical)
  • use b... when you want bold text? 

Spaces matter!

  • Spacing elements (spaces and newlines) even in head, are valid and thus rendered as text nodes
    • spacing elements before a tag, for example, are converted to a single text node
      • and so are all of them AFTER a tag
<!DOCTYPE HTML>
<html>
<head>
  <title>About elks</title>
</head>
<body>
  The truth about elks.
</body>
</html>

Source: Javascript Info

Resourses

Semantics is Accessibility

Curiosities

Fun content I can't group anywhere else
(in this presentation)

<P> sem </P>

The paragraph tag (yes, in upper case) was intended to separate paragraphs, not wrap them.

 

 

Remy Sharp, in (Why Some HTML is "optional")

Title attribute in fields

<!-- even though there's no visible label, 
there's a title attribute that provides audio description -->
<input id="spellbox" title="Type fleurppel here to continue.">

source: Chromevox Tutorial

Content...

  • flow content - basically anything that's part of the body and that 'fills' space
  • ​metadata content - non-visual content: data, links and page configuration
    • ​"modify the presentation or the behavior of the rest of the document"
    • "links to other documents"
    • "out of band information"
  • ​sectioning content - is part of the 'outline', an identifiable part of a document (usually through a heading)
  • heading content - titles of sections
  • phrasing content - represents text, should only include text nodes and phrasing content
    • <p> is NOT phrasing content
  • embedded content - import resources
  • interactive content - user interaction (<a> with href, <audio> with controls, <input>  that are not of type 'hidden'...)
  • palpable content - neither hidden nor empty. Flow content should have at least one of these

Sources

Semantic HTML

By Miguel Costa

Made with Slides.com

Semantic HTML

  • 749

More from Miguel Costa