3: Logical Text Commands

Why are they called 'logical' text commands? Well, that's to distinguish them from text formatting commands. HTML is designed to mark your pages according to what the structure of the content is, not what you want it to look like. Because, you see, you don't know - you have no way of knowing - what kind of browser is going to be rendering your page. It might be Netscape or IE at one of several screen resolutions - all of which changes your page layout. It might be a text-to-speech browser, which doesn't want to know how pretty your page is, but needs to know how it's logically laid out.

The very first 'logical' (or 'structural' if you prefer) tag that you should learn is the "Paragraph" tag.

 paragraph text goes here 

Strictly speaking, you don't need the closing tag - the browser will assume that you've ended one paragraph when it sees the beginning tag of the next one. Again, it's a good idea, just for consistency's sake.

The 'P' tag usually renders the text flush left with an empty line between paragraphs. It is not recommended to force an indent of your paragraphs by putting special 'whitespace' characters. Would you really want to type

   

at the beginning of every paragraph, just to get a three-space indent? (  is the 'non-breaking space' character. It has its uses, which I'll get to later)

If you want a line break but you don't want the empty line, you should use the BR tag. This forces a line break at the given spot. (There is no closing tag, because this does not affect a certain amount of text. It is simply a marker that indicates when to start a new line.)

Start a paragraph 
The second line, but still in the same paragraph

Now, the large titles at the top of my pages are structural elements, called 'headers'. I don't care how exactly the browser renders them, as long as it indicates that text's importance somehow. In graphical browsers, that's usually done by increasing the size depending on the header level. Other types of browsers do it differently. For example, lynx centers header one, puts header two flush left, and indents headers three through six by an increasing amount. In the browser you are using to read this page, the different header levels render as follows:

Header level one, the most important

Header level two: first subheading

Header level three

Header level four

Header level five

Header level six

The code used is:

<H1> Header one text </H1>

and so on, changing the number in the tag for each level. Don't forget to close the tag with the right number, or your entire document will be formatted as a header!

So go on, put some paragraphs and headers into your test document. Save it and see how it looks.

Now, there are some other logical text markup tags that some people use for formatting. While the EM tag usually renders as italics, in a text-to-speech browser may change the tone of the generated voice - while format tags probably won't cause this effect. However the word 'italics' is displayed is how your browser renders the 'emphasis' tag. On lynx on my computer it's purple, and on Netscape it's italic.

Another tag is STRONG which usually renders as boldface. (On lynx, this also renders as purple)

The other basic logical text tags are CITE, BLOCKQUOTE, and Q.

Now, a quote (the Q tag) and a citation (the CITE tag) are used for short quotes inside the flow of the paragraph. For example, the W3C says in the <CITE>document type definition</CITE> that it <Q>excludes the presentation attributes and elements</Q> in favour of style sheets.

Now, the quote shown didn't appear to have any changes made to the formatting in my copy of Netscape (4.7), but lynx and Mozilla put double quotes around it. The citation showed up in Netscape and Mozilla as italics, and in lynx as purple. I can't test IE, because it doesn't run on Linux. If somebody wants to tell me how it looks, I'll add in the description.

Alternatively, if you have a long quotation that you want to separate a bit more clearly from the rest of the text, you can use the BLOCKQUOTE tag.

<BLOCKQUOTE> Now if this were actually a quotation, I would have included a CITE tag either before or after this block, to give credit where credit is due. But this is just me rambling to fill up space, so no CITE is needed.</BLOCKQUOTE>

So now, if you look at the source to this page, you'll see that it's the BLOCKQUOTE tags that put the indent in there.

And there's one last logical text tag that I have to include, since I promised that I wouldn't use any tags in the tutorial that I don't describe - the CODE tag. I used this to show what was HTML code. In Netscape and Mozilla, it's displayed as a monospaced font (the 'i' and 'm' are the same width) and in lynx there's no special indication because everything in lynx is displayed in monospaced font.

HTML Tutorial index | Beginners Tutorial index
<< Back: Basic page layout | Next: Text formatting >>