This document provides an overview of various HTML5 elements for marking up different types of text and content. It describes elements for paragraphs, quotes, citations, abbreviations, code samples, measurements, and more. It explains how each element should be used and provides examples of code using these elements.

1. Text in HTML5
HTML5 & CSS Visual QuickStart Guide
Chapter 4

2. The Importance of Text
• Unless your site is heavy on videos or photo galleries,
most of your content will be text
• Text to describes your company or yourself
• Text to list product features
• Information about something you want to share with your audience
• HTML5 tags for text are not designed to control how the
content will look
• That’s the job of CSS!
• HTML elements should describe the content
• If something should be emphasized, use the <em> element
• If you are citing another source, use the <cite> element
• If the browser styles the content for you, that’s just a bonus

3. Starting a New Paragraph
• We’ve already established, HTML ignores extra returns or
other white space
• To start a new paragraph, you use the <p> element
• <p>Many tourists are drawn to Barcelona to see
Antoni Gaudi’s incredible architecture.</p>
<p>Barcelona celebrated the 150th anniversary of
Gaudi’s birth in 2002.</p>
• To change how the paragraphs look, you can use styles
to:
• Change the font
• Set a particular font size
• Set the color

4. Adding Author Contact Information
• The <address> element defines contact info for author,
people, or organization relevant to the HTML page
• This usually appears at the end of the page
• You can have more than one <address> element in your
page.
• Use it by enclosing the contact information in the opening
and closing <address> tags
• <address>
Email her at <a href=“mailto:traceyw@thepaperofpapers.com”>
traceyw@thepaperofpapers.com</a>
</address>
• Most browsers will render the <address> element in italics
by default

5. Creating a Figure
• Charts and graphs are commonly used in print
• Prior to HTML5, there was no element designed to
present figures like charts and graphs
• Developers often cobbled these together using <div> elements
• HTML5 presents the <figure> and <figcaption> elements
• <figure> marks up the actual figure, such as a chart or a graph
• <figcaption> is optional, and marks up the caption for your figure
• These elements are purely semantic; they won’t actually
add text or figures on their own
• Enclose images, data tables, videos, etc. within the <figure>
element

6. Specifying Time
• You can mark up precise time or calendar date with the
new <time> element
• Commonly used to indicate publication date of an
<article> element
• To do so, include pubdate attribute
• <p><time datetime=“2011-10-15”
pubdate=“pubdate”>October 15, 2011</time>
</p>
• The text inside the <time> element is optional, and
appears on the screen as a human-readable version of
the datetime value

7. The datetime Format
• The <time> element’s time is based on 24-hour clock
• Optional time-zone offset from UTC (Coordinated Universal Time)
• The datetime attribute provides date and time in
machine-readble format
• YYYY-MM-DDThh:mm:ss
• 2011-11-03T17:19:10
• Means November 3, 2011 at 10 seconds after 5:19 p.m. local time
• T separates the date and time
• Seconds field is optional

8. Marking Important and Emphasized
Text
• <strong> element denotes important text
• <em> element shows emphasis
• Can be used separately or together
• <em>under any circumstances</em>
• <strong>under any circumstances</strong>
• <p><strong>Warning: Do not approach the zombies
<em>under any circumstances</em>.</strong> They
may <em>look</em> friendly, but that’s just
because they want to eat your brains.</p>
• Browsers usually display <strong> text as bold, and <em>
text as italics.

9. Indicating a Citation or Reference
• If you need to cite or reference a source, use <cite> tag
• <p>He listened to <cite>Abbey Road</cite> while
watching <cite>A Hard Day’s Night</cite> and
reading <cite>The Beatles Anthology</cite>
• The <cite> element renders in italics by default
• Don’t use the <cite> element for a reference to a person’s
name! HTML5 explicitly declares this to be invalid
• (but previous versions of HTML allowed it)

10. Quoting Text
• Two elements for marking text quoted from a source
• <blockquote> represents a quote that stands alone
• Renders on its own line by default
• Will usually render indented, too
• <q> element is for short quotes, like those within a sentence.
• Renders in-line with the rest of the surrounding text
• Browsers are supposed to add curly double quotes around <q>
elements automatically, but not all browsers support this

11. Quoting Text (cont’d)
• <blockquote
cite=“http://www.marktwainbooks.edu/the-
adventures-of-huckleberry-finn/”
<p>we said there warn’t no home like a
raft, after all. Other places do seem so
cramped up and smothery, but a raft don’t.
You feel might free and easy and
comfortable on a raft.</p>
</blockquote>
<p>And then she said, <q>Have you read
Barbara Kingsolver’s <cite>High Tide in
Tucson?</cite> It’s inspiring.</q></p>

12. Quoting Text (cont’d again)
• You can nest <blockquote> and <q> elements
• The browser should automatically add a curly single quote around
a nested <q> element, but some browsers aren’t compliant
• <p>The short story began, <q>When she was a child, she
would say, <q>Howdy, stranger!</q> to everyone she
passed.</q></p>
• Because of the cross-browser issues with <q>, many
coders put in the quotation marks themselves. See
http://html5doctor.com/blockquote-q-cite/ for more
discussion on this

13. Highlighting Text
• Key words and phrases can be highlighted with the <mark>
element
• The semantic version of a highlighter pen
• Used to draw the reader’s attention to a particular segment of
text. For example:
• To highlight a search term when it appears in search results page or
article
• To call attention to part of a quote that wasn’t highlighted by the author
in its original form
• Browsers with native support of <mark> element display a
yellow background behind the text by default
• You can tell older browsers to do this using CSS
• <p>Remove the tray from the box. Pierce the
wrapper several times with a fork and cook on
High for <mark>15 minutes</mark>, rotating it
halfway through</p>

