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?
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.
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
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:
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:
<header>that contains the users name and date of the tweet
<section>that contains the contents of the tweet
<footer>that contains the comment, like and share functions
All of these sections now have a meaning.
HTML is Dumb/Smart
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.
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:
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.
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.
Other articles from the blog