Attributes and Character Entities

Attributes

We have seen that tags are like verbs or commands; <em> means “start emphasis” </p> means “end a paragraph”, and <br /> means “move to a new line.”

If you remember your high school English, you know that verbs are modified by adverbs, which tell a verb where, when, how, or to what extent it should perform its action. If HTML tags are like verbs, we should have something like adverbs to allow us to modify the way they work. These “adverbs” are called attributes.

Let’s start by adding an attribute to an element you already know: the <abbr> element.

You are learning <abbr title="Hypertext Markup Language">HTML</abbr>.

• title="Hypertext Markup Language" is the attribute.
• title is the attribute name.
• Hypertext Markup Language is the attribute value.

Here is what it looks like. Hover the mouse over the HTML and see what happens.

In this course, you will always write the attribute name in lowercase to be compatible with the XHTML syntax, though it can be in either upper- or lowercase in HTML syntax. You will also always enclose the attribute value in either double quotes or single quote marks. In HTML syntax, the quote marks are sometimes optional. This was always a source of great confusion to beginning authors, who would constantly have to worry about whether or not they had one of the special cases that didn’t need them.

You may put whitespace around the equal sign if you think it improves readability. You must put whitespace between the tag name and the attribute name.

Here is another example using a new element: the <hr /> element. This element draws a horizontal rule, or line. It’s called a “rule” because that’s the typographical term for a line. You’ll notice that a lot of HTML terminology is borrowed from the world of typesetting and typography. The <hr /> element is an empty element, which means it uses the XHTML shortcut for opening-and-closing-tag-combined-into-one. Here’s what it looks like:

As you see, it draws a horizontal rule all the way across the browser window. But let’s say you want it to have a width that stretches only 70% of the way across the window. Write this tag:

<hr style="width: 70%" />

and it draws this:

As before, the attribute name is all lowercase, there is whitespace between the tag name and the attribute name, and the attribute value is enclosed in quote marks. By the way, we have just sneaked in the first look at using styles to affect how an element is presented.

Well, as long as we have started using styles, here is a way to use the style attribute to change the position of text on your page. Try these and see what they do.

<p style="text-align: center">Centered Text</p>
<p style="text-align: right">Right-aligned text</p>
<p style="text-align: left">Left-aligned text (the default)</p>

You can also do text alignment on headers <h1> through <h6> (among many other elements). Try it and find out.

For the moment, remember that your attribute names must be unique (you can’t put two title attributes on a <abbr>), and you must have whitespace between attributes. Important: Attributes go on the opening tag only. You never put attributes on a closing tag; it’s unnecessary, and it’s not valid HTML.

Character Entities

You’ve learned quite a bit of HTML so far, and you may be tempted to write something like this:

<p>Wow! Now I know about the <dfn> and <q> elements!</p>

Of course, we all know what you intend, but that’s certainly not what you’ll get. Try it and find out. The problem is that the <b> and <i> are real tags. You need some way to tell the browser, “No, no, no. That less than sign is not the beginning of a tag; I really want a plain old less than sign.”

Whenever you need a real less than sign, you must use <. That’s an ampersand symbol (&) followed by the letters lt, which stand for less than, followed by a semicolon. In fact, this is what we’ve been doing all along to show you these examples of HTML.

An ampersand followed by an abbreviation or a numeric code and a semicolon is called a character entity. These are listed in Appendix D of the book.

The other character entity which is absolutely required is the &, which produces an ampersand. Thus, if you want to say “x & y are < 15”, you must do it this way:

x & y are < 15

Although browsers are very forgiving, and will almost always let you get away with using a normal & or < rather than the character entity, the key word here is almost. Even if you do get away with it, it’s still not valid HTML.

You never need a character entity for a greater than sign, since there’s no question whether a > belongs to a tag or not. However, for the sake of symmetry, HTML provides the > for a greater than symbol.

You could write the first example above in either of these two ways. They both work (try it and find out) but, for someone who’s used to HTML, the second one looks better.

<p>Wow! Now I know about the &lt;dfn> and &lt;q> elements!</p>
<p>Wow! Now I know about the &lt;dfn&gt; and &lt;q&gt; elements!</p>

As the book says, you can also use numeric codes for character entities. A less than sign can also be written as < and an ampersand as &. The # is required in valid HTML.

<p>España y México</p>

<p>Espa&ntilde;a y M&eacute;xico</p>
<p>Espa&#241;a y M&#233;xico</p>

Rodriguez and Sons
x = y + z