Article
XHTML Web Design for Beginners - Part 2
Text That Says Something
Congratulations! What for? For getting to here: you've got past the hardest section! Whether you understood everything you read so far, or just absorbed as much as you could, the next few sections should be a lot easier, as we look at the different elements in your XHTML arsenal and the implications that they have.
We're going to start to give more meaning to your text. This includes:
- Making certain words or phrases more important,
- Indicating citations,
- Providing the meaning of abbreviations and acronyms,
- Indicating quotes and
- Indicating computer-related information
Marking Paragraphs with <p>
Before we dive into those, let's take another look at the paragraph element <p>. The <p> element is used to contain your paragraphs. It is what we call a block or box element. This means that when it occurs in your document (in a visual browser) it will start on a new line, and when it finishes, the next element will start below it. This is best described by the example below.
Take a look at the code, which you've already seen in our first example:
<body>
<p>My first Web page.</p>
<p>I hope you like it.</p>
</body>
Here we have two paragraphs. Let's take another look at the way in which they would be displayed to understand what the <p> element is doing. I've added three blue bars to the picture to highlight the spacing and the new line that has been created from using the <p> element.
Without the <p> elements there would be no spacing, and the text would just appear in one long line.
Try it without the <p> elements.
This kind of element is called a box or block element because there is an (often invisible) box around the element, which separates it from the rest of the page. This is essential to make your document readable instead of just being one big bunch of text.
The second type of element is called an inline element. This is an element that doesn't have its own box, and doesn't effect the flow of text in any way. The elements we're looking at in this section are inline elements (unless otherwise stated).
Let's add some meaning to our text!
Adding Emphasis with <em>
First let's look at <em>. <em> is used to indicate text that should be given greater emphasis. It is more important than the text around it. In the paragraph below the phrase "The Lord Of The Rings" is considered more important, so it is given more emphasis using <em>.
<p><em>The Lord Of The Rings</em> was written by JRR Tolkien.</p>
The way in which <em> is handled by a Web browser will vary. A visual browser such as Internet Explorer will usually display the text in italics, whereas an audio browser such as an in-car Web browser or a browser used by the visually impaired may speak the word in a louder voice. Later on, we'll look at ways in which you can specify how your elements should be displayed, but for now we'll let the browser decide for us.
Adding Strong Emphasis with <strong>
The <strong> is similar to <em> except that it indicates a stronger emphasis. Let's alter the example above to give the text "JRR Tolkien" a strong emphasis.
<p><em>The Lord Of The Rings</em> was written by
<strong>JRR Tolkien</strong>.</p>
As with <em>, the way in which the <strong> element is handled depends on the browser being used. Visual browsers will usually display the text in bold, a speech browser may use an even louder voice than it does for <em>.