HTML The Definitive Guide (14 page)
Read HTML The Definitive Guide Online
Authors: Chuck Musciano Bill Kennedy
The most common content-based style used today is that of emphasis, indicated with the tag.
And if you're feeling really emphatic, you might use the content style. Other content-based styles include , for snippets of programming code; , to denote text entered by the user via a keyboard; , to mark sample text; , for definitions; and , to delimit variable names within programming code samples. All of these tags have corresponding end tags.
2.6.1.2 Physical styles
Even the barest of barebones text processors conform to a few traditional text styles, such as italic and bold characters. While HTML is not a word-processing tool in the traditional sense, it does provide tags that tell the browser explicitly to display (if it can) a character, word, or phrase in a particular physical style.
Although you should use related content-based tags for the reasons we argue earlier, sometimes form is more important than function. So use the tag to italicize text, without imposing any specific meaning; the tag to display text in boldface; or the tag so that the browser, if it can,
displays the text in a teletype-style monospaced typeface. [Physical Style Tags, 4.5]
It's easy to fall into the trap of using physical styles when you should really be using a content-based style instead. Discipline yourself now to use the content-based styles, because, as we argue earlier, they convey meaning as well as style, thereby making your documents easier to automate and manage.
2.6.1.3 Special text characters
Not all text characters available to you for display by a browser can be typed from the keyboard. And some characters have special meanings in HTML, such as the brackets around tags, which if not somehow differentiated when used for plain text - the less-than sign (<) in a math equation, for example - will confuse the browser and trash your document. HTML gives you a way to include any of the many different characters that comprise the ASCII character set anywhere in your text through a special encoding of its
character entity
.
Like the copyright symbol in our simple example, a character entity starts with an ampersand followed by its name, and terminated with a semicolon. Alternatively, you may also use the character's position number in the ASCII table of characters preceded by the pound or sharp sign (#) in lieu of its name in the character entity sequence. When rendering the document, the browser displays the proper character, if it exists in the user's font.
[Character Entities, 3.4.2]
For obvious reasons, the most commonly used character entities are the greater-than (>), less-than (<), and ampersand (&
) characters. Check Appendix E, Character Entities, to find what
symbol the character entity ¦ represents.
2.6.2 Text Structures
It's not obvious in our simple example, but the common carriage returns we use to separate paragraphs in our source document have no meaning in HTML, except in special circumstances. You could have typed the document onto a single line in your text editor and it would still appear the same in
Figure
[2] We use a computer programming-like style of indentation so that our source HTML
documents are more readable. It's not obligatory, nor are there any formal style guidelines for source HTML document text formats. We do, however, highly recommend that you adopt your own consistent style, so that you and others can easily follow your source documents.
You'd soon discover, too, if you hadn't read it here first, that except in special cases, browsers typically ignore leading and trailing spaces, and sometimes more than a few in between. (If you look closely at the source example, the line "Greetings from" looks like it should be indented by leading
spaces, but it isn't in Figure 2.1.)
2.6.2.1 Divisions, paragraphs, and line breaks
A browser takes the text in the body of your document and "flows" it onto the computer screen, disregarding any common carriage-return or linefeed characters in the source. The browser fills as much of each line of the display window as possible, beginning flush against the left margin, before stopping after the rightmost word and moving on to the next line. Resize the browser window, and the text reflows to fill the new space; indicating HTML's inherent flexibility.
Of course, readers would rebel if your text just ran on and on, so HTML does provide both explicit and implicit ways to control the basic structure of your document. The most rudimentary and common ways are with the division (
), and line-break (
) tags. All break the text flow, which consequently restarts on a new line. The differences are that the
tags define an elemental region of the HTML document and text, respectively, whose contents you may specially align within the browser window, apply text styles, and other block-related features.
Without special alignment attributes, the
tags simply break a line of text and place subsequent characters on the next line. The paragraph tag adds more vertical space after the line break than either the
tags. [The
[
, 4.1]
, 4.7]
By the way, the HTML standard includes end tags for the paragraph and division tags, but not for the line-break tag. Few authors ever include the paragraph end tag in their documents; the browser usually can figure out where one paragraph ends and another begins.[
3
] Give yourself a star if you knew that
[3] The paragraph end tag is being used more commonly now that the popular browsers support the paragraph-alignment attribute.
2.6.2.2 Headings
Besides breaking your text into divisions and paragraphs, you also can organize your documents into sections with headings. Just as they do on this and other pages in this printed book, HTML headings not only divide and title discrete passages of text: they also convey meaning visually. With HTML, however, headings also lend themselves to machine-automated analyses.
There are six HTML heading tags,
through , with corresponding end tags. Typically, the browser displays their contents in, respectively, very large to very small font sizes, and sometimes in boldface. The text inside the
tag is usually the same size as the regular text. [Heading Tags,
tag is usually the same size as the regular text. [Heading Tags,
The heading tags also typically break the current text flow, standing alone on lines and separated from surrounding text, even though there aren't any explicit paragraph or line-break tags before or after a heading.
2.6.2.3 Horizontal rules
Besides headings, HTML also provides horizontal rule lines that help delineate and separate the sections of your document.
When the browser encounters an
tag in your document, it breaks the flow of text and draws a line completely across the display window on a new line. The flow of text resumes immediately below the rule.
[The
Tag, 5.1.1]
2.6.2.4 Preformatted text
Occasionally, you'll want the browser to display a block of text as-is: for example, with indented lines and vertically aligned letters or numbers that don't change even though the browser window might get resized. The HTML
tag rises to those occasions. All text up to the closingend tag appears in the browser window exactly as you type it, including carriage returns and line feeds, leading, trailing, and intervening spaces. Although very useful for tables and forms,
text turns out pretty dull; the popular browsers render the block in a monospace typeface.
Section 4.7.5, "The2.5 The Flesh on an HTML
2.7 Hyperlinks
Document
