Don't Just Put a <div> on It—Use the Power of the Browser!

The best HTML elements you never knew existed, so you can improve your website's accessibility, mobile UX, and SEO while writing less code.

August 15, 2019 • 6778 words • 24 minute read

Adapted from a talk given at EmberCamp 2019. Original slides and more information on the Talks page.

The humble <div> is a powerful and flexible element. Throw enough CSS and JavaScript on it, and a <div> can be anything. But should it be?

“Semantic HTML” is a method of using elements that best match what your content means and does. But how do you write better markup if you don’t know your options?

Join the learning journey to fill your semantic HTML toolkit with the coolest elements you never knew existed. Learn specific elements to use in different scenarios and how to wield the full power of the HTML spec.

You’ll write less code while making your pages more accessible and mobile-friendly!

Title slide

Slide with title “Don’t Just Put a <div> On It! User the Power of the Browser”, with attribution to @MarieChatfield.

Introduction to Semantic HTML

Slide of Document Structure with HTML elements listed

Slide with title “Semantic HTML” and subtitle “What is it? Why does it matter?”

You may have heard the phrase or idea that Semantic HTML is better for accessibility—but what does that mean?

What is it?

Semantic definition
Semantic means... "related to meaning."
Semantic HTML definition
When we talk about Semantic HTML, we mean choosing elements based on the meaning of their contents.

That’s still pretty abstract, so it might be easier to consider what non- semantic HTML looks like.

Non-Semantic HTML examples
Non-Semantic HTML, can look like picking elements based on default browser styles, or using <div> elements for everything.

Let’s look at an example of using <div> elements in a non-semantic manner.

Slide with boxes for HTML, CSS, and JavaScript
The building blocks of the web: HTML, CSS, and JavaScript.

The foundational web technologies are incredibly powerful.

Example of making a button with HTML, JavaScript, and CSS
We can combine these technologies to make something that appears like a button.

With HTML, we can use a <div> with some content that instructs the user to click it.

With CSS, we can make our <div> look like a button.

With JavaScript, we make our <div> do interesting things when it is clicked, like a button.

Is it a button? Big red X no
So... is it a button? No.

This “button” probably doesn’t handle all the different use cases a real <button> does—it might not support keyboard events, it might not submit forms, it might not display different visual styles on hover.

We could always write all of that code ourselves… but someone already has. In your browser. When we use a <button> element, we get all of that functionality for free.

Semantic example of a button
If we just swap out our <div> for a <button>, we now have semantic HTML!

Why does it matter?

Semantic HTML matters because there is more context with less code
Semantic HTML matters because it allows you to provide more context with less code.

Providing context in your actual HTML means that anyone or anything that uses your code will be able to understand it better, and make better choices accordingly.

Getting Started

So all of this semantic HTML stuff seems great…

Gif of School House Rock

Gif of Charles from Brooklyn 99 TV show nodding and saying “Sure sure sure, cool cool cool cool cool.” (source)

…but what if you don’t even know how to start writing it?

Gif of School House Rock

Gif of Hannah Brown from The Bachelorette TV show looking frustrated and saying “I don’t even know where to start” (source)

That’s why we’re going to learn all about a bunch of HTML elements that you can start using today!

Browser Power Ups title slide
Slide with title "Browser Power Ups" and subtitle "Fill your HTML toolkit with the best elements you never knew existed."

The rest of this post goes over a few categories of HTML elements. You’ll see a preview of the same site written with <div> elements and in semantic HTML, with side-by-side comparisons of how it behaves in different scenarios.

Embedded semantic-html-examples Glitch app.

Skip to Section:

Warning: Many of these elements are part of the HTML5 specification. They may not be consistently supported across all browsers, but I have largely tried to pick examples that work in Internet Explorer, Edge, Firefox, Safari, and Chrome.

You should still do your own cross-browser functionality research and testing before implementing any of these elements yourself!


Document Structure

Slide of Document Structure with HTML elements listed

Document Structure section slide, with HTML elements <main>, <article>, <section>, <aside>, <header>, <footer>, <nav>, and <h1>…<h6>.

Elements used to outline the general shape and contents of your website.

Communicate the relative importance of different sections of content. Improve accessibility, search engine optimization, and accuracy of tools like reader modes.

Side by Side Preview

Let’s look at a sample blog post page, implemented using mostly <div> elements, and implemented using semantic HTML.

