Lecture 4: Block-Level Elements, Part II

Overview:

Horizontal Rules
Blockquotes
Unordered Lists
Ordered Lists
Definition Lists
Addresses
Preformatted Text
Standard Attributes
Deprecated Block-Level Elements

Horizontal Rules

Coded as <hr />, these tags create a horizontal (left to right) line that by default stretches across the entire width of their parent element.
Just like <br />, these tags are self-terminated. They cannot contain other tags or any text content.
Horizontal rules will have margin space above and below them, but the amount of this varies by browser. Cross-browser testing is recommended, to ensure that the result is acceptable.

Attribute	Usage and Effect	Values Accepted	Default	Deprecated?
align	Horizontally aligns the rule within its parent element. Please note that this has no impact if the default width of 100% is being used.	left \| center \| right	left	Deprecated
noshade	Disables the default three-dimensional visual shading effect, which is usually too small to see at the default size.	noshade="noshade"	Shading occurs by default	Deprecated
size	Determines the height of the line.	Pixel value	Usually a few pixels; varies a bit by browser	Deprecated
width	Determines the width of the line.	Pixel value or percentage value	100%	Deprecated

Sample code:

<!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>Horizontal Rules in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p>A horizontal rule with all the defaults being used:</p>
    <hr />

    <p>A horizontal rule with alignment, size, and width specified:</p>
    <hr align="right" size="5" width="200" />

    <p>A horizontal rule with alignment, size, width, and
    noshade specified:</p>
    <hr align="center" noshade="noshade" size="5" width="50%" />
</body>
</html>

Note: When specifying a numerical value in (X)HTML pixels are assumed, so just the number needs to be specified. In some cases percentages are allowed and the % character is necessary.

See how this example renders

Blockquotes

This structural tag is used for block quotations and is coded as <blockquote> </blockquote>
Blockquotes have default spacing on all sides (margins above and below, plus indenting on the left and right sides)
As a result of the default spacing, some web developers have misused this tag by putting their entire layout/content inside of it in order to get the free "indenting". Such a practice is strongly discouraged.
If the cite attribute is provided, right-clicking on the block quotation and selecting \'Properties\' will display that citation in the Gecko-based browsers

Attribute	Usage and Effect	Values Accepted	Default	Deprecated?
cite	Contains the URL of the cited text.	Text (usually a web address)		Not deprecated

Sample code:

<!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>Blockquotes in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p>A direct quotation from INP 150:</p>

    <blockquote cite="http://www.examples.com">
    We love XHTML!
    </blockquote>
</body>
</html>

See how this example renders

Unordered Lists

Unordered lists are coded as <ul> </ul> and are used for a group of items that do not possess a natural sequencing or priority
Each item in the list is surrounded by <li> </li>
The <ul> </ul> tags have a line of space above and below them (on the top and bottom of the list); the actual list items are on separate lines but there is no extra vertical space between them.
Be careful when nesting lists that the nested <ul> </ul> be entirely within the <li> </li> holding it.

Attribute	Usage and Effect	Values Accepted	Default	Deprecated?
compact	Instructs the client device to render the list in a more compact fashion; results vary by browser. Specified at the <ul> level.	compact="compact"	No compacting occurs	Deprecated
type	Determines whether discs (solid bullets), circles (hollow bullets), or squares are used for the list items. If specified in a <ul> affects the entire list; if specified in an <li> will only affect that one item (and will override the <ul> setting).	disc \| circle \| square	First-level lists default to disc, second-level default to circle, third-level and lower default to square for most browsers; Opera always uses disc as the default	Deprecated

Sample code:

<!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>Unordered lists in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p>An unordered list using all defaults:</p>
    <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>

    <p>An unordered list set to display as circles:</p>
    <ul type="circle">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>

    <p>An unordered list set to display as squares:</p>
    <ul type="square">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>

    <p>A three-level series of unordered lists using all defaults:</p>
    <ul>
        <li>List Item</li>
        <li>List Item
            <ul>
                <li>Sub-Item (Level 2)</li>
                <li>Sub-Item (Level 2)
                    <ul>
                        <li>Sub-Item (Level 3)</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>List Item</li>
    </ul>

</body>
</html>

See how this example renders

Ordered Lists

Ordered lists are coded as <ol> </ol> and are used for a group of items that have a natural sequencing
Each item in the list is surrounded by <li> </li>
The <ol> </ol> tags have a line of space above and below them (on the top and bottom of the list); the actual list items are on separate lines but there is no extra vertical space between them.
Be careful when nesting lists that the nested <ol> </ol> be entirely within the <li> </li> holding it.

Attribute	Usage and Effect	Values Accepted	Default	Deprecated?
compact	Instructs the client device to render the list in a more compact fashion; results vary by browser. Specified at the <ol> level.	compact="compact"	No compacting occurs	Deprecated
start	Specifies the number at which the list will start. Cannot be specified in an <li> and must be specified in an <ol> (if used).	Number (e.g., 5)	1	Deprecated
type	Determines what numbering approach is used for the list items. If specified in a <ol> affects the entire list; if specified in an <li> will only affect that one item (and will override the <ol> setting).	1 \| a \| A \| i \| I	1	Deprecated
value	Specifies the number to be used for a list item; must be specified in <li> (if used).	Number (e.g., 5)		Deprecated

