Common Block Elements

As explained in Your First Webpage, block elements break up the text and other content into smaller chunks. An excellent example is the p element, used for paragraphs.

I will present a number of block elements here. I won't present all of them in this chapter since several can be used only under certain circumstances, but the ones I do can be used almost anywhere.

Like the inline elements, these block elements have the core and language attributes in common. Again, these attributes are all optional, unless otherwise stated. I will not mention them in regards to each element unless one or more is either required or forbidden.

The Paragraph Element

Element Name: p

Paragraphs organize sentences into smaller groups. In (X)HTML, the p element is used to denote a paragraph.

The paragraph element can only contain inline elements.

<p> element
The p Element
<p>A paragraph is a group of one or more sentences. This is a paragraph.</p>

The Address Element

Element Name: address

This element is rarer, but shares many of the same characteristics with the p element: it's a block element that can only contain inline elements. Its usage is different though (remember that "semantics" thing?)—while p is used for paragraphs, address is used for addresses. The lines in an address (for example, a mailing address) are normally separated using instances of the br element.

<address> element
The address Element
<address>
John Doe<br>
P.O. Box 123<br>
Anytown ON I5F 4K3<br>
Canada
</address>

Yes, this is the exact same example used when demonstrating the br element. That is deliberate.

The Header Elements

Element Names:

h1
Level 1 Header
h2
Level 2 Header
h3
Level 3 Header
h4
Level 4 Header
h5
Level 5 Header
h6
Level 6 Header

These elements are displayed in a group because they all perform the same function: labelling sections of a document. The header with the highest rank in the heirarchy is h1; the lowest is h6. Properly used, these headers should read something like an outline.

Below are the header elements.

The six header elements
The h1, h2, h3, h4, h5, and h6, Elements
<h1>Level 1 Header</h1>
<h2>Level 2 Header</h2>
<h3>Level 3 Header</h3>
<h4>Level 4 Header</h4>
<h5>Level 5 Header</h5>
<h6>Level 6 Header</h6>

The Horizontal Rule Element

Element Name: hr

The hr element is used to put a horizontal line on a webpage. It is a hangover from presentational markup, although it still comes in handy at times.

The hr element is an empty element. It has no end tag.

<hr> element between two paragraphs
The hr Element
<p>This element is above the rule</p>
<hr>
<p>This element is below the rule</p>

The Preformatted Text Element

Element Name: pre

Whitespace consists of spaces (like what appears when you hit the space bar), tab characters, and carriage returns (also known as new lines). It makes your code and your content readable.

The pre element preserves that whitespace on the screen, rather than ignoring most of it, as is the case with most other elements. It's often used when displaying entire blocks of computer code, since you don't need any styling trickery to display the lines separately.

IMPORTANT NOTE. Most block elements wrap lines—that is, when the text reaches the edge of the screen, the first word that won't fit on that line is moved to the beginning of the next line. The pre element does not do this, which means your text can run right off the screen if you're not careful.

One thing that is important to remember: Not all inline elements may be included. The HTML 4.01 Strict DTD specifically forbids the following elements from being nested within the pre element:

I have yet to talk about the object element. Suffice to say, it's like img, but a lot more complex.

Below is the code that makes up the list of elements excluded from being nested within the pre element.

<pre> element
The pre Element
<pre>
&lt;ul class="el_names"&gt;
&lt;li&gt;img&lt;/li&gt;
&lt;li&gt;object*&lt;/li&gt;
&lt;li&gt;big&lt;/li&gt;
&lt;li&gt;small&lt;/li&gt;
&lt;li&gt;sub&lt;/li&gt;
&lt;li&gt;sup&lt;/li&gt;
&lt;/ul&gt;
</pre>

Note the lack of elements—particularly the br element—within the pre element. Again, it preserves the whitespace within.

The Division Element

Element Name: div

As the span element is to inline elements, so the div element is to block elements: it has no meaning beyond what its attributes give it.

The div element is also unusual in that the only elements it may not contain are:

