Castro Chapter 4

27
Text in HTML5 HTML5 & CSS Visual QuickStart Guide Chapter 4

Transcript of Castro Chapter 4

Page 1: Castro Chapter 4

Text in HTML5HTML5 & CSS Visual QuickStart Guide

Chapter 4

Page 2: Castro Chapter 4

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

Page 3: Castro Chapter 4

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

Page 4: Castro Chapter 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:[email protected]”>[email protected]</a></address>

• Most browsers will render the <address> element in italics by default

Page 5: Castro Chapter 4

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

Page 6: Castro Chapter 4

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

Page 7: Castro Chapter 4

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

Page 8: Castro Chapter 4

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.

Page 9: Castro Chapter 4

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)

Page 10: Castro Chapter 4

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

Page 11: Castro Chapter 4

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>

Page 12: Castro Chapter 4

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

Page 13: Castro Chapter 4

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>

Page 14: Castro Chapter 4

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.

Page 15: Castro Chapter 4

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

Page 16: Castro Chapter 4

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)

Page 17: Castro Chapter 4

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

Page 18: Castro Chapter 4

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>

Page 19: Castro Chapter 4

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>

Page 20: Castro Chapter 4

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>

Page 21: Castro Chapter 4

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>

Page 22: Castro Chapter 4

Marking Up Code (cont’d)• <pre>

<code>abbr[ title] {

border-bottom: 1px dotted #000;

}</code>

</pre>

Page 23: Castro Chapter 4

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>

Page 24: Castro Chapter 4

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>

Page 25: Castro Chapter 4

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

Page 26: Castro Chapter 4

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

Page 27: Castro Chapter 4

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>