Sample code:

<!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>Ordered lists in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p>An ordered list using all defaults:</p>
    <ol>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ol>

    <p>An ordered list set to display as lowercase roman numerals and
    starting at a value of 3:</p>
    <ol type="i" start="3">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ol>

    <p>An ordered list set to display as uppercase letters, with a
    change in value for one item:</p>
    <ol type="A">
        <li>List Item</li>
        <li>List Item</li>
        <li value="10">List Item</li>
    </ol>

    <p>A three-level series of ordered lists using all defaults:</p>
    <ol>
        <li>List Item</li>
        <li>List Item
            <ol>
                <li>Sub-Item (Level 2)</li>
                <li>Sub-Item (Level 2)
                    <ol>
                        <li>Sub-Item (Level 3)</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>List Item</li>
    </ol>

</body>
</html>

See how this example renders

Definition Lists

Definition lists are used for defining terms. As an example, these would be appropriate for glossaries.
The outermost tags are <dl> </dl>
Within the definition list are tags for the defined term (coded as <dt> </dt>) and its description (coded as <dd> </dd>)
The <dl> </dl> render with a line of space above and below.
The <dt> </dt> tags typically have their content left-aligned. These tags cannot contain block-level elements.
The <dd> </dd> tags typically have their content indented and on the line immmediately below the defined term. These tags can contain block-level elements.

Attribute	Usage and Effect	Values Accepted	Default	Deprecated?
compact	Instructs the client device to render the list in a more compact fashion; results vary by browser. Specified at the <dl> level.	compact="compact"	No compacting occurs	Deprecated

Sample code:

<!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>Definition Lists in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <h1>Glossary</h1>

    <dl>
        <dt>XHTML</dt>
        <dd>Extensible Hypertext Markup Language, the structural
        markup of a web page</dd>
    </dl>

    <dl>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets, which determines the
        presentation of a web page</dd>
    </dl>
</body>
</html>

See how this example renders

Addresses

Coded as <address> </address>, this is used to mark up contact information.
There are no specialized attributes for this tag.
Browsers typically render the address on a new line and italicize the content. Content following </address> appears on the next line.
Be careful not to nest this inside <p>, as a validation error will result and rendering issues will arise. Nesting inside <div> is fine.

Sample code:

<!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>Addresses in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    Contact Jason Withrow at: <address>jwithrow@wccnet.edu</address>
</body>
</html>

See how this example renders

Preformatted Text

Preformatted text is surrounded by <pre> </pre> tags.
What makes preformatted text unique is that white space inside the tags is preserved, rather than being collapsed down to a single space maximum between characters (as in regular code).
Preformatted text also does not wrap to new lines when the browser window is reduced in size; a horizontal scrollbar appears (if necessary).
Browsers also put a line of space above/below preformatted content and render preformatted text in a monospace font (so that all characters are equal width).
Preformatted text is used in a variety of situations. Code examples in these lectures are preformatted text, for example. Another example would be a poem where spacing was an important aspect of its message.

Attribute	Usage and Effect	Values Accepted	Default	Deprecated?
width	This is supposed to instruct client devices concerning how many characters wide the preformatted block is supposed to be, so that the device can make any adjustments necessary to font size, etc. There is minimal browser support for this, so its use is discouraged.	A number representing the amount of characters wide (e.g., 200)		Deprecated

Sample code:

<!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>Preformatted Text in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <pre>
    Just a quick example...

    ...to show how preformatted text renders
    </pre>
</body>
</html>

See how this example renders

Standard Attributes

These attributes can be used in essentially all (X)HTML tags valid inside of <body> (including <body> itself).
None of these attributes are deprecated.

Attribute	Usage and Effect
class	Used in CSS and can be specified as many times per page as desired.
dir	Indicates text directionality, with values of LTR (left-to-right) or RTL (right-to-left). If supportive, the client device should reverse the text sequence. When applied to tables, the sequence of columns in the table invert / flip.
id	Unique value used once per web page. Factors into some accessibility enhancements, CSS, and JavaScript.
lang	Language used for content in that tag. The xml:lang attribute can also be specified, if XML processing is occurring. Consult ISO standard 639 for 2-letter values.
style	Used to specify CSS directly in that tag.
title	Provides additional information about the content in that tag. Modern browsers render as a tooltip.

Deprecated Block-Level Elements

These tags have been deprecated either because of their presentational nature (since XHTML is supposed to be about structure, not presentation) or because another tag exists that takes their place.
These are tags you should never use, but you will see them in a number of websites so you should recognize them. If asked to update a website using these deprecated tags you should also know how to replace them with more acceptable approaches.

Element	Usage and Effect	Preferred Approaches
<center> </center>	Centers content inside; will often be found surrounding the entire layout.	CSS is the ideal approach; until we get there using align="center" inside <div> is preferred.
<dir> </dir>	This was supposed to be used for multicolumn directory lists and is structured the same way. Should render like an unordered list.	Use <ul> </ul> instead.
<menu> </menu>	This was supposed to be used for single column menu lists and is structured the same way. Should render like an unordered list.	Use <ul> </ul> instead.