Side by side comparison of div vs semantic HTML implementations of a blog post.

You can see the source code yourself, or edit a copy of it, using this Glitch app.

Source code of Glitch app

Let’s compare how these two sides stack up across a couple of different ways of accessing them.

Div vs Semantic HTML, on browser: visually the same.
Side by side on browser
Div vs Semantic HTML, in Reader mode: similar, but semantic version has better headings and titles.
Side by side in reader mode
Div vs Semantic HTML, without JavaScript or CSS: both plain, but semantic version still has visually distinct sections.
Side by side without JS or CSS
Div vs Semantic HTML, using VoiceOver Web Rotor: div version has only links, semantic version has links, landmarks, and headings
Slide showing VoiceOver Web Rotor for div version Slide showing VoiceOver Web Rotor for semantic HTML version

Here are the HTML elements that make up this page.

Semantic HTML web preview, with list of elements used on the right.
Slide semantic HTML preview and list of elements in nested order.

Skip to Section:

General Resources:


Slide of main element

<main> element details slide, with code sample and power ups.

<main>

Warning: Inconsistent in Internet Explorer

Code Sample

<main role="main">
  <!-- Content unique to *this* page -->
</main>

Power Ups

Resources


Slide of article element

<article> element details slide, with code sample and power ups.

<article>

Code Sample

<article>
  <header><h2>Emojis as an Art Form</h2></header>
  <!-- A blog post about emojis. -->
</article>

Power Ups

Resources


Slide of section element

<section> element details slide, with code sample and power ups.

<section>

Code Sample

<section>
  <header><h3>Best Practices</h3></header>
  <!-- Content about best practices of using emojis. -->
</section>

Power Ups

Resources


Slide of aside element

<aside> element details slide, with code sample and power ups.

<aside>

Code Sample

<aside aria-labelledby="fave-emojis">
  <h3 id="fave-emojis">My Favorite Emojis</h3>
  <!-- List of my favorite emojis-->
</aside>

Power Ups

Resources


Slide of nav element

<nav> element details slide, with code sample and power ups.

Code Sample

<nav aria-label="Main">
  <!-- List of links to navigate website. -->
</nav>

Power Ups

Resources


Slide of header element

<header> element details slide, with code sample and power ups.

Code Sample

<header>
  <h1>Super Cool Semantic HTML Site</h1>
  <!-- Logos, navigation links, author information, etc. -->
</header>

Power Ups

Resources


Slide of footer element

<footer> element details slide, with code sample and power ups.

Code Sample

<footer role="contentinfo">
  <p>Copyright by Marie Chatfield, 2019.</p>
</footer>

Power Ups

Resources


Slide of h1...h6 elements

<h1>…<h6> elements details slide, with code sample and power ups.

<h1> … <h6>

Code Sample

<h1>Super Cool Semantic HTML Site</h1>
<h2>Emojis as an Art Form</h2>
<h3>Introduction to Emojis</h3>
<h3>My Favorite Emojis</h3>

Power Ups

Resources


Forms & Inputs

Slide of Forms & Inputs with HTML elements listed

Forms & Inputs section slide, with HTML elements <form>, <fieldset>, <legend>, <input>, <label>, <select>, <optgroup>, <option>, and 
<output>.

Elements used to provide interactive controls and inputs for users.

Improve accessibility and mobile experience, particularly with more complex input validation.

Side by Side Preview

Let’s look at a sample page that has a form with multiple sections, implemented using mostly <div> elements, and implemented using semantic HTML.

Side by side comparison of div vs semantic HTML implementations of a web form.

You can see the source code yourself, or edit a copy of it, using this Glitch app.

Source code of Glitch app

Let’s compare how these two sides stack up across a couple of different ways of accessing them.

Div vs Semantic HTML, on browser: visually the same.
Side by side on browser
Div vs Semantic HTML, without JavaScript or CSS: both plain, but semantic version still has working inputs and is functional.
Side by side without JS or CSS
Div vs Semantic HTML, using VoiceOver Web Rotor: both versions show controls and state, but semantic version includes form labels and context
Slide showing VoiceOver Web Rotor for div vs semantic HTML version
Div vs Semantic HTML, mobile: visually the same.
Side by side on mobile
Div vs Semantic HTML, mobile, phone input: semantic version has phone specific keyboard.
Side by side on mobile, with phone input
Div vs Semantic HTML, mobile, email input: semantic version has email specific keyboard.
Side by side on mobile, with email input
Div vs Semantic HTML, mobile, select input: semantic version has native dropdown menu with grouped options.
Side by side on mobile, with select input

