Interactive Media Center
University Library, University at Albany

About HTML/XHTML
Technique
Tools
Web vs. Print

Getting Started
Setting Up the Basic Code
Adding and Formatting Text
Nesting Tags
Advanced Text Formatting
Color and the Web
Headings
Lists
Links
Layout and Tables
Advanced Table Formatting
Images
Putting It All Together
Adding An Image
Adding A Simple Table
Main Body Information
Finishing Touches
If You Continue On...

Adding and Formatting Text

In this next series of steps you will discover how to add next to your Web page and format for appearance.

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

You will start by adding a paragraph tag to the body of your Web page. The code is illustrated on the right.

Paragraphs are one of the elements that HTML is designed to identify. Notice that paragraphs are specified with the p tag, <p></p>.

NOTE: What is that text? The text illustrated in the example on the right is often called "Lorem Ipsum" from the first two words in this often quoted sample. It is a piece of classical literature in Latin that is regularly used by printers, graphic artists, and Web designers when "dummy" text is needed to show what a design, such as a Web page or printed brochure, may look like when completed. Because the appearance of the text mimics English, and because most people cannot read Latin, it is a useful tool for showing how a design will look while at the same time avoiding the natural tenancy to read text rather than concentrate on overall appearance and usability. An excellent source for Lorem Ipsum is the Web site www.lipsum.com where you can learn all about it and copy examples. For this tutorial you do not have to use Lorem Ipsum. You can type anything you wish.

No doubt by now you have noticed a pattern to the way container tags are formed. The closing part of a container tag always has a forward leaning slash, /, to it. This slash is what tells the browser that the use of the tag has ended and is closed.

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p><strong>Lorem ipsum dolor</strong> sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>

Let's format your text a little bit by adding some simple bold to the first few words of the paragraph. Insert the strong tag as shown on the right. How will this look when viewed in a browser? Click here to find out.

Notice that only the words inside the strong tag show up as bold. This is how container tags work.

 

 

 

 

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p><strong>Lorem ipsum dolor</strong> sit amet, consectetur <em>adipisicing elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>

Another container tag is the emphasis tag that is used to display text as italics. That tag is <em></em>. Try applying it to a section of text other than the part you bolded earlier. The example on the right will how you how this might be done. You can see a real Web page using the emphasis tag by clicking here.

Nesting Tags

Nesting tags refers to the order in which the opening and closing parts of tags appear when multiple tags are applied to a single segment of text or another object. For instance, a portion of text can be both bold and in italics. Proper nesting of the strong and emphasis tags would look like this:

<strong><em>This is bold and italics</em></strong>

The strong tag is on the "outside" while the emphasis tag is on the "inside" and the text is in the middle.

You could also make the tags nest thusly:

<em><strong>This is bold and italics</strong></em>

Improperly nested tags will not have the outside-inside-middle sequence. An example of an improperly nested set of tags is:

<strong><em>This is bold and italics</strong></em>

In the "old days" of the Web improperly nested tags usually did not make much difference. But, as the World Wide Web evolved it became increasingly important for browsers to adhere to common standards.

Today's XHTML has been described as a more strict version of HTML. In many ways that is correct. XHTML rules specify proper nesting, tag writing, and other important points. Modern browsers comply with these rules closely. If your code does not meet the rules, it may not display correctly on a monitor.

To find out more about HTML and XHTML rules, visit the World Wide Web Consortium at www.w3c.org. This is the organization that sets the specification of all things associated with the Web.