First Tags to Learn

< Prev

Next >

First Tags to Learn

Topics on this page:

General page layout
The <title> tag
Comments
<h#> tags (h1-h6)
The and tags

Top

General Page Layout

Every page you create needs to have the following elements:

A DOCTYPE tag that indicates what version of HTML you're coding for.
An <html> tag and </html> tag. Between these, you need:
- A <head> section that defines things that do not appear on the displayed page.
- A <body> section that defines everything that appears on the displayed page.

Here's an example of how every page you create should look:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Put your page title here</title>
</head>

<body>
  <!-- Put all of your page contents here.
</body>
</html>

Warning: Most things in HTML are not case-sensitive. The DOCTYPE tag is an exception, and must be coded exactly as shown. This DOCTYPE indicates that you're using the transitional version of HTML 4.0. The transitional version lets you use a number of HTML features that cannot be used in other HTML 4.0 versions.

If you want your document to be an XHTML 1.0 document instead of HTML 4.0, replace the first two lines with:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Top

The <title> Tag

The <title> tag defines a title for your page. The title does not appear on the page itself. Many students are afraid they've done something wrong when they don't see the title on the page. You haven't!

The title appears in the browser's title bar, not in the display area! Look in the title bar. That's where you should find your title.

No tag in the <head> section should display anything in the browsers display area! All information that is displayed in the display area must be specified in the <body> section, not the <head> section.

Another function of the title is to define the text that is saved when a visitor bookmarks your page (Netscape) or saves it to favorites (IE). Be sure and specify a title tag for every page you create, and try to make it something that is meaningful when the page is bookmarked.

The title is also a key factor considered by robots scouring information for search engines. You might want to include keywords that you'd like this page to show up under when someone does a search. But don't bloat the title up too much. Keep it short and meaningful.

Top

Comments

Comments have the form . But there are a couple of things you should know about comments.

The HTML standard has a couple of silly little rules that apply to comments. One is that you must have a blank (or other whitespace character such as a tab or newline) after the . So don't write a comment like . Make it <-- Comment -->.

Another silly rule is that you can't include the characters "--" inside the comment. So if you want a comment to really stand out, don't do something like this:

<!-- ----------------- -->
<!-- This is a comment -->
<!-- ----------------- -->

If you try to validate a page with a comment like that, you'll get error messages from the validator. Choose another character instead:

<!-- ***************** -->
<!-- This is a comment -->
<!-- ***************** -->

Most browsers will accept comments that don't follow these rules. But following the rules guarantees that (1) you won't get error messages when you validate, and (2) if there's some little-used browser that follows the rules, it won't choke on your page.

There is another format for HTML comments. This is an older format, and you shouldn't use it anymore. This format is simply <! >. One reason to avoid this format is that it's now used for some special purposes such as the <!DOCTYPE ...> tag - if you use this format, the browser will try to make sense out of it and if you're particularly unlucky it might succeed!

Top

<h#> Tags (h1-h6)

The <h#> tags are intended for use with heading lines. The text inside an <h#> tag is affected in two ways: the font size is set (largest for h1, smallest for h6), and the text is made bold. An <h#> tag also puts a blank line before and after the text.

The HTML standard prohibits putting block tags such as or <center> inside an <h#> tag (a block tag is any tag that causes a line break). You're allowed to put inline tags such as and empty tags such as inside them.

Your heading line is left-justified by default. You can center it or right-justify it by adding align="center" or align="right" to the tag:

<h1 align="center"> This is my heading </h1>

You can also use the <center> tag to center headings. Just be sure to put the <h#> tag inside the <center> tag and not the other way around:

<center>
  <h1> This is my heading </h1>
  <h2> This is a subheading </h2>
</center>

Top

and Tags

The tag is an "empty" tag, meaning that you don't use a closing tag in HTML. A single tag begins a new line. You can use several adjacent tags to get extra spacing: . XHTML requires the tag to be written as . This works in HTML as well, so you might want to write your tags that way to make future conversion to XHTML a bit easier. The space between the br and the / is required for compatibility with HTML.

Unlike the tag, the tag is a "container" tag. The tag contains a paragraph. Most container tags such as <h1> require a closing tag (</h1>). The closing tag is optional for the tag when using HTML. The paragraph ends automatically when another tag is encountered - or when any of a number of other tags is encountered. In general, any block tag (a tag that causes a line break) terminates a paragraph. The closing tag is required when using XHTML, so you might want to include them in your HTML documents to help future conversion to XHTML.

An "empty" paragraph - one that contains nothing - is ignored by browsers. So you cannot get extra spacing by coding several tags like this: . Use the tag to create extra spacing.

Top

<<< Home

<< Web

< HTML Notes

Top