HTML 101

By Scot Hacker, Lisa Pickoff-White
Published May 16, 2007 in Web Development

Headings

Now let's give our page a title that people can read.

To add headings in a larger size at the top of a page, or to add subheads to break up the text further down on a page, you use the heading tag:

<h?>

Where for ? you substitute a number from 1 - 6 that appears to control the font size of the heading text.

Note: HTML tags, or elements, fall into two categories: "Block-level elements," which by default create an empty line above and below them, and "inline elements," which do not. Headings are a good example of block-level elements, which means they'll automatically get a line break above and below. The <strong> tag, in contrast, works in the middle of text without creating linebreaks above and blow. For this reason, heading levels cannot be used in the middle of a paragraph.

The largest size is <h1>. The smallest size is <h6>. In each case, after you type the text you want, you need to add the corresponding closing heading tag.

Headling levels

Heading levels 1-6 as rendered by a browser, without specifying any font size at all. 

So why do we say above "appears to control the font size" rather than "controls the font size?" Because we haven't actually specified a font size. Technically speaking, heading levels should be used to specify the relative importance of the heading on the page, much as you would when using heading levels to create outlines in MS Word. Without stylistic information, the Web browser will render the heading levels with its default settings, which use a hierarchy of sizes. Later, when you learn to style documents with CSS (cascading style sheets), you'll find that you have total control over the way heading levels are styled and sized. The important lesson for now is this: Use heading levels to represent the relative importance of headings on a page in a hierarchical fashion. Do not think of them simply as font sizing options.

Now, let's create a heading and center it. On a line after the body tag type this:

<div align="center"><h1>Welcome to My First HTML Page </h1></div>

By default, text on a Web page will be displayed flush to the left. To center something, whether a heading, paragraph, or a table, we use the "center" attribute on the div tag (more on the "div" tag in our future CSS tutorial).

Remember, we always have to close our tags. So we end the line with </div>. That means whatever text follows after that will again revert to being flush left.

Your document should now look something like this:

<html>
<head>
<title>My First HTML Page</title>
</head>
<body style="background-color: #F5F5DC;">

<div align="center"><h1>Welcome to My First HTML Page </h1></div>

</body>
</html>

Save the document, toggle to your web brower, and click Reload/Refresh. You should see something like this:

Headings first

Add your comment

Login to post a comment.