Click here to Skip to main content
15,038,451 members
Articles / All Topics
Technical Blog
Posted 2 May 2016

Tagged as

Stats

5.3K views

Text Level Semantics - Part 1

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
2 May 2016CPOL4 min read
Text Level Semantics - Part 1

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.)

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Level Semantics - Part 1</title>
</head>
<body>

<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>
</body>
</html>

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:

  1. 'HTML 5 is <em>awesome</em>'
  2. 'HTML 5 <em>is</em> awesome'
  3. '<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

The 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

The 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.

The 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 cite attribute.

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 q element.

The Cite Element

The 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.

The 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 cite element.

HTML
<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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Member 12485502
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 Pin
Member 123643904-May-16 21:20
MemberMember 123643904-May-16 21:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.