Inline Elements 2009 Karl Kasischke WCC INP 150 Winter 2009 1
Inline Elements Emphasizing Text Increasing / Decreasing Text Size Quotes and Citations Code, Variables, and Sample Output Spanning Text Subscripts and Superscripts Teletype Text Inserted and Deleted Text Acronyms and Abbreviations Definitions User Input Deprecated Inline Elements 2009 Karl Kasischke WCC INP 150 Winter 2009 2
Tags that surround text content Extend only as far as their content Do not create extra vertical space on the lines above/below Do not force content that follows to new lines 2009 Karl Kasischke WCC INP 150 Winter 2009 3
Can be nested inside other inline tags Block-level tags cannot be nested inside (</ inline tags (except <br XHTML 1.0 Strict requires all inline tags be inside a block-level container element 2009 Karl Kasischke WCC INP 150 Winter 2009 4
Boldface <b> </b> Presentationally-focused do not use <strong> </strong> Device chooses how best to render content Desktop browsers render as boldface Neither of these is deprecated 2009 Karl Kasischke WCC INP 150 Winter 2009 5
Italic <i> </i> Presentationally-focused do not use <em> </em> Device chooses how best to render content Desktop browsers render as italics Neither of these is deprecated 2009 Karl Kasischke WCC INP 150 Winter 2009 6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>emphasis in (X)HTML</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <p>some text in this paragraph <strong>shows strong emphasis</strong> and other text is <em>just emphasized</em>.</p> </body> </html> 2009 Karl Kasischke WCC INP 150 Winter 2009 7
( huge ) Sizes range from 1 (tiny) to 7 Default text size is 3 <big> </big> Increases text one size larger than surrounding text <small> </small> Decreases text one size smaller than surrounding text Many sites use the deprecated <font> </font> CSS is always preferred 2009 Karl Kasischke WCC INP 150 Winter 2009 8
Used to mark up quoted material Different than blockquote <q> </q> Short quotations Some browsers add quotation marks Different languages could display differently Has a cite attribute with URL or text value <cite> </cite> person who said it, or other reference document Usually renders in italics 2009 Karl Kasischke WCC INP 150 Winter 2009 9
<p> <cite>jason Withrow</cite> has been known to say: <q>separate structure and presentation in your code!</q></p> <p><cite>jason</cite> also has quoted others: <q>my students usually say <q cite= Karl Kasischke >Web design is fun!</q> and I agree.</q> </p> 2009 Karl Kasischke WCC INP 150 Winter 2009 10
<code> </code> Used to mark up a piece of computer code usually rendered in a monospace font <var> </var> Used for a variable that appears as page content Usually italicized <samp> </samp> sample output from computer code Usually rendered in a monospace font 2009 Karl Kasischke WCC INP 150 Winter 2009 11
<p>the variable <var>x</var> was defined in this Javascript:</p> <code>var x = 'Hello World!';</code> <p>and so the result was:</p> <samp>hello World!</samp> 2009 Karl Kasischke WCC INP 150 Winter 2009 12
<span> </span> Generic inline tags with no browser defaults for appearance Used when no other tag is appropriate and some markup is needed for text Typically styled using CSS 2009 Karl Kasischke WCC INP 150 Winter 2009 13
Some content needs subscripts or superscripts mathematical and scientific information Footnotes Changes vertical spacing a bit <sub> </sub> Subscript: H 2 O <sup> </sup> Superscript: a 2 + b 2 =c 2 2009 Karl Kasischke WCC INP 150 Winter 2009 14
<p>al Gore<sup>4</sup> is a proponent of reducing CO<sub>2</sub> emissions.</p> Al Gore 4 is a proponent of reducing CO 2 emissions. 2009 Karl Kasischke WCC INP 150 Winter 2009 15
<tt> </tt> Rendered in a monospace font Not deprecated, it is presentational in nature Using CSS with <span> is preferable 2009 Karl Kasischke WCC INP 150 Winter 2009 16
Used to show edits in a document <ins> </ins> Generally rendered as underlined text <del> </del> Generally rendered with line through the text 2009 Karl Kasischke WCC INP 150 Winter 2009 17
cite Contains URL for explanation of change Value: text Default: none Not deprecated datetime Date and time the change was made ( YYYY-MM-DD ) Value: date Default: none Not deprecated 2009 Karl Kasischke WCC INP 150 Winter 2009 18
title attribute can also be used to show explanation of change Values for cite and datetime are shown in some browsers by right-clicking and selecting 'Properties 2009 Karl Kasischke WCC INP 150 Winter 2009 19
<p>xhtml is used for <ins cite="http://www.w3.org/markup/" datetime="20060515">structural</ins> <del datetime="20060515"> presentational</del> markup. </p> 2009 Karl Kasischke WCC INP 150 Winter 2009 20
<acronym> </acronym> <abbr> </abbr> Some browsers render with dotted underline Use a title attribute to show full text Helpful for accessibility (e.g. screen readers) Acronym tag deprecated in latest version of XHTML after much debate 2009 Karl Kasischke WCC INP 150 Winter 2009 21
<p><acronym title="washtenaw Community College">WCC</acronym>'s address is: 4800 <abbr title="east">e.</abbr> Huron River <abbr title="drive">dr.</abbr> <abbr title="post Office">P.O.</abbr> Box D- 1 Ann Arbor, <abbr title="michigan">mi</abbr> 48106</p> 2009 Karl Kasischke WCC INP 150 Winter 2009 22
Used for a term the first time it is used in a document <dfn> </dfn> Generally rendered as italicized text Title attribute often used to hold the definition <p><dfn title="cascading Style Sheets">CSS</dfn> stands for Cascading Style Sheets.</p> 2009 Karl Kasischke WCC INP 150 Winter 2009 23
Indicates text to be entered by the user (via ( keyboard the <kbd> </kbd> Generally rendered in a monospaced font <p>to proceed, please enter <kbd>continue</kbd>.</p> 2009 Karl Kasischke WCC INP 150 Winter 2009 24
font basefont strike s u Never use these tags Be aware of them. You might see them in old websites Know how to replace them with better tags 2009 Karl Kasischke WCC INP 150 Winter 2009 25
<font> </font> Sets the font face, size and color Still found in many sites Better approach: CSS applied to a structural tag 2009 Karl Kasischke WCC INP 150 Winter 2009 26
<basefont /> Sets the font appearance for the entire page Uses same attributes as <font> tag Used inside <head> tag Better approach: CSS applied to <body> 2009 Karl Kasischke WCC INP 150 Winter 2009 27
<strike> </strike> Renders text with a line through it Better approach: There is a CSS property that does this 2009 Karl Kasischke WCC INP 150 Winter 2009 28
<s> </s> Renders text with a line through it Better approach: There is a CSS property that does this 2009 Karl Kasischke WCC INP 150 Winter 2009 29
<u> </u> Renders text with an underline Users expect underlined text to be a link Better approach: There is a CSS property that does this 2009 Karl Kasischke WCC INP 150 Winter 2009 30
Practice with Inline Elements 2009 Karl Kasischke WCC INP 150 Winter 2009 31