Semantic Markup Probably Doesn’t Mean What You Think!
By: Jason Knight
Tags: Web Development, Markup, CSS, Semantics, HTML

In my voyages from company to company as a freelance accessibility and efficiency consultant, I am constantly butting heads with web developers who have some genuinely queer notions of what semantic markup is and isn’t. From those saying “Isn’t that just for SEO?” to “It really doesn’t matter”, to “Well that’s just for coders to look at”, there’s a lot of disinformation, misunderstandings, and just plain lies out there.

To put it as plainly and succinctly as possible:

Semantic markup is nothing more than a sick euphemism for “Using HTML properly!”

Semantic markup is the reason HTML existed from the start. It’s not “just for SEO” since it had semantics two years before JumpStation — the first “real” HTML based search engine — was a twinkle in Feltcher’s eye.

Semantics also doesn’t mean the code is written to be human readable, if it were we’d be showing the markup in the page. Some people seem to think that HTML is for programmers to understand with each-other, and that’s not what the tags are for.

Nor do the tags — any of the original ones or any of the currently valid ones — “mean” their default appearance. If you are choosing your HTML tags based on what you want things to look like, YOU’RE DOING IT ALL WRONG!

Let’s just say that again:

If you are choosing your HTML tags based on what you want things to look like, YOU’RE DOING IT ALL WRONG!

Why Do We Have This “Euphemism”?

So as not to offend the people who have their craniums wedged up 1997’s rectum in terms of using HTML 3.2 style “presentational markup”. It’s a way of saying “you’re using HTML wrong” without actually saying it to their face… and that’s a good deal of what’s wrong with web development is this namby-pamby unwillingness to call a turd a turd.

When HTML started out Tim Berners-Lee was trying to address the problem of having professionally written documents following standard writing conventions that could not be sent to all the different devices online. There were dozens of incompatible file formats, and they were all based around presentational concepts instead of grammatical and structural ones. Most of them were even device specific in their layout given that every computer had different size, resolutions, and text display capabilities. Many of them didn’t even have “graphics” in terms of programmer accessible rasters.

By taking the generic SGML language and pre-defining a list of tags to have specific meanings from a structural, grammatical, and syntactical standpoint, properly written well structured documents could be transmitted to a variety of devices. It then fell upon the device — or more specifically the software on the device called a “user-agent” — to translate that structural and grammatical meaning within its own limitations.

Tim Berners Lee at CERN, 1989. This is where HTML began. For laughs I have that same monitor in my garage hooked up to a Sun Blade 2000.

It didn’t matter if it was an old daisy-wheel teletype, the 21x22 display of the VIC=20 Linus Torvalds cut his teeth on, someone using TTY, someone printing it out, or the high end 1152x864 display on the NeXT workstation TBL was fortunate enough to have access to at CERN. The same document could convey its full meaning and structure regardless of how limited or advanced the user’s computer or other access device was.

It’s a rather brilliant notion, to base a layout language not on what you want things to look like, but on what they are grammatically and structurally in a well-written document following professional writing norms.

And why it’s so sad that most people instead choose their tags based on the default appearance, completely missing the point!

So What Are “Proper Semantics”

As I just said, every tag — or at least the important ones — has a structural meaning or purpose based on proper grammar. You choose the tags on what they mean, or how they would be used in proper writing for grammatical reasons.

Let’s start with structure and work from there. Numbered headings first; these tags do not mean fonts in different weights and sizes! Let’s go through them.

<h1> The (singular) heading (singular) that describes the SITE or collection of documents/pages the current document is part of. The WhatWG tried to screw that up with the SECTION tag resetting us to H1 depth, but over time that’s increasingly being told to kiss off by developers.

<h2> Marks the start of a major subsection of the page (making the HTML 5 <section> tag redundant and pointless). If you have no <h1> before it, you shouldn’t have a <h2>. The first <h2> on a page should mark the start of the main content. (making the HTML 5 <main> tag redundant and pointless).

<h3> The start of a subsection of the section started by the previous H2. If you have no H2 you should have no H3.

<h4> Heading for the start of the subsection of the section started by the previous H3. If you have no H3, you should have no H4.

Care to guess what H5 and H6 MEAN?

<hr> a paragraph level change in topic / section where heading text is unwanted or unwarranted. Bascially, an H2 without text. It does not mean “draw a line across the screen”, that’s just the default appearance for screen media targets!