Here are the HTML elements that make up this page.

General Resources


Slide of form element

<form> element details slide, with code sample and power ups.

<form>

Code Sample

<form action="/submit-form" method="post" target="_blank">
<!-- Input elements go here -->
<button type="submit">Submit</button>
</form>

Power Ups

Resources


Slide of fieldset and legend elements

<fieldset> and <legend> elements details slide, with code sample and power ups.

<fieldset> + <legend>

Code Sample

<fieldset disabled>
  <legend>Favorite Emojis</legend>
  <!-- Checkbox inputs here -->
</fieldset>

Power Ups

Resources


Slide of input and label elements

<input> and <label> elements details slide, with code sample and power ups.

<input> + <label>

Code Sample

<input id="“sparkle-heart”" name="fave-emoji" type="checkbox" value="💖" />
<label for="sparkle-heart">💖</label>

Power Ups

Resources


Slide of input types

<input> type slides, split into Basic, Formatted, Date/Time, Special, and Form Controls categories.

<input> types

Warning: Inconsistent browser support, particularly for more complex types

Basic Types

Formatted Types

Date / Time Types

Special Types

Form Controls


Slide of select and option elements

<select> and <option> elements details slide, with code sample and power ups.

<select> + <option>

Code Sample

<select id="activity" name="activity">
  <option value="climbing">🧗🏻‍♀️ Rock Climbing</option>
  <option value="cycling">🚵‍♀️ Cycling</option>
</select>

Power Ups

Resources


Slide of optgroup element

<optgroup> element details slide, with code sample and power ups.

<optgroup>

Code Sample

<select id="activity" name="activity">
  <optgroup label="Outdoors Things"><!-- options --></optgroup>
  <optgroup label="Indoors Things"><!-- options --></optgroup>
</select>

Power Ups

Resources


Slide of output element

<output> element details slide, with code sample and power ups.

<output>

Warning: Unsupported by Internet Explorer

Code Sample

<label for="sum"><strong>Total Cost:</strong></label>
<output id="sum" name="sum" for="cost num-emojis">\$0</output>

Power Ups

Resources


Media & Figures

Slide of Media & Figures with HTML elements listed

Media & Figures section slide, with HTML elements <figure>, <figcaption>, <video>, <audio>, and <track>.

Elements used to provide multimedia content or other visual/audio content and diagrams.

Improve accessibility and mobile experience. Use less code or external libraries.

Side by Side Preview

Let’s look at a sample page that has sample code implementations along with audio and video content, implemented using mostly <div> elements, and implemented using semantic HTML.

Side by side comparison of div vs semantic HTML implementations of a multimedia page.

You can see the source code yourself, or edit a copy of it, using this Glitch app.

Source code of Glitch app

Let’s compare how these two sides stack up across a couple of different ways of accessing them.

Div vs Semantic HTML, on browser: visually the same.
Side by side on browser

I didn’t bother trying to implement my own video player library, so for the <div> version, we do a hack where we use JavaScript to display out an iFrame with the URL to the video inside it.

This obviously does not work without JavaScript enabled. And neither would fancy JavaScript libraries.

Semantic HTML version: has built-in video player with captions.
Video with captions and transcript

Here are the HTML elements that make up this page.

General Resources:


Slide of figure and figcaption element

<figure> and <figcaption> elements details slide, with code sample and power ups.

<figure> + <figcaption>

Code Sample

<figure>
  <figcaption>How to say hello in JavaScript.</figcaption>
  <!-- Code snippet here -->
</figure>

Power Ups

Resources


Slide of video element

<video> elements details slide, with code sample and power ups.

<video>

Code Sample

<video controls width="750">
  <source src="/say-hello.mov" type="video/mov" />
  <source src="/say-hello.mp4" type="video/mp4" />
</video>

Power Ups

Resources


Slide of audio element

<audio> elements details slide, with code sample and power ups.

<audio>

Code Sample

<audio controls width="750">
  <source src="/say-hello.m4a" type="audio/m4a" />
</audio>

Power Ups

Resources


Slide of track element

<track> elements details slide, with code sample and power ups.

<track>

Code Sample

