Article
XHTML Web Design for Beginners - Part 2
An entity reference begins with an ampersand, which is followed by the name of the entity reference. The whole is finished with a semi-colon, much in the same way that you use a left angle bracket and right angles bracket to denote (delimit) the start and end of a tag.
Character references, on the other hand, begin with an ampersand followed by a sharp symbol. This is followed by the number of the character reference, and is finished with a semi-colon.
Whether you use an entity reference or a character reference is up to you. I tend to use entity references because I find names easier to remember than numbers, but the choice is yours. Just don't forget that you need to include the sharp symbol in the character reference, and not with the entity reference.
I'll explain some of the entity and character references available to you in later sections, but I won't show you all of them individually, as there are far too many (approximately two hundred and fifty). For your reference, though, I've prepared three articles detailing the three sets available to you:
- XHTML Latin Character References
- XHTML Special Character References
- XHTML Symbol Character References
Not all these references work in all browsers, so be sure to test the ones you use.
Ampersands and Left Angle Brackets
Although it is possible to enter ampersands, &, and left angle brackets, <, with most keyboards, you should always use an entity or character reference when they appear in your content. Otherwise, as I mentioned above, there's no way for a computer to know the difference between the start of an entity/character reference, or a tag from an ampersand or a left angle bracket, respectively. Using character or entity references for those characters avoids this problem.
The following code contains an ampersand and a left angle bracket:
<p>Never use a < or an & directly in your content.</p>
The above code is wrong and should be written in one of the two following ways. The first uses entity references, while the second is written with character references:
<p>Never use a < or an & directly in your content.</p>
<p>Never use a < or an & directly in your content.</p>
White Space
White space refers to any characters in your document that do not serve any purpose other than creating space. This includes:
- spaces
- tabs
- form feeds
- zero width spaces
A form feed is the character at the end of each line that tells the computer to start a new line. A zero width space is used to separate words in languages such as Thai.
There are two issues relating to white space that you need to be aware of.
White Space Between Words
No matter how much space you leave between your words, Web browsers will always reduce it to a single space character. There is one exception to this rule that we'll cover in the next section.
What do I mean when I say "words"? I'm referring to any characters that aren't white space themselves, and which have no white space between them.
That might sound a bit complicated, but it's not. An example should help you understand.
<p>This content
has a lot
of white space
between the
words.</p>
If you view the above example in a visual browser you'll see that all the content appears on a single line, with a single space between each word. That's all there is to it.
This feature comes in very handy! It means you can use tabs, spaces and new lines to make your code easier to read, and not worry about your document looking funny in a visual browser.
Space Around Tags
You need to be careful about putting white space around your tags, until you get used to this rule. Then it will become second nature.
If you want a space to appear before or after a word that's contained by an element, you should put that space outside the element. By this I mean you should insert space before the start tag, and after the end tag. If you put the space inside the tags, you might not get any white space between your words.
<p>Always leave white space <strong>outside</strong> your
elements when you want it and
not<strong> inside </strong>.</p>
In the example above, the <strong> element containing the word "outside" has white space outside the tags, which is the correct way to insert space. The <strong> element that contains the word "inside" includes white space inside the tags and not outside. On some Web browsers there may not be any space displayed between the words "not" and "inside".
Comments
When you create your documents, you may want to include information in the code for yourself or others who view the document code. But how can you ensure this information doesn't appear to users who view the document in a Web browser? You'll need to use what we call a "comment". A comment has the following syntax:
You should be careful not to use two dashes together within your comments, as this could be interpreted by the browser to mark the end of the comment (even without the right angle bracket).
Here's an example:
<!-- This is the first Web page I ever created. -->
<p>My first Web page.</p>
<!-- This is a comment
spread over two lines. -->
As you'll see if you view this example, the text in the comments is ignored.
Comments are useful for leaving yourself reminders, such as notes on what still needs to be completed in a document.
Summary
In this section we have completed our look at the basic building blocks of XHTML. We've seen how to use special characters in our pages with character references and entity references, we've looked at the way white space is handled, and we've also seen how you can add comments to your code.
In the next section, we'll continue our coverage of the elements you can use that relate to text, including headings, line breaks and pre-formatted text.