LESSON 1 - 3 -- BASIC MARK-UP

OK we are going to get into the good stuff now. Real meat and potato type HTML. Up until now all we have been able to do is make a fancy text file We can break up paragraphs and link to the world but we can't tell people what is important on the page with font changes, set quoted or special text aside, or even make a word italic.

You have probably noticed that the first line for this page is in bold font, or if you are listening to the text it is read in a different tone or voice. The tag that makes that happen is the <strong> tag. "STRONG" is an inline container, which means that it has a closing tag </strong> and that it doesn't break the flow of a block like the "P" tag. All the tags in this section are inline tags with closing tags so we aren't going to keep mentioning it.

Since I'm being sneaky I slipped the next tag to discuss into the last paragraph. When I am putting in something that needs to be set aside from the text it appears in, whether it is important or if it is off topic, I will generally put it in <em> </em> tags. "EM" is short for EMphasis. Generally you "EM" something if you want to call attention to it and use "STRONG" to insist on attention for it. Long passages in "STRONG" are hard on the eyes but "EM" is usually rendered in italics which stand out without being annoying for long stretches. Go easy on them both to preserve their strength for when you need them.

At this point I should add that in the MORE DETAIL section below you will find out about two other tags <b> and <i> -- "B"old and "I"talics that are not supposed to be used anymore. Know that they are there, and that they are used everywhere but don't use them. Read why below.

"CITE", and "DFN" are in their own tags. If you viewsource you can see them. These two tags are normally shows as italicized but DFN is so new that some browsers don't recognize it. Since browsers are required to ignore mark-up they don't understand, it just winds up being treated like normal text on older browsers. "CITE" can be used around the author of a quote or the source of a quote. Most people in the world don't use these tags. =) "DFN" is to be used around the defining instance of a term. These would more likely be used in a educational setting where you had a program that went through the document looking for these items. It ain't all gold, baby.

"CODE", "SAMP", "KBD", "VAR", are also in their respective tags. The first three are normally displayed in an alternate font. In general practice, the alternate font is a monospaced, sans-serif font. Makes code look like is does in the text editor window and sets it apart from regular text. Mostly this is useful for things like HTML tags. You'll notice it use from now on when I show the actual form of a tag or tags, like this: <code>"CODE"</code>. "SAMP" would be used for sample output from a program, "KBD" to mark what you were expected to type into a program and "VAR" would highlight variables in the code. "VAR" tends to display in italics but is normally used inside the "CODE" element so it might look like this:<code>CODE <var>Variable</var> CODE </code> Now you have sans-serif italics!

And hey we move smoothly into something I haven't yet mentioned. Nesting! Most of the tags in HTML "Work well with others" It is perfectly normal to have text that is so complex that more than one mark-up should be applied to it. In fact, to really make something stand out you might want to make it both "EM" and "STRONG" to really shout at them. There will be more on nesting of tags later in the lessons. Promise.

"ABBR", "ACRONYM". Like previous examples, these two are in their respective tags. Unfortunately, they are really new and there isn't any real support for them right now. In the future you could mark up an acronym like this: <acronym title="HyperText Mark-up Language">HTML</acronym> and when you waved you mouse over the abbreviation or acronym the title text would appear in a little tooltip to explain it. More on tooltips in the MORE DETAIL section.

The "Q" element is for short quotations. The likelyhood is that the "Q" element isn't supported on your browser yet. In the future it will take care of adding quotes around a short quotation for you. If you nested two quotes, say if you were quoting someone who was quoting someone else it would take of putting the inner quote in single quotes and the outer in double. Like this: Dave said, I heard Kim say, No, now stop, but I didn't. Again, this probably isn't in quotes. =( but it should look like this: Dave said, "I heard Kim say, 'No, now stop,' but I didn't."

Now a couple of good elements. As usual they are in their own tags: _"SUB" and ^"SUP". These work well in almost every browser and do just what you would expect. They raise or lower the baseline of the text about 50%. Notice also what they don't do, change the size of the font. We'll cover how to do that later. Understand that you don't want the browser assuming that superscripts and subscripts should always be shrunk, that ties your hands when you just want to bump something around.

Just a couple more elements to go, but they are doozies. The first is simply nice to have. Up until now we have been at the mercy of the browser where text flow was concerned. Text in a paragraph, however it is marked-up, wraps at the right side of the page no matter what. If you wan't the lines to break earlier you had to put in another <p> tag. But then you got a blank line in there. That's OK for normal text but what if you had a poem?

There once was a barbarian from Halas
Who appeared at first a nice lass.
But after a while,
She said with a smile,
"Hey with F9 I can see my own ass!"

The new tag here is a single, it has no closing tag. It is <br>. This tag causes the browser to move to a new line. Now you can keep text that is legitimately all one paragraph but needs to "BR"eak lines within the paragraph together. Simple and powerful!

Now if we wanted it to look just like it does in a text file, with odd spacing of the lines, say if we wanted the "i"s to all line up we are still in trouble, because HTML eats all the whitespace at the beginning of a line.

  
There once was        a barbarian from Halas
Who appeared at first a      nice lass.
           But after  a     while,
       She said with  a     smile,
                        "Hey with F9 I can see my own ass!"

"PRE" is a powerful stick to beat a problem with, again, plan on using it sparingly but remember it because when you need it you will need it bad. Also, notice that "PRE" is a block like the "P" element. What it encloses is a different paragraph than the paragraph that preceded it.

MORE DETAIL!

