The Paragraph Element

Element Name: p

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

The paragraph element can only contain inline elements.


<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. It’s 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 seperated using instances of the br 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.


<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 h6 element, by the way, is one of the least-used elements in HTML.

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.


<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 is essentially spaces (like what appears when you hit the space bar), tab characters, and carriage returns (also known as new lines) that 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 seperately. NOTE: the pre element does not automatically generate line breaks, 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:

• img
• object
• big
• small
• sub
• sup

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>
&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:

• the html element,
• the head element,
• the body element,
• elements that are descendents of the head element only.

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 id="Part_2-Chap_10-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="Part_2-Chap_10-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.

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

Again, I’ll just highlight the tags.


<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 element 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 a) bad practice and b) pointless. Why would you want a paragraph inside another paragraph, anyway?

Which of the following looks neater?

As Inline Elements


<p>Grover Cleveland held the post of President of the United States of America on two seperate 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 the first Prime Minister of Canada to serve non-consecutive was also the first Prime Minister <em>period</em>, and since a number of Prime Ministers served non-consecutive terms, the number of Prime Ministers and the number of people who held that post remain identical.</p>


As Block Elements


<p>Grover Cleveland held the post of President of the United States of America on two occasions: 1885-1889 and 1893-1897. As he is the only man 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 the first Prime Minister of Canada to serve non-consecutive was also the first Prime Minister <em>period</em>, and since a number of Prime Ministers 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.