Skip to content

HTML5 Changed Elements

Changes

As well as the well-documented additions to the HTML5 spec, a number of elements have had their meanings changed to reflect the changes in the way websites are built and also some previously deprecated elements have been brought back so to speak and now have valid, semantic meaning, allowing us to use the b, i and s elements again without the need to feel dirty whilst we do so!

A list of the changed elements is listed below:

a

The anchor elements changes in the manner that block-level links are now valid code. This has been supported in browsers for a while, but is now valid. Also, using the name=”#id” convention is now obsolete which was typically used for in page navigation. Instead, apply this technique to it’s containing element. The target attribute is now no longer deprecated “as it useful in Web applications, particularly in combination with the iframe element.”

The media attribute is new and can be used in conjunction with CSS media queries.

b

The b element has changed from the presentational meaning of bold text to “offset text conventionally styled in bold”. This doesn’t appear to be a massive shift in definition but is a way of separating out content from it’s surroundings without providing any extra meaning. The em and strong attributes embolden the text but provide emphasis on the text, whereas the b element has no extra meaning and is useful in a range of situations.

cite

The cite element refers to the title of a cited work, and not an individual as previously defined. Cite should not be used to mark up a person’s name and instead refers to title of work, ranging from a document to music to games or in fact anything that is referenced in a document.

hr

The hr element used to be a purely presentational element which was used to insert a horizontal line on the page, though it has now been given the meaning of a “paragraph level thematic break”. This means that it can be used to break up a paragraph or to indicate a change in content – it can be used to provide a transition between content within a document and provides a link between the two.

i

The I element is similar in meaning to the b element in that it used to be a purely presentational element and now represents text that is offset from it’s surroundings but provides no extra emphasis. Anything that is usually presented in italics, but requires no emphasis then the I element should be used and there is no need for extra spans messing up your markup.

menu

The menu element has changed from a “single column menu list” to specifically referring to a list of commands. Potentially more useful in web applications as opposed to traditional websites, the type attribute declares whether it is a toolbar or a context menu. If no type is defined, then it represents commands that are neither a toolbar or context menu.

s

The s attribute was a purely presentational method of applying a line-through to text, however this has been changed to be given the semantic meaning of “struck text”, which is text that is no longer accurate or relevant. An example of this would be previous prices on e-commerce sites, I’ve been using this element to mark these up and has the benefit of more semantic meaning and no need for presentational span elements.

small

The small element was also a presentational element which referred to text which was to be rendered as small. This has now changed to be given the semantic meaning of “small print” and refers to content such as copyright notices, or links to the development company of the website.

All of these elements valid code that can be used today in practice without fear and with the benefits of reducing mark up and the need for styling additional span elements which add clutter to our markup and also provides more structured, semantic meaning to our code.

An excellent html resource and a great place for keeping track of the changes is in fact the HTML working draft, which is available on the W3 site

Thanks to David Reece for the photograph.

© 2019 Graeme Pirie