XHTML Structure
This section covers basic
XHTML elements, such as those used to create new paragraphs, headers, page
breaks, and comments.
NOTES:
The head section
defines the title of the page and other information that isn't usually visible
to the viewer of your page, but is useful to search engines. The body
section contains the content of the Web page.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>
All markup documents should
specify the character encoding in which they should be displayed. The most
accepted character encoding for XHTML markup is UTF-8 (8-bit Unicode
Transformation Format). Briefly, Unicode is an industry standard
allowing computers to consistently represent and manipulate text expressed in
any of the world's writing systems (Wikipedia, Unicode Transformation
Format). The meta element is used to define the character encoding. In
the example markup below, the http-equiv attribute
indicates that the given meta element is specifying information about the content
of the markup. The content attribute indicates that the markup is text-based
HTML with a character set of UTF-8. Typically you can simply copy the meta element shown below directly into your XHTML document
and not worry about the meaning of the various attribute values.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="content-type" content="text/html;
charset=utf-8" />
</head>
<body>
</body>
</html>
Each XHTML page must have a title element. A title should be short and descriptive,
because the text appears in the title bar of the browser window, and more
importantly, is used in search engine results. A title cannot contain
formatting, images, or links.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>Programming is Fun!</title>
</head>
<body>
</body>
</html>
XHTML provides six levels of
headers, h1 through h6, which can
be used to break your page into sections. Think of headers as hierarchical
dividers like those used in an outline. Smaller numbered headers represent
bigger chunks of the document, such as chapters, and are displayed more
prominently than higher numbered headers.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>Programming is Fun!</title>
</head>
<body>
<h1>History of Programming</h1>
<h2>Before Computers</h2>
<h2>After Computers</h2>
</body>
</html>
This is how the page may
appear in the browser.
History of Programming
Before Computers
After Computers
Paragraphs cannot simply be
created by adding newlines because XHTML parsers ignore newlines or other extra
white space in the markup. To start a new paragraph, use the p element.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>Programming is Fun!</title>
</head>
<body>
<h1>History of Programming</h1>
<p>We
will now discuss the history of programming.</p>
<h2>Before Computers</h2>
<p>The
abacus was about as fun as a bag of rocks.</p>
<p>You
might try looking up Charles Babbage on Wikipedia.</p>
<h2>After Computers</h2>
<p>Fun,
joy, excitement, money!</p>
</body>
</html>
This is how the page may
appear in the browser.
History of Programming
We will now discuss the history of programming.
Before Computers
The abacus was about as fun as a bag of rocks.
You might try looking up Charles Babbage on Wikipedia.
After Computers
Fun, joy, excitement, money!
Divisions are denoted
using the div element, and are primarily used to break text into
blocks that can be formatted using cascading style sheets. Although not
required, you can uniquely identify a division by using the id attribute, or identify classes of divisions using the
class attribute. These attributes are helpful for applying
styles. For example, you may want to format the header and introductory text in
the History of Programming section differently than other level-one headers,
while using the standard formatting for the subsections. The following
specification accomplishes these goals:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>Programming is Fun!</title>
</head>
<body>
<div
id="history">
<h1>History of
Programming</h1>
<p>We will now discuss the
history of programming.</p>
</div>
<div
class="subsection">
<h2>Before
Computers</h2>
<p>The abacus was about as fun
as a bag of rocks.</p>
<p>You might try looking up
Charles Babbage on Wikipedia.</p>
</div>
<div
class="subsection">
<h2>After Computers</h2>
<p>Fun, joy, excitement,
money!</p>
</div>
</body>
</html>
Spans are used to
identify smaller blocks of text than headers or divisions, and are primarily
used to format inline text with styles. In the example below, spans are used to
identify key terms and people.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>Programming is Fun!</title>
</head>
<body>
<div id="history">
<h1>History of
Programming</h1>
<p>We
will now discuss the <span
class="keyterm">history of programming</span>.</p>
</div>
<div class="subsection">
<h2>Before
Computers</h2>
<p>The <span class="keyterm">abacus</span> was about as fun as a bag of
rocks.</p>
<p>You might try looking up <span class="person">Charles
Babbage</span> on
Wikipedia.</p>
</div>
<div class="subsection">
<h2>After Computers</h2>
<p><span
class="keyterm">Fun</span>,
joy, excitement, money!</p>
</div>
</body>
</html>
Browsers ignore line breaks
in your text and automatically wrap lines. You can force the browser to break a
line by using the br element. Line breaks are appropriate for short lines
of text that should appear one after another without much space in between. In
the example below, line breaks are used to format a table of contents.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>Programming is Fun!</title>
</head>
<body>
<div
id="tableofcontents">History of Programming<br />
Before Computers<br />
After Computers<br />
</div>
<div id="history">
<h1>History of
Programming</h1>
<p>We will now discuss the
<span class="keyterm">history of
programming</span>.</p>
</div>
<div class="subsection">
<h2>Before
Computers</h2>
<p>The <span
class="keyterm">abacus</span> was about as fun as a bag of
rocks.</p>
<p>You might try looking up
<span class="person">Charles Babbage</span> on
Wikipedia.</p>
</div>
<div class="subsection">
<h2>After Computers</h2>
<p><span
class="keyterm">Fun</span>, joy, excitement,
money!</p>
</div>
</body>
</html>
This is how the page may
appear in the browser.
History of Programming
Before Computers
After Computers
History of Programming
We will now discuss the history of programming.
Before Computers
The abacus was about as fun as a bag of rocks.
You might try looking up Charles Babbage on Wikipedia.
After Computers
Fun, joy, excitement, money!
Comments are useful for
reminding yourself or informing others about what your markup should do.
Comments do not appear in the page text shown to the user. To create a comment,
start with <!--, type your comment, then close it with –->. NOTE:
Comments cannot be nested in other comments.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>Programming is Fun!</title>
</head>
<body>
<!-- Ye olde table of contents -->
<div
id="tableofcontents">History of Programming<br />
Before Computers<br />
After Computers<br />
</div>
<div id="history">
<h1>History of
Programming</h1>
<p>We will now discuss the
<span class="keyterm">history of
programming</span>.</p>
</div>
<div class="subsection"> <!--
The first subsection -->
<h2>Before
Computers</h2>
<p>The <span
class="keyterm">abacus</span> was about as fun as a bag of
rocks.</p>
<p>You might try looking up
<span class="person">Charles Babbage</span> on
Wikipedia.</p>
</div>
<div class="subsection">
<h2>After Computers</h2>
<p><span
class="keyterm">Fun</span>, joy, excitement, money!</p>
</div>
<!-- More stuff should probably go here
-->
</body>
</html>
You can use the title
attribute of most XHTML elements to add a tooltip, a small string of
text that appears when the mouse cursor is positioned over a particular XHTML
element for a few seconds. For example, you can add a tooltip for the table of
contents section so that the user knows why the text is there.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>Programming is Fun!</title>
</head>
<body>
<!-- Ye olde table of contents -->
<div id="tableofcontents" title="Table of Contents">History
of Programming<br />
Before Computers<br />
After Computers<br />
</div>
<div id="history">
<h1>History of
Programming</h1>
<p>We will now discuss the
<span class="keyterm">history of
programming</span>.</p>
</div>
...