In this post, I’m going to talk about HTML5 and semantics. I’ll cover a description of what the study of semantics is and why it’s important. I’ll also touch on meaning itself and how it can make our web pages and sites make a heck of a lot more sense.
Now, while my intro to this post sounds very formal, really, I think I’m simply going to attempt to scratch the tipity top of the surface of what’s new in HTML5 as compared to regular old HTML – or HTML4. You know, the HTML we’ve all been coding with since – a long time ago. The buzz these days is all about HTML5 and semantics and making your pages mean something. Your pages need to express themselves semantically so they are easily understood. The question I have is – to who? Who cares if I use a div tag instead of an aside tag or a – well, another div tag instead of a nav tag? In this and my following posts, I’m going to try to get to the bottom of it.
What are Semantics?
When we talk about semantics, we’re talking about the study of the meaning of things. Linguistic semantics is the study of how we best deal with trying to convey, accurately, how we feel, what we mean, why something matters – everything. If we’re attempting to describe one of the many thoughts that are bouncing around in our heads daily to someone, we’re subconsciously using the results of the study of semantics to get our points across.
In HTML, semantics means much the same thing. It’s just more rudimentary. We’re still in the early days of attempting to accurately convey our thoughts via code. In the yesteryear of HTML, we didn’t necessarily, for example, have a great way to differentiate between paragraphs. Sure, we could assign some ids to them to offer some styling, but as far as telling machines and humans what we’re trying to tell them – let’s just say, it’s been a long road.
Since the onset of HTML5 in October 2014, we developers have been handed a few more tools to help make our web pages mean something. Now, we can offer those who care, bits of code that tells them what something is, with more definition. Whether it be a quote from another website, an emphasized piece of text or an area of a page that spans across all pages. No longer are we relegated to using only two categories of elements, inline and block, for everything. Now, we can spice things up – and possibly be rewarded for it. Ah, more categories with their very own content models.
Semantics & HTML
Everything we use in HTML, we use for a reason. The creators of the markup didn’t just slap a bunch of elements together and tell us to start typing them willy nilly. They created these things in an effort to help us make sense of our code and to allow our HTML to connect to and work with other languages, such as JavaScript and CSS. While I don’t plan on getting into too many specifics in this post, I will tell you that the evolution of HTML has seen much more of an integrated approach, as opposed to a stand alone one. And that idea matters. These days, when writing HTML, you need to keep an eye on how the element you’re typing into your text editor will be used down the road.
I’m going to offer a few references here to cover some ideas regarding HTML5 and semantics. The authors of these articles have done a really great job at explaining what things are and where they’re headed.
– HTML5 Semantics by Smashing Magazine
– Let’s Talk about Semantics by HTML5 Doctor
HTML5 Content Models
I’m taking the “HTML5: Structure, Syntax, and Semantics” class with James Williamson on Lynda.com (LinkedIn Learning) right now and he’s starting to talk about content models in HTML. Now, I’ll be the first to tell you that during all those years I used to make websites, I never gave such things much thought. I mean, I knew what the header area looked like and I knew what body tags and p tags were meant to do, but I didn’t quite give consideration to what was supposed to be where and why. Well, apparently there is a rhyme to the reason and there is a structure to follow. And even if you already know what to use on a day to day basis, understanding the new content models can assist you in making decisions of what’s best to go where and when.
First off, if you’d like to read the official documentation on HTML5 content models from the W3C, you can do that here. I’ll warn you though that while that page is a great reference and one you should definitely bookmark, a few folks out there in interland have picked its pieces apart and made them more easily understandable. Below are a some of those references:
– Content Models in HTML by Divya Manian
– Understanding HTML5 Content Models by Vanseo Design
– HTML Content Models by Schools of Web
I guess the best way to explain content models in HTML is to compare them to those weird Russian dolls that grandma used to have. You know the ones – there’s one sitting on a table somewhere and after you pick it up to play around with it, you realize that it splits in half and then in half again. Basically, there’s a big one and that big one encloses a smaller one and that encloses a smaller one and so on. It’s the same thing with HTML content models. Some big elements have smaller elements that reside inside them. Some elements don’t enclose any other elements though and it’s those types of things you have to concern yourself with.
I’ll take a small snippet of information from this site to demonstrate how content models are situated in HTML5.
Each element in HTML falls into zero or more categories that group elements with similar characteristics together. The following broad categories are used in this specification:
– Metadata content
– Flow content
– Sectioning content
– Heading content
– Phrasing content
– Embedded content
– Interactive content
If you click through from the link above to the website, you’ll see an interactive image that you can roll over. As you roll over each category, certain elements will display – elements that work together in such a way as to give the page you’re working on meaning. It sort of looks just like this one:
In the next few posts, I’ll go over some specifics on document structure, grouping content, and other ways to truly give meaning to your web pages and site as a whole.
Leave a Reply