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.
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 ElementElement 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 ElementYes, this is the exact same example used when demonstrating the br element. That is deliberate.
Element Names:
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, h2, h3, h4, h5, and h6, ElementsElement 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 ElementElement 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 ElementNote the lack of elements—particularly the br element—within the pre element. Again, it preserves the whitespace within.
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:
html element,head element,body element,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 ElementThe 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.
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 ElementBelieve 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?
del and ins Elements as Inline Elements
del and ins Elements as Block ElementsFrom 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.