Motivation and Syntax
Now that we know about General HTML Syntax and Page Tags, we need to start adding content. There are four disjoint types of HTML tags. The four types are page, block-level, inline, and element. They each do something different for your content.
Block-level tags are used to define regions on the page.
If you think in terms of LEGO® bricks, the Page Tags are the things that separate out the play mat from the walls of the play room. Block-level tags, however, are akin to those large (often green) LEGO® bricks that all the other bricks sit on.
This analogy is important. Would you ever have the LEGO® brick person not attached to the big green block? Maybe, but it would be a more proper LEGO® scene if he were attached to the big green block. Returning to block-level tags, all visible content must be the descendent of a block-level tag.
This means we can’t have text inside the
<body> tag, how are we supposed to know what that text is? Is it a paragraph? A header? A quote? If we always surround things with block-level tags, then we’ll at least always have some idea what the content is.
In terms of syntax, there is nothing new with block-level tags except the simple rule that block-level tags can contain other block-level tags.
A note on how block-level elements are displayed by default:
It is pertinent to note that all block-level tags expand out to the entire width of the containing element. The containing element is the tag’s direct ancestor. This can be changed using CSS, but the fundamental thing is namely that block-level tags define regions on the page. Without CSS, this means simply that block-level tags break the line in the rendered (displayed) version of your page. Remember that breaking the line in the source code means nothing. So if you want to break apart elements on the page, you should put them in separate block-level tags.
(LEGO® is a trademark of the LEGO Group of companies which does not sponsor, authorize or endorse this site)
HTML allows us to define paragraphs using the
<p> tag. And like every HTML tag, the
<p> tag must be closed to indicate the end of a paragraph.
If you wanted to make our previous example “correct” and not have any anonymous text, you might say that text is a paragraph. Adding this HTML brings our example from the Page Tags page to:
<html> <head> <title>My Web Site's Home Page</title> </head> <body> <p>[My Content Here]</p> </body> </html>
If you wanted to HTML-ify the first few lines of Shakespeare’s Hamlet, you might add the following HTML
<html> <head> <title>Hamlet Act I Scene I</title> </head> <body> <p>ACT I SCENE I. Elsinore. A platform before the castle.</p> <p>FRANCISCO at his post. Enter to him BERNARDO </p> <p>BERNARDO Who's there?</p> <p>FRANCISCO Nay, answer me: stand, and unfold yourself.</p> <p>BERNARDO Long live the king!</p> <p>FRANCISCO Bernardo?</p> <p>BERNARDO He.</p> <p>[More text omitted]</p> </body> </html>
The text from Hamlet above is visible on the page just fine, and the capitalized letters make it easy to discern the speaker from the spoken text, but the line “ACT I SCENE I. Elsinore. A platform before the castle.” really isn’t a paragraph of text: it’s a header.
HTML provides us with 6 different kinds of headers: headers, sub-headers, sub-sub-headers, etc. The tag for a header is
<h1> (which means “heading level 1”); the tag for a sub-header (also called a “sub-section header”) is
<h2>, all the way down to the sub-sub-sub-sub-sub-section-header,
<h6>. Most HTML authors do not go past
It seems most correct from above that “Act I” is a section header and “Scene 1…” is a sub-section header. Adding this information in, we have:
<html> <head> <title>Hamlet Act I Scene I</title> </head> <body> <h1>ACT I</h1> <h2>SCENE I. Elsinore. A platform before the castle.</h2> <p>FRANCISCO at his post. Enter to him BERNARDO </p> <p>BERNARDO Who's there?</p> <p>FRANCISCO Nay, answer me: stand, and unfold yourself.</p> <p>BERNARDO Long live the king!</p> <p>FRANCISCO Bernardo?</p> <p>BERNARDO He.</p> <p>[More text omitted]</p> </body> </html>
If you saved this file as
hamlet2.html in your text editor and opened it in a web browser, it would look like this page.
There is no steadfast rule to determine which level of header you should use. By default,
<h1>s are very large while
<h6>s are very small, but again, this is just a factor of CSS. We could use CSS to say that
<h1>s are supposed to be very small and blue, for example.
Suppose we wanted to give a list of the characters in Act I, Scene I on our page. We reach a bit of a fork in the road, though: do we care about the order of our items, or does that really matter? HTML has two types of lists: ordered lists and unordered lists. The two use almost exactly the same syntax. In fact, you can convert between the two (i.e. change an ordered list to an unordered list or vice-versa) by changing only two letters.
If you want to create an ordered list, you first create an
<ol> tag and then add in list items, or
Here is an example of an ordered list:
<ol> <li>January</li> <li>February</li> <li>March</li> <li>April</li> <li>May</li> <li>June</li> <li>July</li> <li>August</li> <li>September</li> <li>October</li> <li>November</li> </ol>
If you added the necessary page and block-level tags to this, saved it as
ol.html (an arbitrary name, of course) and opened it in a web browser, it would look like this page. Notice how the browser automatically adds in numbers. We can re-order the
<li>s however we wish, adding new items or whatnot, and the browser will automatically number things for us.
It is important to note that both of the tags here,
<li>, are block-level tags. Also, we can change the numbering (to use the alphabet or Roman numerals or even the Hebrew alphabet), but that is the job of CSS. Again, HTML just says, “this is an ordered list”. CSS then says, “okay, it’s an ordered list, let’s put an incremental number before each item.”
If ordering isn’t so important, then we can use the analogous
<ul> or unordered list tag to denote the list. The
<li>s remain the same.
Here is an example of an unordered list:
<ul> <li>Greg</li> <li>Cindy</li> <li>Jan</li> <li>Peter</li> <li>Bobby</li> <li>Marcia</li> </ul>
If you added the necessary page and block-level tags to this, saved it as
ul.html (an arbitrary name, of course) and opened it in a web browser, it would look like this page. Instead of numbers this time, though, we get black circular bullets (again, something that can be changed or even removed completely using CSS).
So now we have a way to define content as being a paragraph or a header or a list or a list item, but we can’t really tell how elements are related to each other.
We can tell which list items are related to each other because they are all siblings of each other (they are all direct descendants of a common
ol). (More on the tag relationships can be found back on the Page Tags page.)
When it comes to determining how a paragraph is related to a header, we can’t really do much. Imagine you have the following inside your
<h1>Act I</h1> <h2>Scene I</h1> <p>FRANCISCO at his post. Enter to him BERNARDO </p> <p>BERNARDO Who's there?</p> <p>FRANCISCO Nay, answer me: stand, and unfold yourself.</p> <h2>Scene II</h2> <p>KING CLAUDIUS Though yet of Hamlet our dear brother's death The memory be green, and that it us befitted To bear our hearts in grief and our whole kingdom To be contracted in one brow of woe,</p>
What we want to do is group these elements in a better way so we can “get at them” more easily. This will make more sense when we talk about CSS, but in terms of HTML, it makes sense that we should want to be able to group tags together.
What we’re looking for is a
<section> or a
<subsection> tag and so on. Unfortunately these tags don’t exist (although they might in the next versions of xHTML). We do, however, have a more abstract block-level tag called
Whereas the above block-level tags (
<li>) all define regions on the page, the
<div> tag defines a group of regions on your page. The
<div> tag allows you to take advantage of the fact that block-level tags can contain other block-level tags. So if we think of a
<div> tag as being like the non-existent
<section> tag, then a
<div> that is a direct descendent of a
<div> tag is a
If we add pertinent
<div> tags to the above document, we might be left with:
<div> <h1>Act I</h1> <div> <h2>Scene I</h1> <p>FRANCISCO at his post. Enter to him BERNARDO </p> <p>BERNARDO Who's there?</p> <p>FRANCISCO Nay, answer me: stand, and unfold yourself.</p> </div> <div> <h2>Scene II</h2> <p>KING CLAUDIUS Though yet of Hamlet our dear brother's death The memory be green, and that it us befitted To bear our hearts in grief and our whole kingdom To be contracted in one brow of woe,</p> </div> </div>
Now we know that the paragraph with the text
Nay, answer me… is a part of
Scene I and not just some random paragraph from
Act I because the paragraph and the
<h2>Scene I</h2> are siblings.
Viewing this code in a web browser would look like this page.
The addition of a
<div> tag does nothing for the appearance of your page. It looks exactly the same with or without the
<div>s. The important thing is that we’ve given the web browser more information about how our paragraphs (and whatever else) are related. We can later use this information with CSS to say “all divs inside other divs should be indented and green”, for example. We can more easily add visual information about entire regions if we group them using
This is also where we note again on the importance of proper nesting. Since we have
<div> tags inside of other
<div> tags, it can get confusing as to which
<div> tag we’re closing when we say
</div>. Indenting things as we’ve done can help this matter. Later we’ll learn how to use IDs and comments to make this even easier.