The above tags combined are why if you see a document started with a H5, you’re looking at ignorance. If you see a document where the site logo isn’t a H1 with text inside it, but the page title / main heading is a H1, you’re looking at ignorance. It’s why if you see a document put a H3 before a H2 where they’re the same “heading” for a section, you’re looking at ignorance, incompetence, AND ineptitude. The pesky 3i of web development! “view source” anything built with Bootstrap for prime examples of “Eye cans haz teh intarwebs”

They exist to create a navigable structure for all user agents, not just the magical perfectly sighted using a web browser.

<p> A GRAMMATICAL paragraph. As in a complete thought of one or more sentences. Someone’s address is not a paragraph. A <label> + <input> is not a paragraph. A random sentence fragment or “this happens to be text” is not a paragraph. A lone <img> or <video> tag by its lonesome IS NOT A FLIPPING PARAGRAPH!!!

Seriously, /FAIL/ third grade English. Or at least what was third grade English in the ‘70’s. That’s what, college level second year English major now?

<ul> or <ol> Bullet point lists, unordered and ordered respectively. These should be short grammatical bullet points or selections. That’s GRAMMATICAL bullet points not “hurr durz, eye wunts teh numbars or a dotsie befur itz”. Again that’s just the default appearance, NOT WHAT THEY MEAN!

<table> same deal. For a structural table where the cells have specific relationships on both axis. It is NOT for “eye wunts teh columns.”

And news flash people, there are more tags that go into <table> than just <tr> and <td>. Every time I see some know-nothing fool do this:

<table>

<tr class="title">

<td colspan="4"><b>Shopping Cart</b></td>

</tr><tr>

<td class="heading"><b>#</b></td>

<td class="heading"><b>Item</b></td>

<td class="heading"><b>Unit Price</b></td>

<td class="heading"><b>Total</b></td>

</tr><tr class="data">

<td>2</td>

<td>Console</td>

<td>$499.99</td>

<td>$999.98</td>

</tr><tr class="data">

<td>2</td>

<td>Controllers</td>

<td>39.99</td>

<td>78.98</td>

</tr><tr class="total">

<td colspan="3"><b>Grand Total</b></td>

<td><b>1079.96</b></td>

</tr>

</table>

I have to choke back the urge to backhand somebody with a wet trout. Why? Because the PROPER markup would be:

<table>

<caption>Shopping Cart</caption>

<thead>

<tr>

<th scope="col">#</th>

<th scope="col">Item</th>

<th scope="col">Unit Price</th>

<th scope="col">Total</th>

</tr>

</thead><tbody>

<tr>

<td>2</td>

<th scope="row">Console</th>

<td>$499.99</td>

<td>$999.98</td>

</tr><tr>

<td>2</td>

<th scope="row">Controllers</th>

<td>39.99</td>

<td>78.98</td>

</tr>

</tbody><tfoot>

<tr>

<th colspan="3" scope="row">Grand Total</th>

<td>1079.96</td>

</tr>

</tfoot>

</table>

<th> indicating our headings, scope=”” indicating the direction the headings are marking things for. <caption> as the heading of the table and/or describing its contents. <thead> marking the header, <tfoot> marking the footer, <tbody> marking the table body where the actual data cells are present.

And that’s MORE than enough hooks for any possible styling you could want for said data. You don’t need to piss all over it with classes like those BEM fools, or the outright halfwit HTML/CSS “framework” morons.

<i>, <b>, <cite>, <em>, and <strong>, A Litany Of Woe

These tags get their own major section in this article because of the sheer volume of 100% grade A farm fresh manure I’ve seen shoveled in regards to them. People keep spewing nonsensical bullshit nonstop about what they are, what they’re for, and what they do.

NO! <b> and <i> are not “deprecated”

NO! You should not “stop using <b> and <i> and only use <strong> and <em>

NO! <b> and <i> are not “strictly presentational”

All of the original tags from HTML 2/earlier have semantic meaning separate from their default appearance, and that actually includes <b>old and <i>talic. This confuses many, but it all goes back to professional writing norms.

Let’s go through these:

<b> is for when text would be bold for professional writing purposes. It does not mean the text MUST be bold, only that it should be. An example of this is an entity in a legal document. You’re not putting “more emphasis” on the name, you’re just marking that it’s a name.

