Learn HTML - Syntax and Grammar

The Syntax and Grammar of HTML

"... the squeezing of quite enough but not too many words in between carefully selected marks of punctuation."
-- author Roy Blount, Jr., on the Art of Writing

Like any language, HTML has its rules. Fortunately, HTML has a limited vocabulary, and just a few simple rules. If we wish to use the language properly, though -- and have the reader's browser understand what we're trying to tell it -- then we must be mindful of the rules

Note: This lesson attempts to cover HTML's syntax and grammar in detail. If it doesn't make sense to you now, don't worry. However, you may wish to come back later -- after you've developed a few pages of your own -- to review.

The syntax and grammar of HTML may be summarized by one mysterious figure:

<tag attribute1 attribute2="value"> your text </tag>

Now let's decipher it.

HTML consists of specially-labeled tags that surround the text and other components of your document, describing how this information should appear in a browser. Each tag itself is enclosed in brackets that look like this:

< >

The tags differ -- and are interpreted differently by your browser -- based on the label that appears between the brackets. For example, this tag:

<center>

tells the browser to center the information that follows within the browser's display area, whereas this tag:

<hr>

tells the browser to draw a horizontal rule (a line) to separate the information listed above and below the tag.

Most tags come in pairs, with starting tags and ending tags surrounding the information that the tag influences. The ending tag always looks just like the starting tag, except for the presence of a slash (/) immediately after the left bracket. For example, this set of tags:

<center>If You Leave Me, Can I Come Too?</center>

would center the text surrounded by the tags, like so:

If You Leave Me, Can I Come Too?

HTML tags are case-insensitive; that is, you can type them in upper-case, lower-case, or mixed-case. (Many people type them in all upper-case to make them stand out; others type them in lower-case because they swear they can type faster that way.) For example, these four tags all work the same:

<hR>

HTML tags sometimes include one or more attributes. The attributes further refine a tag, and are always included within the starting tag of the pair. In some cases -- depending on its nature -- an attribute is followed immediately by an equal sign and a value, and the value is usually enclosed in quotation marks (" "). For example, consider this tag:

<a href="another.htm">

The tag itself is represented by the A; it includes an attribute, HREF, which has been assigned a value, another.htm, enclosed in quotes. (By the way, this example demonstrates the anchor tag of HTML, which allows you to link one HTML page to another.)

Case doesn't matter for the attribute, but it can affect the value. In the example above, the value another.htm may not work properly if it is typed in all capital letters.

Most of the basic tags never use attributes, but some tags can contain several. For example, this tag:

<hr noshade size="10">

includes two attributes, and the first one (NOSHADE) does not require a value. The order of the attributes doesn't matter; this tag will have the same results as the preceding one:

<hr size="10" noshade>

One last rule: different tags may be nested inside one another, as long as you always end the innermost pair first. In other words, if you place one starting tag inside another starting tag, always end the inner tag before the outer one. Perhaps an example will make this more clear:

Right: <TAG1><TAG2> stuff </TAG2></TAG1>

Wrong: <TAG1><TAG2> stuff </TAG1></TAG2>

Notice how TAG1 and TAG2 are mismatched in the second line, above.

That's enough syntax and grammar for now.