Coding: XHTML: Text Tags

Once you've created the document and added the items for the head area, it's time to develop the body content.

The Text Tags are an area that have changed since the shift from HTML to XHTML and CSS. The main change is that you SHOULD NOT use the <font> tag. Instead you should use predefined styels and the basic headings and paragraph tags. Go to W3 Schools for a nice overview of the basic tags.

Read Chapter 4: Basic (X)HTML Formatting by Elizabeth Castro in HTML, XHTML, & CSS, Sixth Edition.

Headers, Paragraphs, Divisions, Spans, and BlockQuote

Let's add some text. Headers can be used in your web pages like chapter names, they hierarchically divide your web page.

Headers

HTML provides up to 6 levels of headers (h1, h2, h3, h4, h5, h6). Be consistent in your use of headers. You should always arrange headers hierarchically on your page - that is don't skip levels or go from h1 to h4 - it makes your pages look odd. For accessibility reasons, header tags should only be used as section headings in an HTML document. Never to format blocks of text. Also, you don't need to include paragraph markers before or after heading tags - they are assumed. And you don't need to include a <b> tag with the header tag - it is also assumed! Be sure to include a start tag <h1> and end tag </h1>.

Example

<h1>LITEhouse Award Nomination</h1>

Go to W3 Schools to try using the heading tags.

Paragraphs

Each paragraph in your document should have a start <p> and end tag </p>.

Go to W3 Schools to try using the paragraph element.

Example

<h1>LITEhouse Award Nomination</h1>
<h2>ZigZag Public Library</h2>
<p>Innovative, unique, and powerful are just a few of the many words that describe this wonderful library.</p>

Divisions

The div tag is an empty block-level tag used to break up the page into sections or divisions. It allows you to apply styles to an entire chunk of your page at one time. This is very useful when designing with layouts. For example, you might have a division for your masthead, top navigation, sidebar, feature, and footer.

Example

<div id="sidebar">
<h1>News</h1>
<h2>Wildcats Win!</h2>
<p>The Wildcats won their second straight game 72 to 66.</p>
</div>

Spans

The span tag is an empty inline tag. It is used to organized small chunks of content. A span has no inherent formatting. You often use a id or class attribute to identify the spanned content.

Example

<p>The beagle won the <span class="highlightred">Best in Class</span> award.</p>

 

Block Quote

If you want to indent a block of text such as a quotation, use the blockquote. If you want to indicate the citation, you can use the cite attribute.

Example

<blockquote cite="http://thoreau.eserver.org/quotes.html">
<p> Nature is full of genius, full of the divinity; so that not a snowflake escapes its fashioning hand. - Henry David Thoreau in Walden</p>
</blockquote>

 

 

Preformatted Text

Use the preformatted text tag to preserve spaces and line breaks. This is good for poetry and computer code. You use <pre> and </pre> between the formatted text.

Result

		  With preformatted text
		  I can add extra spaces    and line breaks
		      and indents whereever I wish.
			  

Go to W3 Schools to try using the preformatted text.

Comments

Sometimes you want to enter content in the code that won't appear on the web page. These are often notes to future web editors.

Example

<!-- This section is still under development. This is spot where I ended my last code clean up. -->

Text Tags and Attributes

Many other tags are available for text. Many of these tags have attributes. An attribute provides specific information about the function. For example, it might indicate the alignment or color. In the examples below, notice that attributes have a standard format. They start with attribute and an equal sign. The information is then placed in quotation marks.

Try some of the following tags to add interest to text.

Line Break

When you want one line to appear directly under the next without the space found between paragraphs, use a line break.

Example

Cat in the Hat <br/>
Green Eggs and Ham <br/>
Hop on Pop <br/>

Horizontal Line / Horizontal Rule

If you'd like to add a horizontal line, use the <hr /> tag.

Example

<hr />

<hr size="xx" width="xx%" align="direction" noshade="noshade" />

<hr size="5" width="80%" align="center" noshade="noshade" />

Boldface, Italics, Strong

Other common formats include boldface <b>, italic <i>, emphasis <em>, strong <strong>, superscript <sup>, subscript <sub>.

<b> insert text to bold here </b>

<i> insert text to italic here </i>

There are also block formats including strike <strike>, newly inserted <ins>, del <del>, blockquote <blockquote> tags.

_{insert text to subscript here}

^{insert text to superscript here}

<blockquote> insert text here </blockquote>

Try It!

Create a small section of text. For example, you might try a page title, first heading, and a couple paragraphs of text. Then, maybe a bibliography at the bottom of the page.

Colors

There are two ways to add colors to your fonts. You can use names or numbers. Although you can use names such as red, green, blue, it's not considered good practice. Instead you should use what are called Color HEX such as #FF0000 for red and #0000FF for blue. This hexadecimal notation refers to the value of the light source when combining red, green, and blue. Check out a color chart at W3School. Or, check out the HTML Color Names list. Or, check out the ColorPicker II at Pagetutor.

We'll talk more about colors when we set up our Cascading Style Sheet.

Deprecated Tags

The font tag element was deprecated in HTML 4.01. In other words, most people use other ways to indicate fonts such as style sheets. When we explore style sheets (CSS), you'll learn more about fonts.

There are also some tags you should avoid. Do not use underline <u>, it confuses readers.

Your Document

Your document should now look something like this:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Annette Lamb's Personal Page</title>
<meta name="author" content="Annette Lamb" />
<meta name="keywords" content="pet, dog, puppy, cat, kitten, fish" />
<meta name="description" content="Choosing a pet." />
<meta name="copyright" content="&copy; 2007 Annette Lamb" />

</head>

<body>

<h1>Choosing A Pet</h1>
<p>Before you choose a pet, it's a good idea to explore the possibilities. Are you ready for the responsibility of a pet? Read the book <b>Pets for Kids</b>.</p>

</body>

</html>

---