Semantics in Web
This post is an introduction in semantics and why semantics is important when you build a website.
Definition
Semantics is equivalent to meaning or to what is related to meaning. By using semantics in web design we make a step towards credibility. In other words semantics denotes: show what you mean.
Examples
If you were to write a book you ‘d use a big type for the title, a slighter big type for the name of each chapter and an even slighter for the title of each section of each chapter - right?
Suppose you want to transfer the same book to the Web. So you start with the title by using the <h1> tag, you continue with the <h2> tag for each of the names of the chapters and you move on with the <h3> for the names of each section.
Then you realize that the title of the book is too big. So instead of using the <h1>, <h2>, <h3> tags you start from the <h2>, <h3>, <h4>. This way the title of the book looks better and the rest titles look OK too. It is a brilliant idea, isn’t it? No! This is a bad idea.
If you want to be semantically correct you must use <h1>, <h2>, <h3> series because the first heading indicates your main heading, in this case the title of the book.
Imagine the following example. You want to create a list, so you code:
<p>List Item 1<br />
List Item 2<br />
List Item 3<br />
List Item 4</p>
While the result might look the same if you code this:
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
the semantically correct example is the second one for the simple reason that the second coding indicates that what you have written is actually a list.
Why semantics is important
Semantics is important not because we help the human eye to understand us better (however it does help it), but because it permits the browsers, the search engines and the screen readers understand the content of a web page.
Part of the Web Standards focuses on semantics for this reason. If you want to help making the Web a friendlier place for everyone, including the handicapped people, care for the correct markup. Of course not all websites have been semantically coded (including this one). Actually, very few are. But don’t get me wrong. We should care more about semantics by the very beginning of creating a website.
Search engines care too. They treat the correctly coded websites much better than the rest. So if you want a better ranking, don’t forget semantics.
What about the headings of the first example? How am I going to reduce the size of the <h1> for the title of my book? This is why we need the CSS technology. A CSS can practically do everything we want with typography issues. So do the correct markup and then let the CSS custom the style of your heading.
More
If you want to know more about semantics, take a look at The Meaning of Semantics written by the guru Molly Holzschlag and the article Semantics, HTML, XHTML, and Structure.
Journal Feeds