It is often said that learning HTML is easy. And it is, from a certain perspective. But just like anything in life, there is a whole other level to writing markup. Writing good semantic markup is not only good practice, but honestly an art form that must takes years of practice to master.
But I know how to write HTML...
A lot of people can write basic markup, but I have seen far too many times that the markup produced by said developers are nothing but code soup. To be fair, they get the job done, but are void when it comes to semantics.
Another thing that I hear is from people who are accustomed to frameworks like Bootstrap. This takes care of most of the markup for you so there is little to think about. Sad to say, that while the creators of Bootstrap did their best, they are trying to make a system that will work for the majority of developers. It is hard to perfect markup for your site, when its origins are rooted in design for millions of cases.
For example this is a simple layout built using Bootstrap.
<div class="container">
<div class="row">
<div class="col-xs-12 header">
Header
</div>
</div>
<div class="row">
<div class="col-xs-4 menu">
Menu
</div>
<div class="col-xs-8 content">
Content
</div>
</div>
<div class="row">
<div class="col-xs-12 footer">
Footer
</div>
</div>
</div>
As you can see, the tags and classes aren't very descriptive of the content. So how could this be done better using semantic markup.
<header>
Header
</header>
<main>
<nav>
Menu
</nav>
<article>
Content
</article>
</main>
<footer>
Footer
</footer>
Much better. The amount of markup is kept to a minimum and the classes describe what the content is for.
Semantic Shmantics
I have already talked a bit about how you should have semantic code, but that begs the question on what semantic code is.
Simply put it is markup that describes the meaning of the content
“In markup, semantics is concerning with the meaning of an element and how that element describes the content is contains”
Molly E. Holzschlag
Thinking about what the content is and coding efficient and meaningful markup is what sets apart good developers from great ones. One must learn to think about what the content represents and then convert that into the appropriate HTML. Ask yourself “What is this?” and “What does it mean?”
Let me give you an example. Take the following image and using your own words (in other words don’t write code) explain this to an imaginary person who can not see it.
It should be along the lines of “It is a group of race cars with an implicit order and with different colors”. Good. Now let’s take that and translate it into code speech.
“It is a list of ordered race cars with different colors”
Very good. Using this we can now convert that into code.
<ol class=“racecars”>
<li class=“red”>Office Depot</li>
<li class=“black”>Army</li>
<li class=“red”>Motorcraft</li>
<li class=“blue”>Gmac</li>
<li class=“black”>Carhartt</li>
<li class=“yellow”>Stanley</li>
<li class=“black”>Jim Beam Black</li>
</ol>
Any other developer would have just put the cars in a bunch of divs. We should be better than that.
What does it TELL you.
When determining markup for content, one should not only be concerned about how it visually looks. You must also think about what it means and how important it is. Sure that heading is visually big, but does that automatically constitute an <h1> or <h2> tag? Not really. It could be quite minor in the scope of the page. That is up to you to determine.
Solving the case of “Divitis”
It is a serious problem let me tell you. Developers are getting sick with a notorious illness called “Divitis”. The symptoms include coding with too many divs.
It’s not good.
A good cure is for them to learn about all the semantic tags that are available. Let’s go over some that should be learned right away. If you already know these, then wonderful! You are on your way to being healthy if you aren’t already.
<header>
Represents the header of a document or a section.
<article>
A section of the page that represents an independent part of the document, page, or site.
<section>
A generic grouping of thematic content. For example, chapters in a book.
<main>
Should be used once per page and outlines the main content of a site. Used in tandem with screen readers.
<aside>
Represents content that is related to the content around it but is considered separate from that content.
These are the very basic and is a topic that should be explored more.
Real World Example
Let’s see this in action on a full site. One of the things that I sometimes do is do my markup using a pencil/pen first. I outline al the major section. That helps me figure out what elements need to be what.
Here is an example of that using a design I got off of Dribbble. (https://dribbble.com/shots/4734216-Minimalist-blog-concept/attachments/1066977)
Here is a clean version if you wanted to ty it out yourself and write down what tags you would use.
Here is my version. Take a couple minutes to go over my notes. If you did it as well, how close to it were you to mine?
Now it is time to make this in code.
<header>
<div class="logo">
<img src="logo.svg" alt="Beyond the desk">
</div>
<nav>
<ul>
<li><a href="#0">Home</a></li>
<li><a href="#0">Articles</a></li>
<li><a href="#0">Categories</a></li>
<li><a href="#0" class="button">Subscribe</a></li>
</ul>
</nav>
</header>
<main>
<article class="blog-post">
<header>
<h1>How to not overload yourself</h1>
<p>Writen by <a href="#0">Maria Frankson</a> | Published on <time>May 11, 2018</time> | Filed under <a href="#0">Personal growth</a></p>
</header>
<img src="blog-header.jpg" alt="">
<p>Why is it that when your friends...</p>
<blockquote>
<p>"By personal commitments, I'm referring...</p>
</blockquote>
<p>But, it doesn't. And you find yourself...</p>
</article>
</main>
This markup is a perfect example on how you should use semantic code instead of just a bunch of meaningless divs.
Wrapping Up
As odd as it might sound, writing good solid semantic code is an art form. It takes time, dedication, and practice to write it correctly and efficiently. It isn’t “just writing HTML”. There is more to it than a bunch of div tags. Unfortunately markup is an afterthought taking a backseat to more exciting technologies like JavaScript or some backend languages. Sure HTML isn’t nearly as complex as those, but there is an argument to be said that it is just as important.
Good markup can make the development process easier to understand and style. Markup done right is not nearly talked about as much as bad markup.
We should put as much thought into HTML as we do any other language.