Photo by Goran Ivos on Unsplash

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 body and 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”.

<div>
   <div>
      <div>
         <div></div>
      </div>
   </div>
</div>

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 id of 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!

<footer>
   <div id="footer-nav"><div>
</footer>

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:

<aside></aside>

Now let’s say that same side bar has a few sections in it, we could separate those with section tags like so:

<aside>
   <section id="event-updates"></section>
   <section id="reviews"></section>
</aside>

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:

<section>
   <img src="images/me.jpg" alt="A glance at me!">
   <aside></aside>
   <article></article>
</section>

Above we have an section composed of an img, 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:

<section>
   <img src="images/me.jpg" alt="A glance at me!">
   <aside>
      <div class="skills-card"></div>
      <div class="stats-card"></div>
   </aside>
   <article></article>
</section>

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 HTML within our CSS which 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!