Looking Into Text and Tags - dummies

By Deborah S. Ray, Eric J. Ray

HTML documents contain text that you’re working with and tags that determine document elements such as headings, lists, and paragraphs. In addition, HTML tags enable other objects, such as images; style sheets; sounds; little programs called applets; and movies.

You don’t generally — at least as you’re starting out — need to concern yourself with formatting text or making sure that it looks good. The browser interprets the HTML and does all that for you. Instead, you focus on accurately entering the text and tags.

You use the HTML tags described in this article in pairs — one tag goes before the text, and the other tag goes after the text, as in the following example:

<TAG>whatever your text is</TAG>

  • The first tag (the opening tag) indicates the beginning of a tag that you’re applying to some of the text in your document.
  • The second tag (the closing tag) indicates the end of a tag that you’re applying.

The tags affect everything between the opening and closing tag.

Opening and closing tags are generally identical, except that the closing tag has a forward slash (/) before the tag name. The tag name is always exactly the same in the opening and closing tags.

Sometimes, opening tags also include an attribute, which is just an additional bit of information that further specifies information such as color, alignment, or the text that should appear to describe an image. In such a case, an attribute appears in the initial tag, as follows:

<TAG ATTRIBUTE=”More Info”>whatever your text is</TAG>

Make sure that you include the forward slash (/) in the closing tag (but don’t include the attribute). If you don’t, the browser doesn’t know that you want to end the style that the tag indicates. In addition, the style you applied more than likely goes on and on and on until the browser finds a closing tag. Consider entering both the initial and closing tags at the same time. That way, you don’t forget that essential closing tag.

Also, make sure that you do not include an extra space between the angle brackets and the text of the opening or closing tag. Extra space can confuse older, less-sophisticated browsers.

HTML tags are case insensitive, whichmeans that you can type the tags by using either UPPERCASE letters, lowercase letters, or BoTh. The recommended approach, however, is that you type the tags in all caps; typing the tags in all caps helps you differentiate between the tags and text, particularly after your HTML document becomes pages and pages long.

Make sure that you type the text between the tags so that the text is capitalized just as you want it to appear.

Formatting text

Browsers disregard all formatting that’s not incorporated by using markup tags. For example, they ignore extra spaces in the HTML document or blank lines that you use to move things down the page. As a result, the extra spaces, lines, or tabs that you put in don’t affect you’re the appearance of your document.

You, for example, can type your line as follows:

<TAG>hill of beans information</TAG>

Or you can type the line like this:

hill of beans information

Or even like the following example:


Any way that you type the tags and text, the result is the same.

If you work with HTML documents frequently, you find that spacing things out and being creative with indentations helps you find your place more easily.

Nesting tags

In many cases, you may want to nest tags inside other tags. Nesting tags simply means enclosing tags within tags. By nesting tags, you apply multiple tags to the same bit of text.

Suppose that you want to make text both bold and italic. You can’t achieve this effect by using only one tag — there isn’t a “BOLD-n-ITALICS HERE” tag. Instead, you nest one tag inside the other, as the following example shows:

<B><I>more hill of beans information</I></B>

Notice that the tag that appears first (in this case, the bold tag) also appears last. If a tag starts first, it ends last. If a tag is right beside the text on the front end, it’s right beside the text on the back end as well.

You can achieve the same effect by switching the order that you start the tags — as in the following line:

<I><B>more hill of beans information</B></I>

Notice that this example starts with the italic tag and nests the bold tags within the italic tags. Again, whichever tag you apply first doesn’t matter, as long as you nest them as described.