"Block" Entities

Prior to HTML5, entities within a HTML body could be either "block" or "inline." Inline entities, such as links, or a word or two in boldface, can appear anywhere in a line. Block entities begin with a new line, uses the entire available width, and end with a new line.

While HTML5 has a subtler concept of content category and you can change just about any rendering behavior with CSS3, browsers will still render these tags the same way they always did.

For the most part, you cannot enclose one block entity inside another. It doesn't make sense to have a paragraph that's part of a heading, nor would you have heading that's part of a paragraph.

In the following section, you can see some of the simplest block entities. Blocks are outlined in magenta; nested blocks (only the items within a list) are outlined in green. Please feel free to view source and use the developer tools to look at the code!

Heading level 1: <h1>...<h1>

Paragraphs are marked with <p>...</p>

Another paragraph. Heading levels go up to 6 by the way.

Heading level 2: <h2>...</h2>

After this paragraph is a preformatted block marked off with the <pre>...</pre> tag. Within a preformatted block, line breaks and spaces are represented exactly and most browsers will switch to a monospaced font. However, it's still required to encode <, >, and " as the entities &lt; &gt; and &quot;

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html

Lists (heading level 3: <h3>...</h3>)

HTML offers a few different kinds of lists. The most popular list entity is probably the unordered list, enclosed with the <ul>...</ul> tag:

For more information...