General Syntax

Help Center HTML General Syntax

The analogy used before was that HTML is like a box of highlighters. If you were handed a book without any formatting, the first thing you might do is go through and separate out chapter titles from chapter text. You might then go through and separate out the table of contents from the chapters and separate out all of that from the index. This is precisely what HTML does. HTML sits right in with your content and tells the viewer what the content is.

Abstract

We know that HTML is not the content itself because it is always in the form of what we call a tag. An HTML tag looks like…

<tag>Content</tag> 

This defines Content as being of type tag. This is very abstract. A practical example:

Maybe we wanted to say that text is emphasized in some way. It just so happens that HTML has a tag called <em> that is designed for just this purpose. We will discuss Inline Tags on the next page, but let’s introduce one tag for now.

Let’s say we want to add emphasis to some words in this text:

A little more than kin, and less than kind.  

We could use the <em> tag to say that the words “more” and “less” were important in some way:

A little <em>more</em> than kin, 
	and <em>less</em> than kind.  

This is commonly rendered (displayed) by the browser as:

A little more than kin, and less than kind.

The “more” and “less” are usually italicized, but that’s not a guarantee, and really that’s not what’s important. The important thing is that we told the user’s web browser that the text was important. Again, HTML is not concerned with how to display your content — that’s the concern of CSS.

A Note on Spacing

Spacing in HTML does not matter. One tap of the space bar is the same as two taps on the space bar is the same as a thousand taps on the space bar is the same as a million strokes of the enter key is the same as seven raps on the tab key… This is convenient because it allows us to space out our HTML however we choose. It is frustrating when we actually do want to break the line in our document (several ways of which we will cover), but you can’t break the line simply by hitting the enter key.

The following blocks of HTML are equivalent

But, look, the <em>morn</em>, in russet mantle
clad, Walks o'er the <em>dew</em> of yon high eastward hill.
But, look, the <em>morn</em>, in russet mantle
clad, Walks o'er the <em>dew</em> of yon high eastward hill.
But, look, the
	<em>morn</em>, in russet mantle clad,
Walks o'er the <em>

dew</em> of yon high eastward hill.  

Each of them will be rendered like:

But, look, the morn, in russet mantle clad, Walks o’er the dew of yon high eastward hill.

(More on how to break the line can be found on the Element Tags Page.)

Nesting

Later we’ll find that tags can contain other tags. It’s important to note that any tag that is opened within another tag must also be closed within that tag.

For example purposes, let’s just say that there exist the tags <cool> and <new>. They don’t exist, quite unfortunately, but if they did, I might have the following block of HTML

<cool><new>xHTML</new> is compatible with both
HTML and <new>XML</new></cool> 

Notice how <new> is both opened and closed within <cool>. That is, the <new> tag is nested within the <cool> tag.

The following is an example of badly nested and incorrect HTML

<cool><new>xHTML</cool></new> 

This seems like a very simple concept, and it is. We emphasize it heavily because it is easy to mess up despite its simplicity. If you have many tags inside of other tags (or tags like the <div> tag that can contain other <div> tags), then it is difficult to close your tags without a bit of thinking.

Share this page Share