A Look at Text-Level HTML Semantics

The Mac Attack — Tue, 08 Mar 2011 06:42:40 +0000

It’s amazing what you can discover by actually reading the W3C’s specification documents. I would assume that most web-developers-in-training actually don’t do this. It’s a shame though, as many other resources don’t give you the full picture on what the capabilities of the HTML standard is.

I’ve been looking into text-level semantics recently, browsing over the relevant HTML5 specification document. As a result, I thought I’d share some information on text-level elements that you probably weren’t aware of.

The Element

Knowing when to use or – and similarly, instead of – can be somewhat confusing, and result in debate amongst developers. Many people act as if and are deprecated, and should be avoided. However, they are far from deprecated: each remains with its own distinct legitimate application that’s important to recognise.

Firstly, let’s consider the element. should be used for stress emphasis. Think of it as making a point or giving a particular impacted meaning to a word or phrase. The use of this changes the meaning of the enclosed text, but does not change the importance.

An example given by the W3C is refuting a claim made by someone else. Consider the following:

John said that our local government spending has has tripled over the past few years. Spending has actually halfed!

The second sentence here has been stressed through the use of .

Something you may not have known as well is that , amongst other text-level elements, can be nested. Consider the following:

John said that our local government spending has has tripled over the past few years. Spending has actually halfed!

In the above, because ‘halfed’ has been encased in another element, it receives additional emphasis. In terms of browser rending though, you’re unlikely to see a difference unless you specify what an inside an should look like in your CSS.

The Element

The element and element are often confused, understandably, due to browsers rendering them both in italics as default. should represent text that’s somehow in a different voice or mood from the surrounding text. It might be a technical term, a phrase from another language, a thought or anything else that’s typically emphasised.

Consider the following examples:

It has a certain Je ne sais quoi to it, you could could say.
Surely they weren't speaking about me, Jared thought.

You’ll notice in the above that the text encompassed in holds a slightly different voice to the text around it, but does not place emphasis on the text.

The Element

To indicate strong importance of your text, should be used. Similarly to , can also be nested to add additional importance to a piece of text that’s already strong. Consider the following:

Warning: this substance is highly corrosive.

In this example ‘highly corrosive’ carries additional importance in an already important piece of text.

Note that unlike , does not change the meaning of a sentence.

The Element

Like the relationship between the and elements, the use of is often debated against .

The elements should be used to indicate text that is stylistically offset from surrounding text, without adding extra importance. You might use it to stylistically mark the first paragraph of a news item or indicate a product name, as in the example below:

My favourite movie of all time is Citizen Kane.

is only recommended to be used a last resort, where no other element is appropriate.

The question remains though: if is purely about making some kind of presentational change, why does it even exist? Could the same effect not be achieved by using a and associated CSS?

I don’t have an official answer on the issue, but my thinking is this: screen readers and the like would still need some way to identify this text as being different from the text that surrounds it. carries no meaning with it, and so a screen reader would not know that the text inside is any different: using however, the difference will be indicated.

The Element

The element should be used for side comments: like the name suggests, think of it as being like the ‘small print’. Note that if this is used within or , it won’t affect their emphasis or importance.

The ~~Element~~

The element should be used to indicate information that is no longer accurate or relevant. It’s important to note though it does not represent a document edit (as and would do). A common example might be a change in price of a product.

The Element

can be used to indicate the title of a work. The text within should be the exact name of the referenced work e.g. HTML> rather than Wikipedia's article on HTML.

It’s important to note that should not be used on a person’s name (e.g. an author of a book), and nor should it be used for quotes ( should be used in that case). To mark a person’s name along with , the W3C suggests using the element.

The Element

The element can be used to indicate quotes that originate from another source. If you’re going to use this, be sure not to include the quotation marks one would normally write. The browser will output these for you.

The element comes with a cite attribute that can be used to indicate the source of the quote. This should be a URL to the source.

Quotes can be used within quotes. Consider the following:

My uncle once said a man is someone who can stand up and say I am indeed a man

In the above, the inner set of quotes will be presented with single quotation marks, whilst the outer uses double quotation marks, as a default.

The Element

In your text, if you’re defining a term (giving meaning to some terminology), you can use the element to indicate which term is being defined in your text. The meaning should be given in the text that follows.

In music, scherzando means to perform lively and playfully.

In the example above the term is indicated, and then immediately defined afterwards.

The Element

This element is now a catch-all for indicating abbreviations, initialisms and acronyms. Acronyms are now included here rather than as they were thought to be too confusing for developers to use correctly.

A title attribute can be used to indicate the full text that has been shortened, as in the following example:

My main area of expertise is HTML.

The Element

One of the elements new to HTML5, is used for indicating precise dates. It cannot be used to indicate inexact time periods e.g. the Mesozoic Era, the 90s, or ‘Yesterday’.

I would recommend looking at the specification on to get a further understanding of it’s use.

The Element
can be used to represent a fragment of computer code. It could an actual snippet of code, or even something like a HTML tag, a file name, a computer program or anything else a computer might recognise. For example, you might represent a tag as . Should you be indicating something programmed in a particular language, there is no formal way of indicating what language that is. The Element A variable can be represented by the element. It can be a mathematical variable, a programmatic variable, or anything else that might be a placeholder e.g. We're going to meet at the XYZ Company offices. The Element represents sample output from a program or computer system e.g. the browser read HTTP 404: Not Found. The Element can be used to represent user input – it is not restricted to keyboard input however, as voice input, and a sequence of mouse clicks might also be acceptable. When used inside , will represent input that was given by the user, and then outputted back to them in some form. can be nested: doing so represents a single unit of input or a key e.g. F12. The and Elements These represent superscript and subscript respectively. There’s not much to speak of with these, but take care to avoid using them as a means of achieving an inappropriate presentational effect. The Element The element can be used to indicate text that’s marked or highlighted for reference purposes. The marked text should be relevant in some other context than that of the presented text. It should be something that has relevancy to the current user in an outside context. An example might be indicating search terms in a document the user searched for. When used in combination with a quote, it indicates something that wasn’t originally marked and may be under scrutiny. The and Elements The element is used to hold text isolated from its surroundings, which could be either in a left-to-right format, or in a right-to-left format e.g. in Arabic. is useful when working with user-generated content that could go in either direction. is similarly used for text direction, yet explicitly indicates the direction through its DIR attribute (values ‘ltr’ or ‘rtl’). The Element The element is quite well known as representing a line break. However, something interesting to note here is that the styles for this can theoritically be overwritten so that the browser renders this ‘line break’ in a different way e.g. just by generating a space. The Element This element indicates acceptable places within a word that the browser can break a line at. Consider the example below: Supercalifragilisticexpialidocious Should the browser not have the necessary space to fully output the word within one line, it can carry the word over in to the next line at any of the opportunities marked with . In Closing Even though many of these elements have existed for quite a while, it’s only now that we’re starting to take note of the significance of semantic markup. Knowing the above will hopefully allow you to make some smarter choices when marking up your content and help contribute to the Semantic Web.

The Mac Attack

A Look at Text-Level HTML Semantics

The Element

The Element

The Element

The Element

The Element

The Element

The Element

The Element

The Element

The Element

The Element

The `Element`

The Element

The Element

The Element

The and Elements

The Element

The and Elements

The Element

The Element

In Closing

Conditional Comments Quick Tip

Another WordPress Blog