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<sup>nd</sup>, 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<sub>2</sub>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>
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>