Now you will be wondering about why I say "B" and "I" should not be used. The honest truth is there isn't anything wrong with them. They are handy, short and do just what anyone who has ever used a word processor would expect. The issue is more one of appropriateness.

By appropriate, I mean, "What do you use 'B' and 'I' for?" The answer is To make text Bold or Italics. See font markup is more appropriately done with CSS style sheets. You'll learn of those later. "EM" and "STRONG" imply more than font display settings, they imply what you normally mean when you bold or oblique text, that the text is of varying importance.

The reason we want to start using the newer tags with their more fundamental meaning is that in the future, just making text bold shouldn't always imply that the passage should be read out loud in a different tone to a blind person! There are times when you will want to embolden the text for visual layout reasons without having any shouting going on.

Keep in mind that HTML is up to version 4 now and really went through more than five or six major revisions. Tags that used to be common but are now no longer recommended are sometimes marked as deprecated. B and I aren't deprecated but their use is discouraged when you really do mean emphasis or strong emphasis rather than just bold and oblique.

Deprecated really means "to disapprove of" and is sometimes used like depreciate meaning "to belittle". Internet standards people have extended the first meaning to mean "we don't think this should be used anymore." Yahoo links the Jargon File which has a more complete definition of deprecated that I won't quote here.

Tooltips are a feature of most recent operating systems. In any Windows 95/8 program you should be able to move the mouse pointer over the little "x" that closes the window in the upper-right hand corner of the window bar and get the "Close" tooltip to appear. MacOS are on their own here, tho I will try and sneak a look at a friend's G4 and let you know. I am guessing when you surf in MSIE or NN you see some small text windows pop up over graphics when you mouse over them. This issue will come up again when we get to how to insert images.

When I talk about inline what I mean is markup that doesn't break the flow of the document. Making text bold shouldn't cause a new paragraph to start. Any markup that just changes small amounts of text without needing to be a whole new paragraph is called inline.

Right now you know of only a couple of pieces of markup that aren't inline. The "P" and "PRE" are called block markup since they break the text up into blocks. There will be a lot more block mark-up tags in the next section along with more on how they are displayed. For now it is enough to understand that inline elements can be used inside block elements and usually inside each other.

When you stick tags inside each other it is called nesting. Just like nesting quotations in english or parentheses in algebra, the beginnings and endings of tags need to match. A bit of HTML that looked like this:
Some <em>text and <strong> now more</em> and even more</strong> text
Some text and now more and even more text
This may work since most browsers are forgiving about the error but normally the tags should match like this:
Some <em>text and <strong> now more</strong> and even more</em> text
Some text and now more and even more text
This way the inner set of mark-up tags match and the outer pair match. Now if you wanted the look the first example might have intended you would need to code it like this to be proper:
Some <em>text and <strong> now more</strong></em><strong> and even more</strong> text
Some text and now more and even more text

That may all seem like more work but it lets the browser know what you really intended rather than trying to guess if you goofed up and switched the tags by mistake or if you really meant the third and were just lazy. This is one place where lazy doesn't pay off for you. Do it right, because if you get into bad habits it is going to really suck to track one of those miss-matches down when it looks different in two browsers and you don't know why.

REVIEW SUMMARY

* New tags, Yay!
* These elements all have closing tags except one.
* "EM" is emphasis like: This is emphasized
* "STRONG" is strong emphasis like: This is strong'ed
* "B" is like "STRONG" but use "STRONG" instead.
* "I" is like "EM" but use "EM" instead.
* "CITE" is for citations: This is a cite (rarely used.)
* "DFN" is for defining instances: This is dfn (rarely used.)
* "CODE" marks code: This is code (rarely used.)
* "SAMP" for sample output: This is samp (rarely used.)
* "KBD" for keyboard examples: This is kbd (rarely used.)
* "VAR" marks variables: This is var (rarely used.)
* "ABBR" marks abbreviations: This is abbr (never used.)
* "ACRONYM" is for defining instances: This is acronym (never used.)
* ABBR and ACRONYM are so new browsers no browser shows their expanded explanation from the title= attribute in a tooltip
* "Q" is a short quotation: This is a quote (new, rare, doens't add quotes like it should in many browsers.)
* "SUB" is a subscript: _{This is subscripted}
* "SUP" is a superscript: _{This is superscripted}
* "BR" inserts a line break without ending the block of text.
* <br> doesn't take a closing tag.
* "BR" does pretty good poetry and helps set aside examples.
* Hey this Review Summary looks pretty good with "BR"s!
* "PRE" is its own paragraph, it's a block.

* Mark's poetry is pretty bad.
* "B" and "I" imply only text formating, "EM" and "STRONG" imply meaning.
* Deprecated is a big word.
* "B" and "I" aren't deprecated, yet.
* The Jargon File is funny!
* MSIE is Microsoft Internet Explorer because I'm lazy.
* NN is Netscape Navigator for the same reason.
* Tooltips are going to come up again. And they are pretty cool.
* Inline means the mark-up doesn't break up the block.
* "BR" breaks up the visual presentation but no the logical content, thus it's inline.
* Most of the elements we have learned are inline.
* The other main type of element is called block.
* Block elements are "P" and "PRE" so far. They each break up the logical content into separate blocks like paragraphs.
* We're gonna get a lot more indepth about inline vs. block ya know.
* Nesting is cool. You can mark up things that are important, linked, and a citation.
* Making sure that tags nest properly will save my mind later.
* Something to make these Review Summaries and the sectioning up of documents would be handy. We should do that next.

Now, head back to the Main tutorial page back to Lesson 2 or move on to Lesson 4.