Block-level elements format blocks of content. They take up 100% of the available width, with line breaks before and after, so that they stand out. Block-level elements can be introduced into other block-level elements, but they cannot be introduced into inline elements without causing a disturbance.

Block-level elements are most commonly used to layout websites, create headings/paragraphs/page divisions/lists/etc. but are not limited to these choices.

Headings

HTML headings are a set of six tags that are used to make titles and subtitles stand out from the rest of the page by increasing the size of the text and making it bold. The heading tags can also help search engines determine the structure and content of a page.

<h1> </h1> is the largest (most important) heading and <h6> </h6> is the smallest (least important) heading. In fact, the <h4>, <h5>, and <h6> tags are very rarely used.

<h1>How do you catch a squirrel?</h1>
<h2>Climb a tree and act like a nut!</h2>
<h3>Why does it get hot after a baseball game?</h3>
<h4>Because all the fans have left!</h4>
<h5>What does a bee use to brush its hair?</h5>
<h6>A honeycomb!</h6>


The results are:

Paragraphs

I'm going to assume two things: One, you know what a paragraph is, and two, you don't know how to make paragraphs on your webpage. If both of my assumptions are true, I am happy to say that I can help.

Browsers place blank lines before and after the <p> and </p> tags, causing a paragraph effect. A good example is this very page, which uses paragraph tags. Their usage is simple:

<p>Why was 6 afraid of 7?</p>
<p>Because 7 8 9!</p>


The result is:

Why was 6 afraid of 7?

Because 7 8 9!

Horizontal Rules

A horizontal rule is a long grey horizontal line that extends across the page. It is a useful way of separating sections of a webpage.

The horizontal rule tag is an empty element without a separate closing tag.

<hr />

The result is:

The <wbr> word break tag can be used to indicate where in a (long!) word is a good place to break to a new line, if it is necessary to break the text and create a new line within a page or element.

Div Tags

The <div> tag, while it stands for "division", has no actual meaning, or function, in HTML, but the fact that all other HTML elements can be contained within the DIV element makes this element an ideal tool for use with CSS. The <div> element can act as a container for whole sections of HTML, making CSS layouts, navigation, styling, and other presentational effects possible.

<div> A Whole Bunch Of HTML Can Go Here </div>

Learn more about how to utilize this element over at our CSS tutorial.

Script & Noscript Elements

The script tag can be used in the body of the HTML document as well as the head. The noscript tag is used as an alternate in case the browser cannot run the script. In that case the text or message inside of the noscript tag will be displayed instead.

<script> </script>
<noscript> </noscript>


Other Block-Level Elements

Several less-commonly-used block-line elements are:

This "Pre-Formatted Text" Element
Causes Whitespace to Show Up In Browser
Exactly Like It Is Entered         Between Tags

You can learn about lists on a separate page, as it is a big enough topic to merit a page of its own. You can also learn about tables, which can contain both block-level and inline elements.