I have a problem, an HTML problem

The term HTML-aholic was coined by Bruce Lawson during his talk “Accessibility, Back to the Future” at Monkigras 2019.

I'm Bruce and I’m an HTML-aholic. … I've been an HTML-aholic for 20 years now. Bruce Lawson - Monkigras 2019

In my ethos my first point is HTML First, I hope this goes some way to explaining that.

What is HTML

HTML, or Hyper Text Markup Language, is the language of the World Wide Web.

Without HTML there would be no Social Media, there would be no online stores, there would be no Web.

In short HTML is the web.

Why HTML first?

Many of these modern platforms and sites are now built with JavaScript Libraries, so much so that Facebook built their own JavaScript Library called React. All of these Libraries, though, in the end output HTML.

Done correctly using these Libraries is not an issue. Although done wrongly a user could just be left staring at a blank screen.

This is a terrible situation, if you are building sites with content, such as a blog, recipe site, a store. You want these things to be discovered.

A search engine or spider will crawl the web, that's why it's called a spider. When it does this it will look at the HTML on your site and the content within that HTML. It will not run any JavaScript that is on your site, that's not what it's looking for. So if the HTML and content on your site is built with JavaScript the spider will not discover it. This is the worst SEO you could possibly have: no content.

This does not mean don’t use JavaScript, it means use JavaScript at the right time and for the right purpose, I shall write about this in the future.

HTML has meaning

In HTML there are things called elements, for example <p> represents a paragraph and <address> is used to display an address for a person or organisation. At the time of writing MDN says there are 142 different HTML elements.

Using the correct element tells the Browser, Search Engine, Assistive Technology (such as a screen reader), etc what the content really is and giving it meaning.

These meanings are what we call semantics of the information on web pages or web applications. Without using these elements you would then need to teach the Browser, Search Engine, Assistive Technology, what various parts of your content are for.

If you look at the code (right click and select View Source) behind many of the largest sites you’d be forgiven for not even realising that HTML has more than just <div> and <span> elements.

In this example, from twitter, we can gain absolutely no meaning at all and would need to start explaining to the tools what each bit is for.

By the way a <div> element is a block-level generic element that has no meaning. A <span> element is a inline-level generic element that has no meaning.

Developers give them meaning by applying classes or ids, such as:

<div class="header">

This is the whole reason HTML5 was developed during 2004-2008.

How HTML5 gives meaning

<header>
    <a href="..">
      <strong>Code Red Digital</strong>
      <time>
        Feb 23
      </time>
    </a>
</header>
<section>
    <p>Content of my tweet…</p>
</section>
<footer>
    Comment, Retweet, Like 
</footer>
    

Here I have simply refactored the code of a tweet to give it meaning, which means there is some basic understanding. What you can see here is:

• A <header> that contains the users name and date of the tweet
• A <section> that contains the contents of the tweet
• A <footer> that contains the comment, like and share functions

All of these sections now have a meaning.

HTML is Dumb/Smart

Why Dumb

It is often said that HTML is a dumb language, what this means is that if a tool looking at the HTML code (such as a browser) doesn't understand it, it just moves on.

Although more importantly does not break.

Why Smart

Alternatively it is also said that HTML is a smart language.

If a developer misses something out in HTML, for example a closing tag, unlike most other programming languages it does not care and just carries on.

If a user is using an old device, or browser they have no control over and that browser does not recognise a new HTML element it just moves on. Pretty smart eh?

HTML is Accessible

Semantic HTML is accessible out of the box. For example if on our web page or web app we create a button, like so:

<button>Click Me</button>

A screen-reader or other assistive technology will instantly know what it is and what it does.

If however we don't use semantics and create a button like this:

<div class="button">Click Me</div>

We then need to teach that assistive technology that this is a button and not some random HTML element.

I call this, Using the right tool for the right job. Creating a button from a <div> is like a builder using a screwdriver to cut a piece of wood.

HTML is Responsive

Again, out of the box, HTML is responsive. What this means is that the content of a web page will flow to fit the size of the device displaying it.

It is only when we start adding CSS and sizes that we break that inherent responsiveness.

Conclusion

Many thought leaders in the web industry will say, build with Mobile first philosophy and then build up.

I would take this further and build HTML First, there are still browsers out there that do not understand CSS and then build for mobile and then progressively add more features for more capable devices (this is called progressive enhancement, but I'll talk about that in a future post).

I also believe that the more that we use other new devices, such as smart speakers then HTML will again need to be front and center.