Text in HTML5HTML5 & CSS Visual QuickStart GuideChapter 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
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
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@example.com”> firstname.lastname@example.org</a> </address>• Most browsers will render the <address> element in italics by default
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
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
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
Marking Important and EmphasizedText• <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.
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)
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
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>
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
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>
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.
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
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)
Creating Superscripts andSubscripts• 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
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>
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>
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>
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>
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
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>
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.