14. Explaining Abbreviations
• Use the <abbr> element to mark up abbreviations and
explain their meaning
• Only use this when you think it would be helpful for visitors to be
given the expanded meaning!
• You can use the optional title attribute to provide the
expanded version of an abbreviation
• Or, and some would say preferably, you could place the
explanation in parentheses after the abbreviation.

15. Explaining Abbreviations (cont’d)
• <p>The <abbr title=“National Football
League”>NFL</abbr> promised a laser show at
9 p.m. after every night game.</p>
• Firefox and Opera will put a dotted underline beneath
abbreviations with the title attribute.
• All browsers (except IE6, which you should never, ever use) show
the contents in a tooltip

16. Defining a Term
• <dfn> element marks the one place in document where
you define a term
• Do not wrap subsequent uses of the term
• Wrap <dfn> only around the term you’re defining, not the definition
• <p>The contestant was asked to spell
“pleonasm.” She requested the definition
and was told that <dfn>pleonasm</dfn> means
“a redundant word or expression.”</p>
• The <dfn> element renders italicized by some browsers
(but not all of ‘em)

17. Creating Superscripts and
Subscripts
• Superscripts: letters or numbers that are raised slighly
relative to the main body text
• 2nd
• Subscripts: letters or numbers that are lowered slightly
relative to the main body text
• H2O
• Mark these using <sup> and <sub> elements
• These elements will screw up your line height, but this
can be fixed using CSS
• http://necolas.github.com/normalize.css/
• https://gist.github.com/413930

18. Superscripts and Subscripts in Use
• <p>On February 2^nd, we will find
out whether or not spring will be along
soon.</p>
• <p>The deadliest chemical, one which you
cannot live without but can kill you in a
matter of minutes, has the chemical formula
H₂O.</p>

19. Noting Edits and Inaccurate Text
• If you want to mark up edits since the previous version of
your page, or mark up text no longer accurate or relevant,
you can do so using the <ins> and <del> elements
• <ul>
<li><del>2 desks</del></li>
<li>1 chalkboard</li>
<li><del>4 laptops</del></li>
<li><ins>1 bicycle</ins></li>
</ul>

20. More on Marking Inaccurate Text
• For text that is no longer accurate, you can use the <s>
element
• <ol>
<li><ins>2 p.m. (this show just
added)</ins></li>
<li><s>5 p.m.</s> SOLD OUT</li>
<li><s>8:30 p.m.</s> SOLD OUT</li>
</ol>

21. Marking Up Code
• If you provide code samples, file names, or program
names in your content, you should mark them as code
• <code> element indicates text is code or a file name.
• Is rendered as a monospaced font by default
• If you want to show a standalone block of code (outside of
a sentence), wrap the <code> element with a <pre>
element.
• <p>the <code>showPhoto()</code> function
displays …</p>

22. Marking Up Code (cont’d)
• <pre>
<code>
abbr[ title] {
border-bottom: 1px dotted
#000;
}
</code>
</pre>

23. Specifying Fine Print
• <small> element represents side comments, such as fine
print
• Might include disclaimers, caveats, legal restrictions, or copyrights
• Also used for attribution or satisfying license requirements
• Intended for brief portion of inline text
• <p>Order now to receive free shipping.
<small>(Some restrictions may apply.)
</small></p>
• <footer>
<p><small>&copy; 2011 The Super Store.
All
Rights Reserved. </small></p>
</footer>

24. Line Breaks and Spans
• Line Breaks
• We already discussed this
• <br /> element
• Spans
• No semantic meaning
• Used if you want to apply any of the following to a snippet of HTML
for which HTML doesn’t provide an appropriate semantic element
• Attributes, like class, dir, id, lang, title, etc
• Styling with CSS
• Behavior with JavaScript
• Use this as a last resort!
• <p>Gaudi’s work was essentially useful. <span
lang=“es”>La Casa Mila</span> is an apartment
building and <em>real people</em> live there.</p>

25. The <meter> Element
• New to HTML5
• Used to indicate a fractional value or a measurement
within a known range
• Voting results
• Number of tickets sold
• Numerical test grades
• Disk usage
• Not widely supported yet
• Only Chrome fully supports <meter>. Other browsers support it
inconsistently, or not at all
• Can by styled with CSS or enhanced with JavaScript to make it
somewhat workable in non-supporting browsers

26. The <meter> Element (cont’d)
• <p>Project completion status: <meter
value=“0.80”>80% completed</meter></p>
• <p>Car brake pad wear: <meter low=“0.25”
high=“0.75” optimum=“0” value=“0.21”>21%
worn</meter></p>
• <p>Miles walked during half-marathon:
<meter min=“0” max=“13.1” value=“4.5”
title=“Miles”>4.5</meter></p>
• No defined units of measure, but can use title attribute
to specify one
• Attributes for value, min, low, high, max affect how
meter gauge is displayed

27. The <progress> Element
• Used to show a progress bar
• Supported by Chrome, but not by many other browsers
yet
• <p>Please wait while we save your data.
Current progress: <progress max=“100”
value=“0”>0% saved</progress></p>
• <p>Please wait while we save your data.
Current progress: <progress max=“100”
value=“67”>67% saved</progress></p>