A web page, at its core, is a text document. Each page may look radically different, but below the surface, it is text that has been marked up using HTML (Hypertext Markup Language). HTML uses a system of tags to designate the meaning of each bit of content.
When HTML tags are used to accurately convey what each chunk of content is, it's called semantic HTML–it reinforces the semantics, or meaning, of the information on that page. This is the way HTML was designed to be used.
Choose Substance Over Style
When choosing which tag to use with a bit of content, start by determining what the content is. Is it a headline? Is it a paragraph? Is it a list of items? Then, choose the appropriate tag.
For example, to designate a chunk of text as a paragraph, you wrap it with a <p> tag. To designate a line of text as a top-level heading, you use an <h1> tag.
Although this process is straightforward, it can be easy to stray from using HTML semantically. Instead of focusing on what each tag means, you may end up paying more attention to the styles associated with each tag.
For instance, a top-level heading (<h1>) will be large and bold by default. A second-level heading (<h2>) will be a little smaller than a top-level heading. A list will include bullets and increased padding to the left. And so forth.
Now, let's say you want to add in a second-level heading, but the default style renders too large for your taste. And so, you end up using a fifth-level heading (<h5>), instead, because you like the way it looks.
Or, you want to display a list, but don't like the way the default lists look. So, instead, you use a series of <p> tags and bullets at the beginning of each line.
In both these cases, the tags used aren’t properly conveying the meaning or organization of the content. Rather they are being chosen based on the styles they will display. This should be avoided. They are not semantically correct.
An average user may not notice that the underlying tags aren't semantic, but there are important reasons to use proper markup.
Accessibility
Semantic markup affects the accessibility of a page. A sighted user may not notice that a web page is marked up semantically, but those using assistive technologies will.
Screen readers, for instance, will parse the HTML to discern the hierarchy of the document so it can pass the content along to the user. If heading tags are used incorrectly, or lists aren’t tagged as such, it can make it difficult or impossible for a user to understand the page, or find what they’re looking for.
Web Crawlers
Similarly, web crawlers (such as those used by search engines) use HTML tags to decipher what a page is about and how relevant it is to a particular search.
Proper semantic markup allows these non-human agents to more accurately understand the page and its content–to find the significant pieces of information and process them appropriately.
Semantics First, Then Styles
This isn't to say that the style of the webpage isn't important. It is. But the styling should be done separately from the markup.
There is a concept known as the "separation of concerns": HTML is concerned with the organization and meaning of the content while CSS is concerned with the style and presentation of the content. Using CSS, website creators can specify how each of these tags should look, without changing the underlying markup.
CSS Zen Garden is the classic illustration of how this works. Each of the hundreds of styles share the exact same underlying HTML, but employ a unique CSS theme. With CSS, you can specify the colors, typefaces, heading styles, and much more without affecting the markup.
Because the style of the page is controlled independent of the HTML, you can have semantically correct markup, and it can look the way you want.
If you’re using semantic markup, but want the page to have a different style than what you are seeing, we can help. We can add in the necessary CSS, without sacrificing the semantics of the markup. By focusing first on using HTML properly, you ensure your page will be both understandable by web crawlers and accessible to all your visitors.