posted on:June 26, 2009
How to properly speak HTM language
One of the cornerstones of web standards is semantics. For those confused with this term, semantics is meaning of the word, sentence or in our case – a piece of code. Producing meaningful code brings you closer to the idea of web standards.
To get familiar with the term “semantics” I will give you an example I’ve found on the web (but can’t remember where so I can’t link to it). The phrase I love New York has pretty straight forward meaning. If you replace the word love with one of those heart symbols the sentence will change for sure but the meaning will not. So sentences I love New York and I (heart) New York have the same semantic value.
Validation and Semantics
Although both are very important when we talk about web standards, I honestly believe that having semantically correct code is more important then have a valid code, at least up to a level where you don’t make huge errors in the code’s structure. I mean, I’d rather see you using proper heading structure and miss out to put rows and cols attributes on textarea then the other way around. People get so preoccupied with validation that they forget that it’s only a one step towards web standards.
Talking HTML properly
There are many tags in HTML and each has it’s meaning or purpose. First step towards learning to talk HTML is to get familiar with all these tags. Just as learning a foreign language, how many different words and phrases you know will define how eloquent you can be. I said can be because knowing all these tags is not guarantee by itself.
Knowing and understanding all of the tags is just the first step. Many of these tags are actually abbreviations or acronyms of the full words. Knowing what they stand for will help you in understanding and using them properly. Some of the tags mean:
- p – paragraph
- em – emphasis
- div – division
- td – table data
- th – table header
The second and equally important step is to use them properly. In order to do that, what we have to understand the content and write a markup that will follow it’s meaning.
How exactly can markup “follow” the content?
First example I would point out is proper heading structure. This is not important just form semantics point of view, it also defines a structure of the document. So, if something is meant to be a heading use:
<h2>This is my fancy title</h2>
and don’t use
<div class="largeTitle">This is my fancy title</div>
because you strip away it’s meaning – you’re ruining the semantics. Div defines a logical division of a content and it’s meant for structure so this would not apply even if this wasn’t a title.
So use divs for structuring a document only and not for text formatting.
Separate text blocks into paragraphs using p tag, do not use repetitive br to add spacing between text blocks.
For lists use one of 3 list elements, ordered, unordered or definition list. If you have doubts about using ordered or unordered lists see have in mind that ordered list have a ascending order (1,2,3… etc). So if you’re displaying most recent list item (descending order) at the top then the ordered list is not the best solution.
Use tables. Don’t avoid tables all together. I saw a calendar sample marked up as an unordered list, not the best choice. Calendars are not linear therefore can’t be displayed as a list.
One step further
You can also add more semantic value to your document by adding certain HTML elements that you may overlook at first. For instance, if you are talking about CSS and HTML you know that these are abbreviations, but you can let your browser know that too. The sentence:
<p>I am trying to get to become a better CSS coder.</p>
could look better and mean much more if you should use:
<p>I am trying to get to become a better <abbr title=”Cascading Style Sheets”>CSS</abbr> coder.</p>
<p>To style that line properly use class attribute like this class=”alt”. </p>
<p>To style that line properly use class attribute like this <code>class=”alt”</code>. </p>
Just as any other language HTML takes time and practice to learn and “speak” properly. So, take it one step at the time. Don’t feel bad about “missing the word” here and there, more important is that you understand the language and that you are familiar with the idea of web standards and what web semantics stand for.
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Comments (25 Comments)
Sorry, the comment form is closed at this time.