In this next series of steps you will discover how to add next to your Web page and format for appearance.
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.
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.
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 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:
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:
Improperly nested tags will not have the outside-inside-middle sequence. An example of an improperly nested set of tags is:
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 of XHTML, 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.w3x.org. This is the organization that sets the specification of all things associated with the Web.