<i> is for when your text would be italic for similar reasons. A great example of this is a book title that you’re not <cite>ing.

I read <i>Moby Dick</i> last night. As the protagonist in <cite>Moby Dick</cite> said, <q>Call me Ishmeal.</q>

See?

<cite> is for when you’re CITING a source. It too defaults to italic, but it has a different meaning. Just as:

<em> is for emphasis and

<strong> is for “more emphasis”

Hence an example a friend of mine came up with about a decade and a half ago:

<i>GURPS,</i> <b>Steve Jackson Games'</b> flagship role-playing game, was first released in 1985. Several licensed adaptations of other companies' games exist for the system, such as <i>GURPS Bunnies and Burrows.</i> However, <b>SJ Games</b> has no connection with <b>Wizards of the Coast</b>, producers of the <i>Dungeons and Dragons</i> RPG. <em>No <i>GURPS</i> content is open-source.</em> <strong>Do not plagiarize <b>SJ Games</b> work!</strong>

And yes, <b> inside <strong> is perfectly valid and can even be grammatically or structurally correct!

All of these tags serve a specific purpose, so USE THEM PROPERLY!

But It Looks How I Want, Why Does Any Of This Matter?

Because HTML is for MORE than just what things look like to perfectly sighted users on visual user-agents. It’s for screen readers (software that reads the page aloud), braille readers, devices that can’t even show graphical drawn texts… and remember, search engine’s don’t have eyeballs!

None of these “media targets” give a flying purple fish about your blasted layout, font choices, etc, etc.

Oh, but it LOOKS fine to you… well lah-dee-huffing-dah for YOU! It’s not about you, it’s about the people visiting your site. It’s called accessibility, and by using HTML properly you get that quickly, simply, and easily. You ignore proper semantics and you’re just making the page harder to use for someone, somewhere, at some time!

The willful ignorance and outright incompetence of most developers on this subject is truly horrifying. Just look at the incompetent idiotic trash markup vomited up by the likes of bootstrap developers.



<div class="collapse bg-dark" id="navbarHeader">

<div class="container">

<div class="row">

<div class="col-sm-8 col-md-7 py-4">

<h4 class="text-white">About</h4>

<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>

</div>

<div class="col-sm-4 offset-md-1 py-4">

<h4 class="text-white">Contact</h4>

<ul class="list-unstyled">

<li><a href="#" class="text-white">Follow on Twitter</a></li>

<li><a href="#" class="text-white">Like on Facebook</a></li>

<li><a href="#" class="text-white">Email me</a></li>

</ul>

</div>

</div>

</div>

</div>

<div class="navbar navbar-dark bg-dark shadow-sm">

<div class="container">

<a href="#" class="navbar-brand d-flex align-items-center">

<svg xmlns="

<strong>Album</strong>

</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

</div>

</div>

</header> About Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information. Contact Follow on Twitter

Like on Facebook

Email me http://www.w3.org/2000/svg " width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"> Album

How the hell do you START the document with an H4, a tag that MEANS “the start of a subsection of the H3 preceding it”. These know-nothings chose their tags based on appearance not meaning; meaning they aren’t qualified to write a single damned line of HTML, much less have the unmitigated gall to tell others how to do so. Endless pointless DIV for nothing, endless pointless classes for nothing static images inlined in the markup missing a caching opportunity if this is going to be templated to multiple pages, STRONG around things that aren’t text that would/should be emphasized, redundant aria, no CSS graceful degradation, data- attributes for the fact these idiots are using JavaScript to do CSS’ job…. That’s one hell of a train wreck of developer incompetence for what should probably be — using PROPER semantics — more along the lines of:

<header>

<div>

<h1>Album</h1>

<label for="toggle_navSections"></label>

</div>

<input type="checkbox" id="toggle_navSections" class="toggleNext" hidden>

<div>

<section>

<h2>About</h2>

<p>

Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.

</p>

</section><section>

<h2>Contact</h2>

<ul>

<li><a href="#">Follow on Twitter</a></li>

<li><a href="#">Like on Facebook</a></li>

<li><a href="#">Email me</a></li>

</ul>

</section>

</div>

</header>

You don’t like how that looks, that’s CSS’ job. Lands sake if they’re going to switch to using flex for things, they should at least learn how to use ORDER.

The H1 is THE heading describing the site, the H2 mark the start of subsections, if you’re going to use HTML 5 use the bloody SECTION tag… but worst of all:

