Understanding Semantic vs Presentational Markup
No div soup for you
Semantic and presentational HTML, a topic that I feel never gets the attention it needs. Whether you are a long time developer or just getting into the field, this subject can make or break the quality of code in your project!
It sounds like a fancy and complicated concept, so you may be thinking “oh great something else to learn and commit to memory”. The secret is, it’s not complicated at all. Heck, there’s barely anything to remember except that we want our HTML to reflect its use cases, and where possible be “readable”.
As a simple example of what I mean by this, I will start by referring to
HTML elements that have been around for a long time. Let’s start with the
footer tags as they are some of the more commonly used ones and make great examples. These tags describe the kind of purposes they will likely serve, the
body usually holds the bulk of our content and
footer usually hold content for bottom or “foot” of the page. This is actually the thinking around the new semantic tags, such as the
nav tag which describes a navigation element. Does this mean we should use a
nav tag for ALL navigation elements? Surely not, but more on this soon.
By using these we can keep our code manageable and clean, making it better prepared for future scalability. This semantic approach is not ALWAYS available due to the fact that it is impossible to predict everything we could need
HTML elements for. So often we will find ourselves using
div elements to fill that void, unfortunately, it is VERY easy to get caught up in this and create what we like to call “Div Soup”.
As you can see above, even with unique
id's and or classes this can get pretty tedious and difficult to read rather fast! Now let’s look at a couple examples of how to get the best use from our
div tags and semantic tags.
To div, or not to div?
That really is the question here though, when should we use
div's? Well the best answer to this is simply, when nothing else fits the use correctly. For example, with the previously mentioned
nav tag according to WCAG standards should only be used for the sites main navigation area. So a navigation at the footer with links to other resources and misc information wouldn’t be an ideal use of the
nav tag. In fact one might argue (which I am), that a
div tag would be much better suited, perhaps with an
footer-nav or something to that affect. This also allows us the ability to specify unique appearances to each navigation which will likely be needed anyways. As well as gives us a page anchor that we can use later if we wish!
Another common convention is to use
ul tag, but many developers are leaning away from that as it can cause unneeded clutter in our
html. This is only one example and generally you and or your team will need to decide which is approach is best. Let’s take a look at a couple more really quick.
Say we have an element that we know we want to sit aside from the main content of the page, such as a side bar with relevant updates or information, we could do the following:
Now let’s say that same side bar has a few sections in it, we could separate those with
section tags like so:
Now you might ask yourself, why not use a
div tag for this? Put simply, this describes its function, it is being used to create individual sections of the side bar. So using a
div here would not adhere to the semantic approach.
Ok so I’ve talked about when we shouldn’t use
div what about when we should? Well let’s look at the following example for this:
<img src="images/me.jpg" alt="A glance at me!">
Above we have an
section composed of an
aside and an
article tag respectively. But what if our
aside tag has two sections that contain custom “card” widgets inside of it? Is this a good place to use a
div? Well yes! It is in fact a perfect place to use it, as there isn’t a tag that would better describe the purpose of this, so let’s see what this could look like:
<img src="images/me.jpg" alt="A glance at me!">
Fortunately for us as developers, semantic markup does a lot more for us than simply describe it’s content and use. It can also simultaneously describe it’s presentation as well, being able to do both when and where possible has many massive benefits. Let’s list off a few of those really quick:
Benefits to taking a dual approach of Semantic/Presentational markup
- The markup is easy to read and understand.
- Assists with scalability of projects if and when up-scaling a project.
- The tags not only describe their function and the content but also their placement.
- Clean, Dry Semantic markup in combination with presentational markup means it is much simpler to target our
CSSwhich helps with writing dry-er CSS code, again assisting further with scaling.
- Assists with adhering to the WCAG standards for user accessibility.
- Assists with SEO visibility and search result rankings
This isn’t to say that you shouldn’t put semantics before presentational markup, because you definitely should. Semantic markup always takes precedence over presentational markup. However, when we can there are benefits to keeping both in mind as it will also help with designing the HTML architecture we’ll need for our projects!