Semantic HTML and Modular CSS

The definition of semantic is relating to meaning in language or logic. Semantic elements are not only smart when coding HTML, but also are important for other reasons as well. In this blog post I will elaborate more as to why it is important to create semantic HTML markup.

First off it is easier to develop and maintain semantic HTML code rather than to create junked-up code. Some examples of HTML semantic elements are:


<header> – Defines the header of the document or section
<main> – Defines the main content of a document, excluding global items like nav or footer
<nav> – Defines navigation links
<article> – Defines a self-contained piece of content within a document (blog posts, comments, etc.)
<section> – Defines a section within a document
<aside> – Defines content that is aside from main content; should be related to surrounding content
<figure> – Defines self-contained content that is independent (photos, illustrations, videos, etc.)
<mark> – Defines highlighted or important content
<figcaption> – Defines the caption for the figure
<hgroup> – Defines a group of header tags
<footer> – Defines the footer of a document
<time> – Defines the time


It is way better to use a semantic element for a page header for example than span junk.

Good: <h1>ACME household products</h1>

Bad: <span class="header" >ACME household products</span>

If you create a <div> tag you should give the class name semantic meaning as well such as <div> class="productInformation"</div>

When it comes to coding web pages always remember to "separate content from presentation". This essentially means to use bare bones html with semantic meaning and enhance the HTML tags with the presentation which would be the Cascading Style Sheets or CSS.

Speaking of CSS, the styling of your webpage should have meaning as well. I prefer to use the SMACSS approach when writing CSS which stands for Scalable and Modular Architecture for CSS.

With the SMACCS approach you organize a CSS file into categories.

Base

1. Layout
2. Module
3. State
4. Theme

You want to keep your CSS as clean and specific as possible. If you have complicated CSS which uses selectors that go deep from the start of the DOM tree to your content, then if you change the HTML structure you will have to redo the CSS. By minimizing the depth of the CSS you can easily make changes to the HTML while keeping the CSS structure intact.

I found a handy document online which goes into full details into the Scalable and Modular
Architecture for CSS.[PDF]