Example: Adding content to the template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>your site : location within site : topic title</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="your, keywords, here" /> <meta name="description" content="your description here" /> <meta name="author" content="your name here" /> </head> <body> <h1>Welcome!</h1> <p>Here are a few things I enjoy.</p> <h2>A poem . . .</h2> <p>What earthly tongue, and, oh! what human pen<br /> Can tell that scene of suffering, too severe.<br /> 'Tis ever present to my sight, oh! When<br /> Will the sound cease its torture on mine ear?</p> <h2>A recipe</h2> <p>I like this recipe so much, I tell all my friends about it!</p> <h3>Swirled coffee cake</h3> <ol> <li>Beat eggs, flour, butter and sugar until creamy</li> <li>Pour into round baking pan</li> <li>Slowly add and swirl any one or combination of the following ingredients: <ul> <li>chocolate sauce</li> <li>cinnamon crunchies,</li> <li>1 tsp nutmeg</li> </ul> </li> <li>Place in oven and bake for 40 minutes</li> </ol> <h2>Unusual terms</h2> <dl> <dt>Furkid (n)</dt> <dd>A pet treated as though it were one's child.</dd> <dt>Nearshoring (v)</dt> <dd>Restructuring a company's workforce by moving jobs to a nearby foreign country.</dd> <dt>Neurodiversity (n)</dt> <dd>The variety of non-debilitating neurological behaviors and abilities exhibited by the human race.</dd> </dl> <h2>When friends get in touch . . .</h2> <p><a href="mailto:firstname.lastname@example.org?subject=feedback">Feedback</a></p> </body> </html>
Load this on up in your web browser and take a look!
THE IMPORTANCE OF STRUCTURE
In this tutorial, you've gotten a great start learning about two of the most important aspects of a web page: text and links. But along the way, you also learned a bit about the importance of semantics, or meaning, of elements and their tags.
This understanding is so important because when you misuse elements to achieve visual results rather than to convey meaning, you limit the document a great deal. The meaning of these elements is a part of logical document structure, and a logical document structure, in turn, generates what's known as a document tree.
A clean document generates a logical document tree, making the CSS and scripting all the more easy because you can rely on advanced concepts in both that rely on such issues as inheritance. Without a clear document tree, you will be at a disadvantage when trying to debug documents.