Written by Harry Roberts on CSS Wizardry.
Table of Contents
- The
- The
- The
The
We should all be familiar with the element. It represents strong importance; where the content is more important than its surroundings. Here is is important because I am saying it is important that you know that I am not a programmer as was accidentally stated above.
The
The element has been redefined to represent small print and side comments. Here it is used to describe the picture above it. It’s usage is, luckily, fairly obvious. Any time you have supporting information for a larger piece, mark it up as a .
The
The once loathed element has been redefined in HTML5 to represent any text whose appearance is offset from its surroundings, often by means of bolding. There are occasions when you’d want bold text but without any extra importance, such as would add. I also use the element for marking up the origins of quotes, e.g.:
“
A lie gets halfway around the world before the truth has a chance to get its pants on.”
Sir Winston Churchill
The
The element is used to represent a mention of or reference to a body of work, such as a book, an article, a painting and more. It is not, according to the HTML spec, used for marking up the names of sources of quotes (as above, I use the element).
So whenever you reference a name of a film or song or website or sculpture or article, mark it up with the element.
The
I love the uppercase R in Helvetica.
The newly redefined element is another slightly confusing one. The usage is any piece of text that may be spoken with a slightly different inflection but bears no extra importance. The best way to tell whether you need the element or not is to say it aloud.
Here I’m marking up a single letter, because if I were to speak that sentence aloud the R would have a slightly different tone applied. The element can also be applied to full words and phrases.
The
My motto on web development is ‘Always code like you’re working in a team, even when you’re not.’
The element is simply used to mark up inline quotations; quotes that are in the context of surrounding copy.
The
I absolutely love the web.
Again, the element is one we should all be familiar with. It denotes stressed importance. If you read the example aloud you can see how the element adds inflection on the word love with importance.
The
Please note the width and overflow properties in the code below:
The element is very self-explanatory, it simply represents pieces of code.
N.B. There is a much larger array of elements used to denote code, inputs and outputs too detailed to go into here. Please refer to the HTML spec for these.
The
.wrapper{
width:940px;
margin:0 auto;
padding:10px;
overflow:hidden;
}
The element is a really nice new element introduced in HTML5. Its purpose is simply to highlight. You could highlight each occurrence of a search term in a search-results page as HTML5 Doctor do or–as I like to do–highlight specific references to code that is in a larger block. This allows me to give the code context, but also highlight the relevant snippet that I am talking about.
So there we have an array of highly semantic and really nifty text-level elements to use in your work; some old, some new, some modified but all useful.
There are more than I’ve outlined here, I may revisit the blog post and add them, but the ones I’ve covered are the ones I find most commonly occurring. In the meantime, why not give the HTML spec a quick read?
Leave a Reply