HTML & CSS: Semantics

When something is semantic, it means that it has meaning. When creating HTML markup , you ideally want to make everything as semantic as possible.
Let’s say for example we wanted to create a navigation section for a website. We have several options for creating then navigation – we could do a simple bunch of links, for example:

<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Contact</a>

The issue with the above is that it’s considered un-semantic. The navigation system is basically a list of links and HTML has a built in element for lists – why are we not utilizing this?
The unordered list is specifically made for this and so should be used.
If we turn it into an unordered list then it’s much more semantic and considered “better code”:

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact</a></li>
</ul>

That’s much better!
It might require a bit more styling (we’ll need to change the list-style-type and get them to display:inline) but it’s generally better code.

Another prime example of unsemantic code is writing a list like the following:

<h2>Top 5 Semanticity Errors</h2>
1. One
2. Two
3. Three
4. Four
5. Five

Why on earth would you clutter your markup with this when you could use the build in ordered list tags to create this. The following is much better:

<h2>Top 5 Semanticity Errors</h2>
<ol>
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
	<li>Five</li>
</ol>

Another common error is adding separation between links in the markup (like in the navigation). For example:

<div id="container">
	<ul>
		<li><a href="#">Home</a> |</li>
		<li><a href="#">About</a> |</li>
		<li><a href="#">Portfolio</a> |</li>
		<li><a href="#">Contact</a> |</li>
	</ul>
</div>

Although you can just about get away with inserting a “|” symbol here and there, there is a CSS property that is made for this. Borders! You can use border-left property to set a border. By default these should pop up right next to the text – so we just need to add a bit of padding and margins and this should work just the same but be MUCH better and more semantic code:

#container li{
	list-style-type: none;
	display: inline;
}

#container li a{
	border-left: 1px solid black;
	margin-right: 25px;
	padding-left: 25px;
}

It’s also worth noting that there is one issue with this which is that there is a border line on the left of the first element in the list (which we don’t want). you can use the :first-child pseudo-class (pseudo-classes are things like :hover etc) to fix this.

#container li:first-child a{
	border-left: 0;
}

This essentially gets the first list child of the container division and removes it’s left border.

As you’ve probably been able to tell from the last few examples, lists are a big part of semantics. Semantics however is obviously an extremely broad subject and can cover a lot of things and a lot of problems.
There is also semantics in naming IDs and classes.
Let’s just say for example we had two divisions – one floated to the left for a side content and one to the right for the main content. If you named the side content division “leftContent” and the main content “rightContent” then this isn’t very dynamic or semantic. If you choose at a later date to actually move the side content to the right, then you’ll have to go through and rename all of the divisions since a div being called “rightContent” being on the left doesn’t make much sense. A name like “sideContent” would be much more appropriate.



Back to HTML & CSS