Menu

The Beginner’s Guide to HTML – Part 3: Block-Level Elements

html block elementsWelcome back to our beginner’s guide to HTML! Previously in the guide, we looked at getting started in web design and the basic parts of a webpage. Today we will examine the fundamentals of block-level elements.

Before I explain what they are, I must preface this part by admitting that block-level elements are no longer defined in the current revision of the HTML5 specification. In XHTML, all elements were divided into one of two categories: block-level or inline. In HTML5, however, each element belongs to one (or more) of seven different categories: Metadata content, Flow content, Sectioning content, Heading content, Phrasing content, Embedded content, or Interactive content. For our purposes, however, it is far easier for a beginner to understand the block-level and inline distinction. We will stick with the older classification for now, even though it is technically wrong, and revisit the HTML5 categories in a later part of this guide.

So, what makes an element a block-level element then? Block-level elements are designed to be displayed separately from the elements around them. They are used like building blocks to make up the structure of a web page.

<p>, the Paragraph Tag

The most common of all block-level elements are <p> tags. This tag lets the browser know that the enclosed content is a paragraph. By default, <p> tags will display the content on a new line separate from preceding and following content, with a small amount of space beneath. Remember from part 1 that HTML is a structure language, so the default layout for any element can be changed (by CSS).

Remember at the end of part 2 when I said the text in the body of our first page was not compliant with XHTML Strict? Well, it is true that in HTML5, it doesn’t really matter if the text Hello World! is wrapped in <p> tags or not, but it’s still a good idea to do it anyway. This is because not only is HTML a structural language, it is also a semantic language. This means that every element is supposed to convey some sense of meaning of what it contains. This is used for browsers that do not display web pages visually, such as those for people with visual impairments. For example, the <p> tag semantically contains paragraphs, usually (but not necessarily) text. Since our Hello World! text is a paragraph (albeit a very small one), let’s go ahead and surround it in our web page with <p> tags, so our code looks like this:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Hello World!</title>
	</head>
	<body>
		<p>Hello World!</p>
	</body>
</html>

Now our code is semantically valid.

The Heading Tags

Since HTML was originally designed to distribute scientific research and military documents, it makes sense that one of the first features to be included would be a way to title subsections of the document. Thus, heading tags were created! There are 6 different heading tags, <h1> through <h6>. The number in the tag indicates the sub-level of the document, with <h1> being the main heading of the page (usually the same as what is in the <title> tags in the <head>), <h2> being the next sub-heading down, and so on. If the heading tags were being created today, they probably would be just an <h> tag with an attribute setting the sub-level, but since they’ve been around since the beginning of HTML and most websites never make it past <h4>, they’ve been grandfathered in.

The semantic meaning is important to remember when using heading tags. Just because a heading tag makes text bigger does not mean you should use it whenever you want bigger text! Their semantic purpose is to identify sections of the document. Google, among others, uses these semantic rules to determine relevant content when you use their search engine, so the better semantically sound your website is, the better chance you have of being a top result. This is part of Search Engine Optimization (SEO).

Let’s add a header tag to our web page. Since it is the first header, we will use the <h1> tag. You can play around with the other tags to see what they look like, but when you’re done your code should look like this:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Hello World!</title>
	</head>
	<body>
		<h1>Hello World!</h1>
		<p>Hello World!</p>
	</body>
</html>

The <hr> Tag

<hr> stands for Horizontal Rule. This tag places horizontal line on the page. In the early days of HTML, it was common to see <hr> tags when a horizontal line was needed, but their use has been greatly diminished in more modern times. They should be used sparingly, if at all, because there are better ways of displaying a horizontal line using CSS. However, the tag still does have a couple uses; for example, the current HTML5 specification recommends that the <hr> tag be used for “a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.”

The <hr> tag is a self-closing tag. Let’s add a <hr> tag to our code, and another paragraph so we can see how it separates two paragraphs. Modify your document so that your code looks like this:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Hello World!</title>
	</head>
	<body>
		<h1>Hello World!</h1>
		<p>Hello World!</p>
		<hr />
		<p>This is a new paragraph. It is separate from the one above.</p>
	</body>
</html>

As you can see, in the default stylesheet, the <hr> tag produces a thin, black horizontal line that takes up almost the entire width of the window.

The <pre> Tag

The last tag we will look at in this part of the guide is the <pre> tag. The <pre> tag is used to display preformatted text, meaning whitespace is preserved within the text. This is especially useful if you are trying to show code and preserve formatting, or when you are trying to keep some ASCII art from getting corrupted. Let’s add some ASCII art to our page. You will want to copy the code in the <pre> tags below exactly as it is shown or our ASCII art may not display properly.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Hello World!</title>
	</head>
	<body>
		<h1>Hello World!</h1>
		<p>Hello World!</p>
		<hr />
		<p>This is a new paragraph. It is separate from the one above.</p>
		<pre>
 _   _      _ _        __        __         _     _ _ 
| | | | ___| | | ___   \ \      / /__  _ __| | __| | |
| |_| |/ _ \ | |/ _ \   \ \ /\ / / _ \| '__| |/ _` | |
|  _  |  __/ | | (_) |   \ V  V / (_) | |  | | (_| |_|
|_| |_|\___|_|_|\___/     \_/\_/ \___/|_|  |_|\__,_(_)
		</pre>
	</body>
</html>

Our Web page should now look something like this:

helloascii

In the next part of the guide we’ll finish up block-level elements by looking at tables, lists, and divs.

Recap

  • Block-level elements are elements which are displayed separate from code around them.
  • The <pre> tag is used to create paragraphs of text.
  • The heading tags, <h1> through <h6>, are used to display the titles of document sub-sections.
  • Well-formed HTML documents use tags to separate parts of the document.
  • The <hr> tag is used to display a horizontal line, but should be used sparingly.
  • The <pre> tag is used to display preformatted text which leaves whitespace intact.
  Designers  
 
X
X
Crop & Save