<video controls width="750">
  <track default kind="captions" label="English"
         srclang="en" src="/media/tracks/say-hello_en.vtt"/>
</video>
Sample WebVTT file with English captions
WEBVTT

00:00.000 --> 00:04.500
So over here we have a lovely function called "sayHello"

00:04.500 --> 00:07.000
and then we're just going to do some stuff with it.

00:07.500 --> 00:10.000
So let's try saying hello to me.

00:11.500 --> 00:15.000
Sample WebVTT file with Spanish subtitles
WEBVTT

00:00.000 --> 00:04.500
Entonces, aquí tenemos una función agradable llamada &lt;&lt;saluda&gt;&gt;

00:04.500 --> 00:07.000
y vamos a hacer algunas cosas con ella.

00:07.500 --> 00:10.000
Entonces, tratemos de saludarme.

00:11.500 --> 00:15.000
Si venimos aquí después de guardar nuestro archivo

Power Ups

Resources


Text Formatting

Slide of Text Formatting with HTML elements listed

Text Formatting section slide, with HTML elements <pre>, <code>, <samp>, <kbd>, <var>, <q>, <blockquote>, <cite>, <abbr>, <dfn>, <address>, and <time>.

Elements used to encode special meaning or formatting for different types of text.

May improve SEO, or trigger browser-supported tools.

Programming Text

(Hint: check out the <figure> + <figcaption> sample app source code to see these in action!)

Quoted Text

Terms and Definitions

Data


Honorable Mentions

For the sake of time, I couldn’t include every single HTML element in the presentation. But here are a few other HTML elements that merit a mention in this longer form!

Lists

Forms

Tables

Note: It’s important to format tables well, to make them accessible for screen readers! For example, making sure headers are appropriately marked as such, so screen readers can announce the label for a particular cell.

Rows and Cells:

Irregular and complex headers:

See Web Accessibility Tutorials: Tables with irregular headers, W3C WAI

Typography

Offset text:

Emphasized or italicized text:

Note: many of these look very similar, but have different meanings. Pay attention to the nuances!

Text Revisions:


Summary

Summary slide

Slide with title “Takeaways” and subtitle “Resources & important points to remember”

Summary of all elements slide

Slide with list of all HTML elements in the different major sections covered above.

That’s a lot of content! Let’s review the important points:

Semantic HTML review slide

Semantic HTML gives more context with less code.

Semantic HTML gives more context with less code. That means you can improve accessibility, mobile UX, SEO and more… while writing less code that’s more readable.

Gif of Paramore concert

Gif of Paramore concert with lyrics “You are the only exception” overlaid on top of sparkling lights. (source)

But for every rule, there’s an exception so… when shouldn’t you use semantic HTML?

When not to use Semantic HTMl slide

Not every use case will work with the basic semantic HTML elements.

Not all HTML elements are supported across all browsers, or they might have inconsistent behavior in a way that matters to you.

Sometimes you are going to have a very specific use case or design need that can’t budge.

It’s okay to write your own versions instead of using semantic HTML, but you need to understand what the browser implements for you and be willing to write it yourself, test, and maintain it.

It is strongly suggested you use an existing open source library where multiple users can support patches and ensure it works broadly and consistently across browsers.

Slide with questions before custom implementing

But if you aren’t going to use semantic HTML elements, make sure you’re ready to take on the work yourself or support it.

If you are going to adopt a custom version of one of these elements (even more so if you’re going to write one yourself), be sure to consider:

Gif of School House Rock

Gif of School House Rock cartoon with children smiling and one says “Knowledge is Power” (source)

Now that you know:

you can make informed decisions about when to use these elements to write semantic HTML… or when your use case calls for a custom implementation, and precisely why the existing elements won’t work.

Use your knowledge for great good, and make beautiful and accessible websites for all! 🎉


Additional Resources

Accessibility / Assistive Tech

Semantic HTML


Did you like this post? I’ll be sporadically publishing more content like this to the git checkout -b idk-what-im-doing blog in the future! Tweet me @mariechatfield to let me know what kind of resources you’d like to see next.

🙏🏻 Many thanks to my team at Pingboard for supporting my time writing these posts, and to the EmberCamp organizers for providing the first space for this talk to happen!

Interested in seeing this talk come to a stage near you? Contact me!


 

A whimsical introduction to how computers talk to each other, and what exactly your requests are up to.