Lecture 3: Block-Level Elements, Part I
Overview:
Block-Level Elements
- Block-level elements are tags that occupy the entire horizontal (left to right) space within their parent element, which is the tag holding them. Many times the parent element is <body>, which means that the block-level element extends to the edges of the browser window.
- For this reason, the code that follows the closing tag of a block-level element moves to a new line. In other words, the content after a block-level element is further down the page. It has to be; there is no room left on the same line as the block-level element.
- In this lecture we examine some of the most commonly used block-level elements.
Headings
- There are six heading tags, which represent headings and subheadings in your document structure.
- <h1> </h1> is the highest-level heading and browsers render it the largest.
- <h6> </h6> is the lowest-level heading and browsers render it the smallest.
- Using headings appropriately is crucial in web design; search engine spiders give greater importance to their content and adaptive technology can notify users that they have encountered a heading, as well as allow users to quickly move between headings in a document.
- Headings will always render with a line of space below them and will usually render with a line of space above them as well. Gecko-based browsers and Opera can be relied upon to render the space above and below consistently; IE sometimes does not render the space above the heading if it is nested inside other block-level elements. That space is the margin above/below the heading.
| Attribute | Usage and Effect | Values Accepted | Default | Deprecated? |
|---|---|---|---|---|
| align | Horizontally aligns the text within the heading. | left | center | right | justify | left | 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>Headings in (X)HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>This is a Level 1 Heading</h1>
<h2 align="center">This is a centered Level 2 Heading</h2>
<h3 align="right">This is a right-aligned Level 3 Heading</h3>
<h4 align="justify">This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>
</body>
</html>
Paragraphs
- Paragraphs are coded as <p> </p>
- Paragraphs should be used for marking up chunks of text content, although there will be times when you use paragraphs around small pieces of text (such as links within a navigation bar) that are not technically paragraphs.
- Paragraphs always have a line of space above and below them. This space is a margin.
- While you might be tempted to nest a paragraph inside a heading or vice versa, I would discourage that practice from a document structure perspective. Usually it is best to have them follow one another and not be nested within each other.
- Note that when the margins of headings and paragraphs overlap (when a heading follows a paragraph or vice versa) that they collapse into each other. Rather than combining the margin space together, only the larger of the two is used (and they are usually the same amount of margin).
| Attribute | Usage and Effect | Values Accepted | Default | Deprecated? |
|---|---|---|---|---|
| align | Horizontally aligns the text within the paragraph. | left | center | right | justify | left | 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>Headings and Paragraphs in (X)HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>This is a Level 1 Heading</h1>
<p>This is a paragraph.</p>
<h2 align="center">This is a centered Level 2 Heading</h2>
<p>This is another paragraph.</p>
<h3 align="right">This is a right-aligned Level 3 Heading</h3>
<p align="center">This paragraph is centered.</p>
<h4 align="justify">This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>
</body>
</html>
Divisions
- A division is coded as <div> </div>
- Structurally speaking, these denote areas of the document. They are generally considered to be high-level elements, which contain headings and paragraphs. You should not nest divisions within a heading or paragraph; that would violate the document structure and would result in validation errors in some cases.
- Note that divisions can just contain text content as well; they do not need to contain other tags.
- Divisions are unique among block-level elements because they have no predetermined browser rendering. In other words, browsers treat these as a generic block-level element.
- There is no extra space above/below a division; this makes it unique when compared to headings and paragraphs.
| Attribute | Usage and Effect | Values Accepted | Default | Deprecated? |
|---|---|---|---|---|
| align | Horizontally aligns the text within the division. | left | center | right | justify | left | 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>Headings, Paragraphs, and Divisions in (X)HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>This is a Level 1 Heading</h1>
<p>This is a paragraph.</p>
<h2 align="center">This is a centered Level 2 Heading</h2>
<p>This is another paragraph.</p>
<h3 align="right">This is a right-aligned Level 3 Heading</h3>
<p align="center">This paragraph is centered.</p>
<h4 align="justify">This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>
<div>This text is in a division. The space above this text is from
the bottom margin of the <h6> tag.</div>
<div align="right">This text is in another division.
There is no space between this text and the line above, because divisions
have no default margins above and below.</div>
</body>
</html>
Line Breaks
- Line breaks are coded with the <br /> tag, which is different from the previous tags because it must be self-terminated. Self-termination involves opening and closing within the same tag. This needs to occur because in HTML there was no closing tag and in XHTML all tags need to be closed for proper functioning in XML.
- Since there is no closing tag for line breaks, they cannot contain anything else. Other tags cannot be nested inside them.
- Line breaks do not truly fit the definition of block-level, because they are not occupying the full horizontal space within their parent element. However, they do move content to a new line so their effect is similar to other block-level elements.
| Attribute | Usage and Effect | Values Accepted | Default | Deprecated? |
|---|---|---|---|---|
| clear | Forces content following the line break to wait until there is nothing on the indicated side(s) before rendering. Often used with images so that text will not wrap around the graphic; this would force the text to appear below the image. | left | all | right | none | none | 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>Headings, Paragraphs, Divisions, and Line Breaks in (X)HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>This is a Level 1 Heading</h1>
<p>This is a paragraph.</p>
<h2 align="center">This is a centered Level 2 Heading</h2>
<p>This is another paragraph.<br />
A line break moved this text to a new line.</p>
<h3 align="right">This is a right-aligned Level 3 Heading</h3>
<p align="center">This paragraph is centered and has a <br />
line break.</p>
<h4 align="justify">This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>
<div>This text is in a division. The space above this text is from
the bottom margin of the <h6> tag.</div>
<div align="right">This text is in another division.
There is no space between this text and the line above, because divisions
have no default margins above and below.</div>
</body>
</html>