Lesson 4: Tags and Special Characters

Tags come in two varieties: block-level elements, which mark up larger sections, or blocks, within your document, and in-line elements, which are for smaller bits, usually contained within one line.


Block-level Elements

Here are some of the most common (and most useful) block-level tags:

<p></p>
Paragraph. Probably the most common tag you will use, it marks the beginning and end of a paragraph of text.
<pre></pre>
Preformatted text. This tag is good for examples of source code.
<div></div>
Block-level logical division. No default attributes.
<h1></h1>...<h6></h6>
All of the heading tags are block-level tags.
<li></li>
List items are block-level elements.


In-line Elements

In-line elements must be contained within block-level elements. Here again are some of the most common ones:

<strong></strong>
Used for text that you want to stand out.
<b></b>
Bolded text.
<em></em>
Gives emphasis to the encloded text.
<i></i>
Italicized text
<q></q>
Marks the beginning and ending of a quotation.
<code></code>
Indicates that the enclosed text is source code.
<a></a>
Sets an anchor which is used to create a link or a bookmark inside a document.
(see Lesson 6).
<span></span>
In-line logical division. No default attributes.


Object Elements

These three tags are special, because they insert objects rather than enclosing them. Since there is nothing to contain, they are both openning and closing tags in one:

<br />
Line break. This tag forces a line return. Beginning with XHTML, it needs to include a / to mark that it is both an openning and closing tag.
<img />
Image tag. Used to display an image. (see Lesson 7).
<hr />
Horizontal rule. Places a horizontal line across the page.

<hr /> is a block-level tag and should not be placed inside another block-level tag. <br /> and <img /> are in-line tags and must be contained within block-level elements to be valid xhtml.


Special Characters

Since <, >, and & have special meanings in XHTML, you can't use them to represent themselves in an XHTML document. When you do want to use them literally (as in XHTML source examples), you need to mark them up with special codes:

MARK-UP RENDER
&lt;<
&gt;>
&amp;&
&nbsp;non-breaking space


Exercises:

Copy minimal_page.html to a page called tags.html and do the following in the new document:

  1. Set the title and a top level heading to Tags.

  2. Place several lines of random text between <pre></pre>, including lots of spaces and new lines (from hitting the Enter key). Then change the the <pre></pre> tags to <p></p> tags. What happens?

  3. Try both the <div></div> and <span></span> in your document. What do the seem to do?

  4. Use each of the remaining tags from this lesson in your page.

  5. Create an example of XHTML source on your page. You will need to use the special characters to do this.

Congratulations, you have finished Lesson 4;

next lesson | home page