Block-Level Elements, Part 2

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 vertical space varies by browser. Cross-browser testing is recommended to ensure that the result is acceptable, with CSS being used to adjust the space as necessary.

Horizontal Rule Example:

See the Pen Horizontal Rules by Jason Withrow (@jwithrow) on CodePen.

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

Blockquotes

• This structural tag is used for block quotations and is coded as <blockquote></blockquote>
• Blockquotes have default spacing on all sides (margins on all sides)

Blockquote Example:

See the Pen Blockquote by Jason Withrow (@jwithrow) on CodePen.

Unordered Lists

• Unordered lists are coded as <ul></ul>
• These contain one or more list items that do not possess a natural sequencing / ordering.
• Each list item is inside <li></li>
• The <ul></ul> tags have margin space above and below them (on the top and bottom of the list); the list items are on separate lines but there is no extra vertical space between them.
• Note: Be careful when nesting lists that the nested <ul></ul> is entirely within the <li></li> holding it.

Unordered List Example:

See the Pen Unordered List by Jason Withrow (@jwithrow) on CodePen.

Ordered Lists

• Ordered lists are coded as <ol></ol>
• These are used for a group of one or more list items that have a natural sequencing.
• Each item in the list is surrounded by <li></li>
• The <ol></ol> tags have a line of margin space above and below them (on the top and bottom of the list); the 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> is entirely within the <li></li> holding it.

Ordered List Example:

See the Pen Ordered List by Jason Withrow (@jwithrow) on CodePen.

Definition Lists

• Definition lists are used for defining terms.
• For 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 description (coded as <dd></dd>).
• The <dl></dl> render with a line of margin 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.

Definition List Example:

See the Pen Definition List by Jason Withrow (@jwithrow) on CodePen.

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.
• Note: Be careful not to nest this inside <p>, as a validation error will result and rendering issues will arise. Nesting inside <div> is fine.

Address Example:

See the Pen Address by Jason Withrow (@jwithrow) on CodePen.

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 rendering).
• Preformatted text also does not wrap to new lines when the browser window is reduced in size; a horizontal scrollbar appears for the browser window (if necessary).
• Browsers also render preformatted text in a monospace font (so that all characters are equal width; the browser has a default monospace font that is used).
• It is best to use preformatted text sparingly, given its downsides.

Preformatted Text Example:

See the Pen Preformatted Text by Jason Withrow (@jwithrow) on CodePen.

Standard Attributes

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

Deprecated Block-Level Elements

• These tags have been deprecated either because of their presentational nature (since HTML5 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 sometimes in existing code. If asked to update a website using these deprecated tags you should also know how to replace them with modern and standards-based approaches.