The HTML5 specification has made number of changes to support better formatting of text in web pages. In this article, we will take a look at some of the new and changed markup elements which deal with formatting.
Let’s start with the new markup element – wbr.
WBR Markup Element
The HTML5 specification describes the wbr element as an element which represents a line-break opportunity.
Source: http://www.w3.org/TR/html-markup/wbr.html#wbr
The wbr markup element is used to decorate text to help the browser to identify the location with it cab break to provide a sensible experience to the web user (instead of rendering the text using scroll bars)
The wbr markup element is a void element, which implies that it must have a start tag but must not have an end tag.
The wbr markup element can be contained in any phrasing element and supports all global attributes.
Since it is a void element, no contents are permitted.
Here is a simple HTML5 web page which shows wbr markup element in action.
//wbr.html
<!DOCTYPE html>
<html>
<body>
<header>
<h1>wbr demo</h1>
<p>Demo showing wbr markup element in action</p>
</header>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
AnAbosolutelyLOngWordWhichDoesNotMakeSenseButWeCanTakeABreakNow<wbr>TheLongWordContinuesHere
</body>
</html>
When the above code is rendered in browser, it shows that word contiguously.
Now, when we reduce the window size of the Google Chrome browser, you can see that the long word is broken into 2 lines at the location we tagged as “wbr”.
We can see above that the long word was broken into two lines and provides a reasonable experience to the reader.
Small markup element
The small markup element is not new to HTML5, but has changed a bit in the latest version. In the prior versions, it was defined only in presentational terms. With HTML5, small markup element is officially tagged as the markup element to be used to represent text which is usually called the “fine print” or “small print”.
Source: http://www.w3.org/TR/html-markup/small.html#small
The small markup element is a phrasing content and needs both the start tag as well as the end tag.
Here is a sample HTML5 code snippet which shows how small markup element works.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>small demo</h1>
<p>Demo showing small markup element in action</p>
</header>
<p>HTML Goodies</p>
<small>Copyright 2014</small>
</body>
</html>
When this is rendered in browser, you can see the size of “Copyright 2014” appears as fineprint.
CITE Markup Element
Like the small markup element, the cite markup element is not new to HTML5. Cite markup element is used to represent the cited title of a work. With previous versions of HTML, it could be used to mark up name of person, but that is no longer the case. Now, it is specifically targeted to represent the title of a work (work could be book, paper, essay, poem, score, song, script, film, TV show, game, sculpture, painting, theatre production, play, opera, musical, exhibition, legal case report, or other such work).
Source: http://www.w3.org/TR/html-markup/cite.html#cite
Cite markup element allows phrasing content to be included and requires both a start tag and an end tag. It can be contained in any phrasing element.
Here is a sample HTML5 code snippet which shows the cite markup in action
<!DOCTYPE html>
<html>
<body>
<header>
<h1>cite demo</h1>
<p>Demo showing cite markup element in action</p>
</header>
<p><cite>HTML Goodies</cite> by Fantastic WebDevs</p>
</body>
</html>
When the above HTML web page is rendered in Google Chrome, it shows the cited text in italics.
Summary
In this article, we took a look at the wbr markup element, which is new in HTML5, as well as some updated formatting elements like small and cite. I hope you have found this information useful.
About the author
Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
