Text is an important part of any document and is the fundamental building block for most web sites.
In this blog post, I will be outlining some of the elements that can be used to make text more expressive. As you can see in the below example, it's possible to make some very different effects in HTML5 using very little markup. (I am using Chrome 47 for the example below.)
<title>Text Level Semantics - Part 1</title>
<p>This is some plain text</p>
<p>This is some text with <em>emphasis</em></p>
<p>This is some text with the <strong>important part highlighted</strong></p>
<p><small>This is some small print</small></p>
<p><s>This is some incorrect text</s></p>
<p><q>This is a quote from a book</q> - <cite>The Author</cite></p>
The above example shows 6 different text level semantics. (7 including plain text).
The simplest type of text is plain text. It has no semantic meaning other than it is text. I have placed the plain text (and all other pieces of text) inside a
p (paragraph) element, which unsurprisingly represents a paragraph in a document.
The Emphasis Element
The second example is the
em (emphasis) tag which represents the emphasis or stress of a sentence.
An example would be the difference between:
- 'HTML 5 is <em>awesome</em>'
- 'HTML 5 <em>is</em> awesome'
- '<em>HTML 5</em> is awesome'
Number 1 might be said when someone first discovers all of the amazing things you can do in HTML 5.
Number 2 might be said during a debate between friends after someone has stated that HTML 5 isn't awesome.
Number 3 might be said during a discussion after someone states that HTML 4 is awesome.
By moving the emphasis to different parts of the sentence, it can dramatically change the meaning of the sentence; based on contextual information.
The Strong Element
The third example demonstrates the strong element which represents importance, seriousness or urgency.
In the example, I highlighted the part that I wanted the eye to be drawn to first (the important part).
The strong element can be nested which has the semantic meaning of making each deeper level more and more important.
The Small Element
The small element represents side comments such as disclaimers and caveats.
A simple way of thinking about it is if it doesn't relate to your main topic directly but you need to include it for other reasons (legal requirements, etc.), then use the small element.
An example of when you might want to use the small element would be if you have a website promoting a children's toy. 'Batteries Not Included' would be the perfect situation to use the small element.
Another example would be using the small element around the copyright information of your page.
The S Element
s element represents content that is no longer accurate or relevant.
If a product was on sale, you could use the
s element to show the original price; which is now obsolete. And then have the new element in a strong element.
It's important to note that the
S element shouldn't be used for indicating removal from a document instead the
del element should be used for that.
The Q Element
q element represents a quotation.
As you can see from my example above, you do not need to include quotation marks (and in fact shouldn't include them) as the web browser or user agent will insert them for you.
q element has an optional
cite attribute which links to the source of the quote. The
cite attribute must be a valid URL; if the citation does not have a URL, then do not use the
The specification says that the
Q element is completely optional and it's just as correct to put quotation marks around quotes so don't feel that you have to wrap every quote in a
The Cite Element
cite element represents a reference to a creative work. In the example above, I paired it with the
q element but it's perfectly valid to have it by itself.
cite element must include the title, the name of the author or a URL Reference to a creative work.
In the example above, I used it to represent the name of the author, but I could have also put the name of the book or a link to a web page.
It's important to stress that any creative work can be used inside a
<p>This is me talking about <cite><
a href="http://gamejolt.com/games/the-guild-master/114622">The Guild Master</a></cite>
which is a small game that <cite>James Flanagan</cite> made.
I could equally talk about <cite>The Guild Master: Adventures</cite>
which is a TV show based on the game (its not really)</p>
And that wraps up the first post on Text Level Semantics.