Login | Contact Us | Site Map | Resources

Basic HTML

Home > HTML Tutorial > Block-Level HTML Elements

Block-Level HTML Elements

Block-level elements format blocks of text. They take up 100% of the available width, with line breaks before and after each element, 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 create headings, paragraphs, page divisions, lists and tables, 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:


You can customize the width and thickness of horizontal rules. "Width" controls how far it extends across the page, and "size" controls the thickness.

<hr width="50%" size="1" />

The result is:



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 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. Both tags should be used together, but only one tag will be used by the browser.

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


Other Block-Level Elements

Several rarely-used block-line elements are:

HTML ElementWhat the Element Does
<address> </address>
Somewhere In The World
<blockquote> </blockquote>
I used to think I was indecisive, but now I'm not so sure.
<pre> </pre>
This "Pre-Formatted Text" Element
Causes Whitespace to Show Up In Browser
Exactly Like It Is Entered         Between Tags
<del> </del>Deleted Content Shown With Line Down Through Middle of Text
<ins> </ins>Inserted Content Shown With Underline, Usually Used Alongside DEL Tag
<center> </center>
No Longer Valid... Replaced By style="align: center;" CSS attribute

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.