Block-Level Elements
Broadly speaking, HTML elements are either 'block level' or 'inline'. Block level elements are the most significant of these, and we'll learn about them first.
- Block Level Elements:
- Begin a new line.
- Cover a larger area of screen than inline elements.
- Usually contain other block level elements, inline elements or text.
- Go between the
<body>tags.
Headings
There are six different heading tags, ranging from <h1> (the greatest in magnitude) to <h6> (the least). It's good practice to put one and only one <h1> heading on each page. While it's not as important to Google and other search engines as the <title> tag, it does play an important role in letting the robot know what the page is about.
Here are examples of the different headings in use:
<h1>This is a size 1 heading</h1>
<h2>This is a size 2 heading</h2>
<h3>This is a size 3 heading</h3>
<h4>This is a size 4 heading</h4>
<h5>This is a size 5 heading</h5>
<h6>This is a size 6 heading</h6>
Paragraphs
One of the most important block level elements you'll need to know is <p>. Any content between these start and end tags is marked up as a paragraph. Let's combine headings and paragraphs with the HTML we already know.
<html>
<head>
<title>My first web page!</title>
</head>
<body>
<h1>My First Web Page</h1>
<p>As you can see, this is my very first web page. There's not really
very much going on here, is there?</p>
<p>Hello world.</p>
</body>
</html>
Save index.html once again, and load the page into your browser. Hurrah! You'll notice we have text content: a heading and two paragraphs. Sure, it's not much at present, but from little acorns and all that…
Pre-formatted Text
Quick experiment for you: In any of your HTML documents, write a simple paragraph and add a load of whitespace to it. Hit tab a few times, thump the space bar for a while, even press return a few times. Just make sure it starts with a <p> tag and ends with a </p> tag. Save it and then view the page in your browser. Where's all that whitespace gone?
In most cases, HTML simply ignores any whitespace greater than one character in width. What if you want to show all that text, spaces and all? Well, you want to display pre-formatted text.
Try this:
<html>
<head>
<title>Pre-formatted text</title>
</head>
<body>
<pre>
Here is some pre-formatted text.
With lots and lots
o f
W H I T E S P A C E !
</pre>
</body>
</html>
You'll notice that anything between the <pre> and </pre> tags is output to the browser just like you've typed it. Note, however, that anything in those tags is output in a fixed-width font (usually Courier or Courier New).
A word of warning: If you put in a line of pre-formatted text that's 64,000 characters wide, then your webpage will be stretched to accomodate it. People hate having to scroll sideways through web pages, so be sure to make sure your preformatted text areas aren't too wide. A width of 80 characters is usually ample.
Divisions
At this early stage it's unlikely you'll want to use divisions, but when you start making use of style sheets you may find you'll start using them all the time. I know I do. A 'division' is a way of marking up a section of the page. It's a very, very basic block level element. It merely denotes a block of HTML code and content and starts a new line. It doesn't denote a paragraph or heading or anything meaningful like that. What's the point of that?
I hear you ask. Well, consider some fancy web page that has a three column layout. In most cases, each of those columns is stored inside a division. It's just a way of breaking the page up into manageable bits. Here's a quick example.
<html>
<head>
<title>Divisions.</title>
</head>
<body>
<h1>The <div> tag.</h1>
<div>This division might contain a navigation panel.</div>
<div>While this division might contain the left-hand column of text.</div>
<div>And this division could contain the right-hand column.</div>
</body>
</html>