Presentational Classes Undoes 22 Years Of Progress!

One of the entire reasons CSS is separate from HTML is so that you can target specific media devices. Screen, speech/aural, print, etc, etc. If you are using classes like “text-white”, “bg-dark”, “list-unstyled”, or cryptic presentational gibberish like “col-sm-4 offset-md-1 py-4” you might as well go back to using <font>, <center>, and those tables for layout y’all so clearly seem to miss! Say hello to the bleeding edge of 1997 mindset and methodology.

HTML is for saying what things are, or WHY they MIGHT receive style for grammatical or structural reasons. This extends not just to your tag choices, but also to how you choose your classes and ID’s. Ok, so you say text-white in the markup… if you’re going to multi-skin and another template is going to have blue text do you REALLY want to have to change the HTML to change the layout/style? Does white text really make sense for print? I’m so sure speech/aural targets give a flying f*** what color your text is.

It’s what’s meant by “separation of presentation from content”. I’m amazed how many derps out there think that’s a server-side concept. CSS is for saying what things look like for specific media targets. HTML is for saying what things are grammatically and structurally, creating relationships of elements and order so that your content is accessible to EVERYONE.

You Keep Saying “Media Targets”, What Is That?

One of the entire concepts of CSS is the ability to style your HTML for specific devices. It is to that end that both the <style> and <link> tags have a media=”” attribute available to them. It exists to say what your style is FOR. Screen, print, aural, speech, projection…

And really your style should be specific to a media target, thus if you see a <link> or <style> that doesn’t have a media attribute, or is set to media=”all” , you are in all likelihood staring the 3i of web development — ignorance, incompetence, and ineptitude — in the face.

It is also why the style=”” attribute should be avoided in the majority of cases, since it has no way to say what media your style is for. If it weren’t for a handful of corner cases — tag clouds, HTML/CSS charts — I would say that the style attribute should be removed from HTML entirely!

It’s again why CSS exists, not just to say what things “look like” for screen, but to say multiple appearances for screen, print, etc. That includes the possibiltiy of multiple screen appearances. Style, layout, all should be variable off of ONE single unified markup. That way to change how things look, you don’t have to dive into the HTML, server-side template code, or anything remotely related to the markup.

AND that’s why putting presentation — be it tags or classes — into the HTML specifically saying appearance isn’t just wrong, it’s mind-numbingly dumbass.

Again, why if you see anyone saying to use classes like “text-white” or “w3-red” or “box-shadow” as classes, run… run far, run fast, but most importantly? RUN! People who write HTML that way have ZERO blasted business writing a single line of HTML, much less trying to tell you how to do so!

But Are Users With Accessibility Needs Really That Important?

I hear this derpitude spewed all the time, typically from the same type of dirtbags who say that wheelchair ramps are an eyesore, park in handicap spaces because “why should they get special treatment”, and all the other narcissistic sociopathy we hear these days. “me, me, me, F*** anyone not like me”.

Which to be frank is an utter shite “business plan”.

Those of us who actually give a damn about others, those of us who realize the ideal is to reach as many people as others, and those of us who work in the field of accessibility consulting know full well how important it is. It’s why pissing on a website with “JavaScript only functionality” is stupid. It’s why having no graceful degradation plan for scripting off/blocked, css disabled/inapplicable, even images blocked, is shortsighted, and pretty much the fast road to telling large swaths of potential users to sod off.

There are even laws about this stuff such as the US Americans with Disabilities Act (ADA) and the UK’s Equality Act (EQA). If you fail to meet WCAG minimums — of which semantic markup is a part — you are in violation of the law if you’re a business or government organization.

… and as I’ve said many the time if Dominos and Beyonce can be raked over the coals in court over this stuff, what chance does the small business have when ignoring these basic and easy methodologies just because some dumbass “framework” or “site generator” is used.

Again, where most such “shortcuts” do nothing to site owners but bend them over a log in the woods and tell them to squeal like a pig.

Conclusion

If you passed fourth grade English — or at least what was the 4th grade in the ‘70’s, which given the state of literacy with the twitter-generation mouth-breathers I assume is a second year college English major by now — these concepts should be familiar and easy to use.

Bottom line HTML is for saying what things are or would be grammatically and structurally, IT IS NOT FOR SAYING WHAT THINGS LOOK LIKE!!!