In other words, any element contained in the body element is allowable in the div element—including other div elements. For this reason, the div element is often used to break the page up into sections for further styling (we'll get into that later).

<div> element
The div Element
<div id="Lorem_Ipsum">
<h1>Lorem Ipsum</h1>
<p>The <span class="foreign" style="font-style:italic;">Lorem Ipsum</span> text is essentially pseudo-latin text that is used as a placeholder for actual text. Since it is semi-readable nonsense, the eye generally skips over it, and looks at the page design instead.</p>
<div id="Lorem_Ipsum-Example">
<h2>Example Lorum Ipsum Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

The outer div element contains some content, and the inner div element contains a subdivision with related content. While it does not have any effect on the content's appearance, the div element is very useful when it comes to organizing the code of your webpage.

The Block Quote Element

Element Name: blockquote

The q element is for short quotations that can fit within a paragraph. Conversely, the blockquote element is used for longer quotations that take up several paragraphs.

Unlike the block elements above, the blockquote element cannot contain text on its own. It requires another block-level element (such as the p element) to contain the text.

Implied Attributes

cite
The URI of an online source.

Below is a quotation from the W3C website, explaining what HTML is.

<blockquote> element, quoting from the W3C Webpage

Again, I'll just highlight the tags.

The blockquote Element
<blockquote cite="http://www.w3.org/TR/html4/intro/intro.html#h-2.2">
<p><strong>2.2 What is <abbr title="HyperText Markup Language">HTML</abbr>?</strong></p>
<p>To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is <abbr title="HyperText Markup Language">HTML</abbr> (from HyperText Markup Language)</p>
<p><abbr title="HyperText Markup Language">HTML</abbr> gives authors the means to:</p>
<ul>
<li>Publish online documents with headings, text, tables, lists, photos, etc.</li>
<li>Retrieve online information via hypertext links, at the click of a button.</li>
<li>Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.</li>
<li>Include spread-sheets, video clips, sound clips, and other applications directly in their documents.</li>
</ul>
<p><cite>(W3C, Introduction to <abbr title="HyperText Markup Language">HTML</abbr>)</cite></p>
</blockquote>

The Deleted and Inserted
Text Elements

Believe it or not, the del and ins elements can work as block elements as well, but only under very specific circumstances: they must have a block element as a child element. The attributes remain exactly the same.

Technically, you can use del and ins elements to nest a paragraph within a paragraph without raising an error on the W3C's HTML validator, but that's bad practice and pointless—why would you want a paragraph inside another paragraph, anyway?

Which of the following looks neater?

As Inline Elements

The <del> and <ins> elements as inline elements
The del and ins Elements as Inline Elements
<p>Grover Cleveland held the post of President of the United States of America on two separate occasions: 1885-1889 and 1893-1897. As he is the only President ever to serve two non-consecutive terms, he is considered to be <em>both</em> the 22<sup>nd</sup> and 24<sup>th</sup> President of the United States.</p>
<p>Thus, current President <del cite="No Longer President" datetime="January 20, 2009">George W. Bush</del> <ins cite="New President" datetime="January 20, 2009">Barack H. Obama</ins> is the <del>43<sup>rd</sup></del> <ins>44<sup>th</sup></ins> <em>President</em>, but only the <del>42<sup>nd</sup></del> <ins>43<sup>rd</sup></ins> <em>person</em> to hold that post.</p>
<p>Since a number of Prime Ministers of Canada (including John A. MacDonald, the first) have served non-consecutive terms, the number of Prime Ministers and the number of people who held that post remain identical.</p>

As Block Elements

The <del> and <ins> elements as parent elements of paragraphs
The del and ins Elements as Block Elements
<p>Grover Cleveland held the post of President of the United States of America on two separate occasions: 1885-1889 and 1893-1897. As he is the only President ever to serve two non-consecutive terms, he is considered to be <em>both</em> the 22<sup>nd</sup> and 24<sup>th</sup> President of the United States.</p>
<del cite="G. W. Bush is no longer President" datetime="January 20, 2009"><p style="text-decoration:line-through">Thus, President George W. Bush is the 43<sup>rd</sup> <em>President</em>, but only the 42<sup>nd</sup> <em>person</em> to hold that post.</p></del>
<ins cite="B. H. Obama is now President" datetime="January 20, 2009"><p style="text-decoration:underline">Thus, President Barack H. Obama is the 44<sup>th</sup> <em>President</em>, but only the 43<sup>rd</sup> <em>person</em> to hold that post.</p></ins>
<p>Since a number of Prime Ministers of Canada (including John A. MacDonald, the first) have served non-consecutive terms, the number of Prime Ministers and the number of people who held that post remain identical.</p>

On More Block Elements

From here on, things get more complex. Many block elements, like the blockquote element, require elements within them to contain the text. Where things get complicated is that these elements require specific child elements—child elements that can't exist outside specific parent elements. In other words, these elements come as a set. The next chapter deals with the simplest sets: lists.