Headers, Titles, and Paragraphs

Title Tags (<TITLE> and </TITLE>)

Every HTML document should have a title. As noted previously, titles appear at the top and center of a web browser's open window. Your title should be somewhat descriptive - that is, descriptive enough for other people to know what's on that page just by looking at the title. For example, George Washington Middle School Home Page would be a lot more useful as a title than School Page. This may not seem like a big deal, but whenever a person saves a bookmark of a web page, the name of that bookmark is determined by that title you gave it. So, unless you want your users to be confused by their bookmarks, it's a smart idea to make your titles clear.

Headers (<Hx> and </Hx>)

Headers serve as headlines for a document. It is common for a Web page to have a header at the top of each page. At the top of this particular page, for example, you'll see the words Headers, Titles, and Paragraphs in a large typeface, squeezed between two yellow lines - that's done by using a header tag. There are six levels of header tags, numbered 1 through 6, with 1 being the largest and the boldest. In general, the first header in each document should be tagged with a large header, such as <H1>. The syntax of the header tag is:

<Hx>Here is My Header</Hx>

The x in the tags must be a number, 1 through 6 (and be sure that both x's are the same number!). So, if you used the header <H1>, it would appear as

---

Here is My Header

---

If, however, you used a higher numbered header like <H3> instead, you'd get something like

---

Here is My Header

---

In many documents, the first header you use at the top of your web page will be identical to the title. For larger documents, subheaders such as <H3> can be used within the document to designate the start of a new subject. Additionally, headers 1, 2 and 3 are by far the most common, for headers 4, 5, and 6 can appear

so small that they are a distraction to the reader.

(see what I mean?)
So, my advice would be to use the biggest three header tags and ignore the others, unless you just want to mess with people's eyes.

Paragraph Tags

Unlike many other text documents, HTML files do not recognize carriage returns. So, if you have an HTML document that looks like

Welcome to our School Home Page.
This site is under construction.

it would appear as this on a Web browser:

Welcome to our School Home Page. This site is under construction.

In order for the computer to recognize the end of a line in HTML, you must include a paragraph tag, or <P>, at the end of each paragraph. This tag will add a small amount of space before the next paragaph. It is very important that you use <P> tags when you wish to end a paragraph - otherwise, your document will appear as one gigantic paragraph straight out of a Faulkner novel. It should be noted that some coders of HTML documents prefer to place the <P> tag before each paragraph rather than at the end, but it doesn't really matter. As long as you have the paragraph tag in between each paragraph text, you'll be fine.

So, let's look at our HTML document again, this time with paragraph tags.

Welcome to our School Home Page.<P>This site is under construction.<P>

Our results now appears as

Welcome to our School Home Page.

This site is under construction.

Line Break Tags <br>

In many cases, you'll want to end a line of some text, but you won't want to leave the amount of space below it that the paragraph tag leaves. In these situations, you can use the line break tag, or <br>. Here's our example:

Welcome to our School Home Page.<br>This site is under construction.<p>

We've inserted a line break tag in the middle of the document. What we now get is this:

Welcome to our School Home Page.
This site is under construction.

If you compare this to the above example which used the paragraph tag, you'll see that our line break tag does not leave the same amount of space.

Interactive Quiz

Feeling comfortable with your knowledge of HTML so far? If so, try it out for yourself by taking your first interactive HTML quiz. When you're done with it, move on to the next section or review the current lesson.