Things are starting to look a little more interesting here. The first couple of lines on the page are big, mean and spread out! We are going to call those headers. As you move through the document you will notice that the standard sections we have been using in these lessons, More Detail and Review Summary now match the second line above.
The new elements we are introducing here are all block elements. Each of these
breaks the document up logically. The ones above are just part of a set.
They are called headers and the six tag sets are:
<h1> ... </h1>
<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> ... </h6>
Headers look like this:
Wow, those take up a lot of space huh? We'll talk about those cool lines later in this lesson, ignore them for now. You'll also notice that "H5" and "H6" are fairly small since they descend in size.
In general, "H1-6" (we're gonna call them that collectively) headers are are used to break a document into sections. They are often abused out in the big bad world to get big fonts, but you know better, right? More on abusing them below in the More Detail section.
Mostly you will find them nice to stick the title of the page in at the top and a couple of major headers in the document here and there. They are properly used only in descending order, with each header level denoting text of the same importance. If you were to put a whole book into one page then "H1" would be the title at the beginning, "H2" would mark the TOC, the start of the book, and the appendix, "H3" would name chapters and "H4" would mark sub-chapters or sub-sections.
If you were writing a paper for school that was really long and involved you might break the document into five or six levels from title to sub-sub-sections. The headers would correspond to the different levels of the outline at the beginning.
On the web, to keep documents small and manageable, organized, and to slip extra advertisements in, many people break these large "works" into multiple pages or files. In that case, you may see technical documents broken at one or more levels. In the case of this document, it starts with a "H3" tag since the "H1" tag for the entire document set is in the Main tutorial page where you started and the "H2" tag is the major section of the lesson plan, this one is Basic HTML. Each one of the lessons you are learning from are broken on an "H3" tag.
The fancy lines that separated the example headers above from the rest of
the document are called horizontal rules. They are created with the element
"HR". "HR" has no closing tag. The tag <hr> simply inserts
a rule or line into the document. Like the other tags in this lesson, it is
a block level element, which means that it closes "P" paragraphs and inserts
space before and after itself. Actually that isn't 100% true, read more below
in the More Detail section.
The main use for rules is to separate portions of content without changing the level and without giving each sub-section a title. "HR" breaks up the flow of the document without breaking topic. It was so abused early on that many people on the web still avoid it even where they should use it. It can waste a lot of valuable screen real-estate, too, so use it sparingly.
Keep in mind as we continue through the lessons that many people use style sheets or images to do the same visual job of breaking flow but when you really need the break in the logical content you should use this.
The "BLOCKQUOTE" element is a block element analogous to the "Q" inline element from the last lesson. The "BLOCKQUOTE" has been around for quite a while, from before browsers were expected to do the right thing quite as much as today so it unfortunately doesn't add beginning and ending quotes like "Q" is supposed to. It is a block element and usually displays with the right and left sides indented about a half inch each. It has a closing tag and is special in the sense that it is allowed to contain other block elements!
Blockquote, unlike "P", "PRE", and "H1-6" is self-nestable and can contain most other block elements. You can quote entire passages from other sources and have those quotations contain sub-quotations. Very powerful and it looks good too. Here is a example, the definition of deprecated from The Jargon File:
deprecated adj.
Said of a program or feature that is considered obsolescent and in the process of being phased out, usually in favor of a specified replacement. Deprecated features can, unfortunately, linger on for many years. This term appears with distressing frequency in standards documents when the committees writing the documents realize that large amounts of extant (and presumably happily working) code depend on the feature(s) that have passed out of favor.
That is pretty cool, right? I should note that this quote is from Jargon File 4.1.4, circa June 1999, and is subject to change definition as the web turns. Words are liquid in the Jargon File and change definition as different people stretch the words around for different things.
*
*
*
*
Now, head back to the Main tutorial page back to Lesson 3 or move on to Lesson 5.