A Look at New and Changed Formatting HTML5 Elements

By Vipul Patel

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



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date