Additional Tags
In going through this tutorial, most of the tags that would be needed to mark up a text document have been introduced, along with the tags needed to add images and hypertext links. There are other tags that are commonly used for marking up texts that were not covered in building the solar system page, so I will introduce them here.
The em and strong Tags
In a text document, there are often words and key phrases that you might
wish to emphasize. The tag for emphasis is em. This is an
inline tag, so must be used inside another element, such as a paragraph
or list element.
For example, take this paragraph:
The study of our solar system began in prehistoric times. There was the sun and the moon, but early astronomers, using only the naked eye, recognized certain bodies in the sky, known as "wanderers", or planetes in Greek. The wanderers were eventually given names, and are now known to us as Mercury, Venus, Mars, Jupiter and Saturn.
If I wished to emphasize the planet names given in this text, I could wrap
them in em tags, like <em>Mercury</em>.
Most browsers render emphasized text in italics.
The study of our solar system began in prehistoric times. There was the sun and the moon, but early astronomers, using only the naked eye, recognized certain bodies in the sky, known as "wanderers", or planetes in Greek. The wanderers were eventually given names, and are now known to us as Mercury, Venus, Mars, Jupiter and Saturn.
If I wished to make a strong emphasis on a text phrase or word, I could use
the strong tag. For example, using the same sample paragraph, I
could strongly emphasize the Greek word planetes by marking it up
as <strong>planetes</strong>. The paragraph would now
look something like this:
The study of our solar system began in prehistoric times. There was the sun and the moon, but early astronomers, using only the naked eye, recognized certain bodies in the sky, known as "wanderers", or planetes in Greek. The wanderers were eventually given names, and are now known to us as Mercury, Venus, Mars, Jupiter and Saturn.
Most browsers render strongly emphasized text in bold.
The sub and sup Tags
Subscripts are seen quite often when reading text with chemical notations,
such as H2O for a water molecule. Subscripts are rendered slightly
below the regular text, and are marked up using the sub tag.
The water molecule notation could be marked up to properly display the number
2 as a subscript as H<sub>2</sub>.
H2O without using the sub tag.
H2O using the sub tag.
Superscripts, on the other hand, are rendered slightly above the regular
text. These are often seen when marking a footnote or citation, or in
mathematical units such as cubic meters (m3). To mark up the
superscript for the cubic meter notation, I would use
m<sup>3</sup>.
m3 without using the sup tag.
m3 using the sup tag.
The code and pre Tags
These two tags abound in the markup for this tutorial. When including
examples of markup code in the text, I used the code tag, which is
used to signify computer code. For example, to signify the sup
tag as code when discussing it in the previous section, I marked all the
occurances of sup as <code>sup</code>.
Browsers should render code elements with a fixed-width font,
such as Courier New. The code tag is an inline element, so should
be included inside another element, such as a paragraph.
The pre tag is to mark up preformatted text. Visual browsers
should render this text in a fixed-width font, and keep spaces, indentation,
and line breaks intact. When giving a block of XHTML markup in the text of
this tutorial, I wrapped the XHTML markup to display within pre
tags.
For example the markup for:
<html>
<head>
<title>The Solar System</title>
</head>
<body></body>
</html>
appears in my source code (entities included, it's ugly) as:
<pre><code><html>
<head>
<title>The Solar System</title>
</head>
<body></body>
</html>
</code></pre>The code tag is used to mark up this section of text as
computer code. However, if I removed the code tags, the
displayed markup would still look ok:
<html> <head> <title>The Solar System</title> </head> <body></body> </html>
If I also removed the pre tag, the source XHTML would have
appeared like this:
Which is not ok. All spaces and line breaks were treated as a single space, and the font is rendered in the default font type, which is likely not fixed-width.
Adding back the code tag should put it back in the fixed-width
font, but my line breaks and extra spacing would still not be rendered:
<html>
<head>
<title>The Solar System</title>
</head>
<body></body>
</html>
So, since I wanted the XHTML markup to appear "just so" when displayed,
I used the pre tag.
<html>
<head>
<title>The Solar System</title>
</head>
<body></body>
</html>
Ahhh, at last I got it right!
The var Tag
When including code samples in this tutorial, some of the values in the samples were variables. For example, the following line has "attribute name" and "attribute value" as variables.
An XHTML attribute is specified by attribute
name="attribute value".
To mark up those two variables, I used the variable var tag.
Visual browsers normally render the contents of the var element
in italics.
<p>An XHTML attribute is specified by <code><var>attribute name</var>="<var>attribute value</var>"</code>.</p>
The address Tag
The address tag is not intended for postal addresses.
The address information should contain information about the person responsible
for the content and/or the maintenence of a document, or a portion of a document
such as a form. For example, many online stores have an ordering form on a
web page for users to place orders online. Usually contact information
for ordering questions or questions about using the form is provided:
<address>For questions using our online ordering form, please
contact our customer representative at
<a href="mailto:janedoe@xyz.com">janedoe@xyz.com</a>.
</address>
If you wished to include contact information for your pages, it is
quite common to include an address element at the bottom of
a page:
The abbr and acronym Tags
The abbr tag is used to mark up abbreviations used in text.
For example, the United Kingdom is often abbreviated to the U.K. To provide
an aid, I can mark this up in the text with an abbr tag with
the title attribute in order to provide a tooltip popup.
<abbr title="United Kingdom">U.K.</abbr>Which renders like this:
Unfortunately, Microsoft's Internet Explorer 6 doesn't implement the
tooltop functionality for the abbr tag, but it does for the
acronym tag, which is
used for abbreviations that are commonly used as words, such as scuba,
for "self-contained underwater breathing apparatus".
<acronym title="Self-contained Underwater Breathing
Apparatus">scuba</abbr>Which renders like this, and the tooltip should display in Internet Explorer 6 also.
So to accomodate the Internet Explorer users, you may wish to consider using
acronym tags for all abbreviations you want to mark up.
Definition Lists
Definition lists are extremely useful for marking up a list of terms
and definitions, such as in a glossary. Like lists, they are marked up
with a container tag for the list (dl). However, definition
lists are different from unordered and ordered lists, in that the list
elements come in pairs -- the term (dt) and the definition
(dd) for the term.
The structure of the list is coded like this:
<dl> <dt>term</dt> <dd>definition</dd> <dt>term</dt> <dd>definition</dd> <dt>term</dt> <dd>definition</dd> </dl>
For example, I could decide to include a list of the mythological dieties whose names were used to name the planets. The markup for Mercury and Venus would be:
<dl>
<dt>Mercury</dt><dd>The Roman winged messenger of the gods. He was also
the god of speed and commerce.</dd>
<dt>Venus</dt><dd>The Roman goddess of love and beauty. She was also
worshiped as the goddess of Spring and military victory.</dd>
</dl>
Which would be rendered as:
- Mercury
- The Roman winged messenger of the gods. He was also the god of speed and commerce.
- Venus
- The Roman goddess of love and beauty. She was also worshiped as the goddess of Spring and military victory.
The div and span Tags
The div and span tags are generic container
tags, div for a generic block-level container, span
for a generic inline container.
The div container is commonly used to contain sections of
a document that do not structurally belong in another block-level element. An
example of this is the image of the solar system we wished to include at
the top of the solar system page. The span element is useful for indicating
phrases or words that there is no markup for. For example, when mentioning
a person in the text, you may wish to mark up the name within a
span tag. Span tags are normally used with its
class attribute.
<p>Those who dared suggest the sun was the center of our
solar system were regarded as blasphemers, and
<span class="person">Galileo</span> was condemned for heresy
for his support of <span class="person">Copernicus</span>' theory
that the earth orbited the sun, not vice versa.</p>Adding Comments
Comments can be included in the XHTML document by enclosing them in
<!-- and --> tags. The -->
tag is
considered to close the comment, so you should not add a forward slash
before the > symbol. Comments should also not include
double dashes (--) within the body of the comment. A comment
can span multiple lines. Comment content is ignored by a browser and is not
rendered. This can be useful if you want to temporarily "turn off" sections
of a document from displaying during testing.
An example of a comment:
<!-- This section contains the markup for the planet table -->
The next chapter will summarize the rules for XHTML, and provide a recap of what has been covered in this tutorial.
Introduction | Getting Started | A Basic XHTML Page | Basic Tags | Quotations | Tables | Text Links | Images | Image Links | Image Maps | Finishing Touches | Additional Tags | Conclusion | XHTML 1.1