Creating a Website: The Missing Manual (2015)

Part 5. Appendixes

Appendix B. HTML Quick Reference

HTML is the language of the Web. You can use it to create any web page, whether you’re promoting a local bake sale or running a Fortune 500 company. Chapter 1 introduced you to HTML, and since then, you’ve steadily added to your arsenal of HTML elements.

This appendix provides a quick reference of all the HTML elements you’ve seen in this book (and a few more). Each entry features a brief description of the element, and many entries provide cross-references to more detailed examples in the book. The list includes the most usable new elements from the latest version of HTML, HTML5. You’ll also get a quick refresher on HTML character entities, which let you display special characters on a web page.

HTML Elements

As you know, the HTML standard is based on elements—specialized codes in angle brackets that tell a browser how to format text, when to insert images, and how to link different documents together.

The elements listed below are arranged in alphabetical order. The beginning of each section details the type of element it is:

§ A block or inline element. Block elements are separated from other elements with a bit of extra white space. For example, the <h1> block element adds a heading to your page on its own line and separates it from the preceding and following content with some padding and margin space. (Of course, you can alter or remove this space using the margin and padding style properties.)

NOTE

In official HTML5 lingo, block elements are called flow elements, and inline elements are called phrasing elements.

§ A container or standalone element. A container element holds text or other elements inside it. A standalone element can’t contain anything, so you usually write it as only one tag using the empty element syntax (Understanding Elements). HTML limits where you can put somestandalone elements, meaning you can associate them only with certain other elements. For example, you can associate the <area> element, which defines an image-map hotspot, only with the <map> element, which defines an image map.

The section below doesn’t include any of the new elements from HTML5—you’ll find those in a separate section, starting on HTML5 Semantic Elements.

<a> (Anchor Element)

Inline Element, Container Element

The anchor element (<a>) has two roles. The most common is to create a link that, when clicked, takes a visitor from one page to another. The second role is to place a hidden marker, called a bookmark, in a web page. You’ll learn about both uses below.

To create a link, you supply the destination URL using the href attribute. You put the clickable link text between the opening and closing tags:

<a href="LinkedPage.htm">Click Me</a>

When setting the href attribute, you can use a relative URL, which points to a page on your own website, or an absolute URL, which starts with http:// and can point to any page on the Web. For a review of the differences between relative and absolute links and when to use each, seeRelative URLs.

You can also use the anchor element to create clickable image links. They’re just as easy to write as clickable text links. The trick is to put the <img> element inside an <a> element, like this:

Finally, you can use the anchor element to create a link that, instead of sending a visitor to a new page, opens an email message with the address information already filled in. You do this by creating a mailto link, as shown here:

<a href="mailto:me@myplace.com">Email Me</a>

For more information about the ins and outs of the mailto link, see More Tricks with Links.

You can also apply the target attribute to an anchor, which instructs a browser to open the destination page in a new browser window or in a specific frame, like this:

<a href="LinkedPage.htm" target="_blank">Click Me</a>

The anchor element also works with bookmarks, letting you lead website guests to a specific spot on a web page. To create a bookmark, you simply add an identifying name to the target element using the id attribute, like this:

<h2 id="Canaries">Pet Canaries</h2>

Once you create a bookmark like this, you can use the anchor element to write a URL that points to it by adding the bookmark information to the end of the URL. To do this, add the number-sign symbol (#) followed by the bookmark name, as shown here:

Learn about recent developments in <a href="sales.htm#Canaries">canary

sales</a>.

You can learn more about bookmarks and ordinary links in Chapter 6.

<address> (Contact Information)

Block Element, Container Element

Webmasters use the <address> element only occasionally; by convention, they use it only as a way to contact the authors of the web page. The contact information could be an email address, a web link (the two most common options), or a postal address. Here’s an example:

Our website is managed by:

<a href="mailto:jsolo@mysite.com">John Solo</a>,

<a href="mailto:lcheng@mysite.com ">Lisa Cheng<a>, and

<a href="mailto:rpavane@mysite.com ">Ryan Pavane</a>.

</address>

Most browsers format text in the <address> element in italics, just as though you had used the <i> element. The only value in using <address> is that it lets automated programs that scan web pages extract useful address information.

To put other address information on your page, like your store’s physical address, don’t use the <address> element to style it. Remember that, by convention, it’s reserved for address details for the person or people who maintain the web page.

<area> (Image Map)

Standalone Element, Allowed in <map> Only

The <area> element defines a clickable region (known as a hotspot) inside an image map (which you create using the <map> element). When defining an area, you need to supply the target URL (using the href attribute), the type of shape the area is (using the shape attribute), and the coordinates of that shape (using the coords attribute). For shape, you can specify a circle, square, or polygon.

For a circle, specify the coordinates in this order: center point x-coordinate, center point y-coordinate, radius. For any other shape, supply the corners, in order, as a series of x-y coordinates, like this: x1, y1, x2, y2, and so on. Here’s an example that creates a square hotspot:

<area href="page1.htm" shape="square" coords="5,5,95,195" alt="A clickable

square" />

This square is invisible to your site guests. But if they click anywhere inside it, they’ll go to page1.htm. For more information, see the <map> element on <ins> (Inserted Text). For a full-fledged image map example, see Image Maps: Links Inside Pictures.

<audio> (Sound Player)

Block Element, Container Element

The <audio> element creates an audio player, a small set of playback controls that visitors can use to listen to an audio file.

You specify the filename using the src attribute. Browsers differ in which audio formats they’ll play, but MP3 files are by far the most reliable choice. In addition, you should always include the controls attribute. Without it, guests have no idea that there’s a player on the page (unless you create a set of controls for it using JavaScript).

Here’s a fully configured <audio> element at its simplest:

You can set a few options for the <audio> element. Use the obnoxious autoplay attribute to tell the audio player to start playing as soon as the page loads. Use the loop attribute to tell the audio player to replay the audio file when it ends, unless a visitor clicks the Pause button. Use themuted attribute to start the player with the sound muted (in which case a visitor can click the speaker icon to restore sound).

You can specify fallback content for the <audio> element, too. That way, if a browser doesn’t understand HTML5 (for example, if a visitor checks out your page with a dusty old copy of IE 8), the browser displays the fallback content instead of the audio player:

Your browser is old. Click here to download the

<a href="rubberduckies.mp3">rubberduckies.mp3</a> audio file.

</audio>

Optionally, you can give the <audio> element a list of audio files in different formats. The player then plays the first audio file whose format it understands. To do this, you need to remove the src attribute and then, inside the <audio> element, add one or more <source> elements, like this:

Your browser is old. Click here to download the

<a href="rubberduckies.mp3">rubberduckies.mp3</a> audio file.

</audio>

Now the player will play rubberduckies.ogg if the browser supports it (Chrome, Firefox, and Opera do). Otherwise, it will play rubberduckies.mp3, if the browser supports that (Safari and Internet Explorer, please step forward). And if the browser doesn’t understand the <audio> element at all, it will show the fallback content, which is the link to the audio file.

To see what the <audio> element looks like in a full web page, see Playing Audio Files.

<b> (Bold Text)

Inline Element, Container Element

The <b> element displays text in boldface. The official rules suggest that you use <b> for “stylistically offset” text, that is, text that should be presented in bold but that doesn’t have greater importance than the words around it. This could include keywords, product names, and anything else that might be bold in print:

Make sure you buy the <b>Super-Fraginator</b> today!

If you want to format text in bold and convey additional importance, <strong> is the recommended choice (although the visual result is the same). This subtle difference in meaning is the official position of the people who created the HTML5 standard, although few web developers actually pay attention to the difference.

<base> (Base URL)

Standalone Element, Allowed in <head> Only

The <base> element defines a document’s base URL, which is a starting-point web address used to interpret all relative paths. You have to place the <base> element in the <head> section of a page, and you can use two attributes: href (which identifies the base URL) and target (which supplies a target frame for links).

For example, if you have a link that points to a file named MySuperSunday.htm and the base URL is http://www.SundaysForever.com/Current/, a browser interprets the link as http://www.SundaysForever.com/Current/MySuperSunday.htm.

Web-heads rarely use the base URL this way because it almost always makes more sense for the browser to use the current page as a starting point for all relative URLs. In other words, if you’re looking at http://www.SundaysForever.com/Current/Intro.htm, the browser already knows that the base URL is http://www.SundaysForever.com/Current/. For more information about the difference between absolute and relative links, see Relative URLs.

<blockquote> (Block Quotation)

Block Element, Container Element

The <blockquote> element identifies a long quotation as a block element. It stands on its own, separate from paragraph block elements:

<blockquote><p>It was the best of times, it was the worst of times.</p>

</blockquote>

Usually, browsers indent the <blockquote> element on the left and right sides. However, you shouldn’t use <blockquote> as a formatting tool. Instead, use it where it makes sense—to highlight a passage quoted from a book. As with any element, you can use a style sheet rule to change the way a browser formats <blockquote> text.

To put a brief quotation inside a block element like a paragraph, use the <q> element instead of <blockquote>.

<body> (Document Body)

Container Element, Allowed in <html> Only

The <body> element is a basic part of the structure of any HTML document. You put it immediately after the <head> section ends, and it contains all the content of your web page, including its text, image URLs, tables, and links.

<br> (Line Break)

Inline Element, Standalone Element

The line break (<br>) is an inline element that forces the text following it onto a new line, with no extra spacing. For example, you can use the <br> element to split address information in a paragraph:

<p>Johnny The Fever<br />

200 Easy Street<br />

Akimbo, Madagascar</p>

<button> (Button)

Inline Element, Container Element

The <button> element lets you create a clickable button within a form, and you can put a phrase or an image between the <button> element’s start and end tags. As with any other form control, you need to supply a unique name and a value that the form will submit when a visitor clicks the button. You put the button content between the opening and closing tags:

<button name="submit" value="order" type="button">Place Order</button>

You can create three types of buttons, depending on the value you choose for the type attribute. A value of button creates an ordinary button with no built-in smarts (add JavaScript code to make it do something). A reset button clears all the information a visitor has filled out in a form, and a submit button sends the information in a form (like a guest’s name or email address) back to a web server, which is useful if you create an application that uses the information (say, to build a list of customers).

The <button> element is more powerful than the <input> element for creating buttons, because it puts whatever content you want on the face of the button, including images:

</button>

<caption> (Table Caption)

Container Element, Allowed in <table> Only

The <caption> element defines the title text for a table. If you use it, you have to make it the first element in a <table> element:

<table>

<caption>Least Popular Vacation Destinations</caption>

...

</table>

HTML applies no automatic formatting to the caption; it simply positions the caption at the top of a table as ordinary text (and wraps it, if necessary, to fit the width of the table). You can apply whatever formatting you want through style sheet rules.

<cite> (Citation)

Inline Element, Container Element

The <cite> element identifies a citation, which is a reference to a book, print article, or other published resource:

<p>Charles Dickens wrote <cite>A Tale of Two Cities</cite>.</p>

Usually, browsers render the <cite> element as italic text. But you shouldn’t use the <cite> element for formatting alone. Instead, use it when it makes sense (for example, when you refer to a published work you quote) and add style sheet rules that apply the specific formatting you want.

<code> (Code Listing)

Inline Element, Container Element

Use the <code> element to wrap snippets of example code (for instance, in a web page that presents a programming tutorial). Browsers display this code in a monospaced font.

<dd> (Dictionary Description)

Container Element, Allowed in <dl> Only

The <dd> element defines a word in a dictionary list. For more information, see the example in the <dl> element description below, or refer to Definition Lists.

<del> (Deleted Text)

Block Element or Inline Element, Container Element

Webmasters rarely use the <del> element; it identifies text that was present but has now been removed. Browsers that support it display crossed-out text to represent the deleted material. Another element web-heads sometimes use to indicate a revision trail is <ins>.

<dfn> (Defined Term)

Inline Element, Container Element

Site authors rarely use the <dfn> element; it indicates the defining instance of a term. For example, the first time you learn about a new term in this book, like froopy, it’s italicized. That’s because it’s the defining instance, and a definition usually follows. Browsers render the <dfn> element in italics.

<div> (Generic Block Container)

Block Element, Container Element

The <div> element groups together one or more block elements. For example, you could group together several paragraphs, a paragraph and a heading, and so on. Here’s an example:

<div>

</div>

On its own, the <div> element doesn’t do anything, but it’s a powerful way to apply style sheet formatting. In the example above, you can apply formatting to the <div> element, and the browser passes that formatting along to the two nested paragraphs (assuming the style properties you’re using support inheritance, as described on The Cascade).

To learn more about using the <div> element to apply style rules, see Improving Your Style Sheet. You should also refer to the <span> element, which applies formatting inside a block element. And if you want to apply more meaning to your containers, consider replacing your <div> with one of the HTML5 semantic elements discussed on HTML5 Semantic Elements.

<dl> (Dictionary List)

Block Element, Container Element

The <dl> element defines a definition list (also known as a dictionary list), which is a series of terms, each followed by a definition in an indented block of text. In theory, you could put any type of content in a dictionary list, but it’s recommended that you follow its intended use and include a list of terms and explanations. Here’s an example:

<dl>

<dt>tasseomancy</dt>

<dd>Divination by reading tea leaves.</dd>

<dt>tyromancy</dt>

<dd>Divination by studying how cheese curds form during cheese making.</dd>

</dl>

<dt> (Dictionary Term)

Container Element, Allowed in <dl> Only

The <dt> element identifies the dictionary term that you’re about to define. For more information, see the simple example under the <dl> element description above, or refer to Definition Lists.

<em> (Emphasis)

Inline Element, Container Element

The <em> element has the same effect as the <i> (italic text) element, but a slightly different meaning. It’s for emphasized text that would have a different inflection if read out loud (say, by a screen reader), like this:

Make sure you <em>don't</em> use the wrong element for your italics.

By comparison, the <i> element is for italicized text that doesn’t have this emphasis.

Using style sheet rules, you can change the formatting of the <em> element, and emphasize its content in a way that doesn’t use italic formatting (like by coloring the text red).

<form> (Interactive Form)

Block Element, Container Element

You use the <form> element to create a page that collects information from your guests. In it, you put graphical widgets like text boxes, checkboxes, selectable lists, and so on (represented by the <input>, <textarea>, <button>, and <select> elements, respectively). By putting these widgets in a <form> element, your browser can collect the information and then send it to a web server for use in another program, like a database that records guests’ email addresses. Web applications are outside the scope of this book, but you can see how to use a <form> element with JavaScript on A Basic Form, and you can consider free form-submission services on Email Newsletters.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> (Headings)

Block Element, Container Element

Headings are section titles. They appear as boldface letters at various sizes. The size of the text depends on the heading level. The six heading levels start at <h1> (the biggest) and move down to <h6>. Both <h5> and <h6> are actually smaller than regularly sized text. Here’s an <h1>element in action:

<h1>Important Information</h1>

When you use headings, nest them on the page following a logical structure. Start with <h1> for the most important heading, and then use lower heading levels for subtopics under the main heading. Don’t start with <h3> just because the formatting looks nicer. Instead, use the heading levels to delineate the structure of your document, and use style sheets to change the formatting of each heading to suit you.

<head> (Document Head)

Container Element, Allowed in <html> Only

The <head> section of a page goes before the <body> section. While the <body> element contains the web page content, the <head> element includes other information, like the title of the web page (the <title> element), descriptive metadata (one or more <meta> elements), and styles (the <style> or <link> elements).

<hr> (Horizontal Rule)

Block Element, Standalone Element

The <hr> element produces a horizontal rule (a solid line) that you use to separate block elements:

<hr />

Although the <hr> element still works perfectly well, HTML whizzes prefer using border settings in a style sheet rule to get much more control over the line style and its color. Here’s an example that defines a style sheet rule for a solid blue line:

.border { border-top: solid medium navy }

And here’s how you could apply it:

For more information about the style sheet border settings, refer to Basic Borders.

<html> (Document)

Container Element

The <html> element is the first one that should appear in any HTML document. It wraps the rest of the document. If you create an ordinary web page, the <html> element contains two other essential ingredients: the <head> element, which defines the title, metadata, and linked style sheets; and the <body> element, which contains the actual content.

<i> (Italic Text)

Inline Element, Container Element

The <i> element displays text in italics, without conveying any extra emphasis or inflection. Here’s an example:

The mattress label says <i>do not remove under penalty of law</i>

If you want to provide italics that suggest an emphasis in the way they are spoken, the <em> element is a better choice. However, both elements provide the same formatting, and the difference is acknowledged only by serious HTML5 wonks.

<iframe> (Inline Frame)

Inline Element, Container Element

The <iframe> element creates an inline frame—a scrollable window that’s embedded in a page and that displays another web page inside it. You supply the attributes src (the page you want your browser to display in the frame), name (the unique name of the frame), and width andheight (the dimensions of the frame in pixels). You can turn off the automatic border by setting the frameborder=“0” attribute, and turn off scrolling by adding the scrolling=“no” attribute. Here’s one use of the <iframe> element:

You can include instructions with the <iframe> element that a browser will display if it doesn’t support <iframe>:

<p>To see more details, check out <a href="MyPage.html">this page</a>.</p>

</iframe>

<img> (Image)

Inline Element, Standalone Element

The <img> element points to a picture file you want to display in a page. The src attribute identifies the picture using a relative or absolute link (see Relative URLs). The alt attribute supplies text that a browser displays if it can’t display the picture.

Internet Explorer displays alternate text in a pop-up box, while some more standards-aware browsers (namely Firefox) don’t. No matter; you can display a pop-up text box in just about any browser using the title attribute. It’s the best way to add cross-browser pop-up text to an image.

The <img> element also supports height and width attributes you can use to explicitly size a picture:

In this example, the picture has a width of 100 pixels and a height of 150 pixels. If these dimensions don’t match the actual size of the picture, your browser stretches and otherwise mangles the picture to match the dimensions.

Never use the width and height attributes to resize an image; make those kinds of edits in a proper image-editing program. You can use the width and height attributes to tell a browser how big your picture is so it can lay out the page before it downloads the whole image, and to preserve your layout even if the browser can’t find your picture.

To learn more about the image types you can use and how to organize pictures on a page, refer to Chapter 4.

Finally, you can create clickable regions on an image by defining an image map, and then by linking that image map to your image with the usemap attribute of the <img> element. For more information, see the <map> section (<ins> (Inserted Text)).

<input> (Input Control)

Standalone Element, Allowed in <form> Only

The <input> element is the most common ingredient in an HTML form (which itself uses the <form> element). The <input> element can represent different widgets (called controls) that collect information from a web visitor.

The type attribute specifies the kind of control you want to create. Table B-1 lists the most common types. Additionally, you should give every control a unique name using the name attribute.

Table B-1. HTML form controls.

CONTROL	HTML ELEMENT	DESCRIPTION
Single-line text box	<input type=“text” />	Displays a box where a visitor can type in text.
Password text box	<input type=“password” />	Shows a box where a visitor can type in text, but the browser doesn’t display the text. Instead, it displays an asterisk (*) or bullet (•) in place of every letter, to hide the text from prying eyes.
Checkbox	<input type=“checkbox” />	Displays a checkbox you can set as turned on or off.
Radio button	<input type=“radio” />	Shows a radio button (a circle you can set as turned on or off). Usually, you have a group of radio buttons next to one another, in which case a visitor selects exactly one.
Submit button	<input type=“submit” />	Shows a standard clickable button that submits a form and all its data.
Reset button	<input type=“reset” />	Displays a standard clickable button that clears any text a visitor has typed in and any selections she’s made.
Image button	<input type=“image” />	Shows a Submit button with a difference—you supply its visuals as a picture. To specify the picture file you want, set the src attribute.
Ordinary button	<input type=“button” />	Shows a standard clickable button that doesn’t do anything unless you hook it up to some JavaScript code (Chapter 14).

Here’s an <input> element that creates a text box. When a visitor submits the page, whatever he typed into the box will be sent, along with the descriptive identifier LastName:

Of course, forms are useful only if you have code that processes their data. On A Basic Form, you saw how guests can interact with forms using JavaScript, but forms are more commonly used with server-side web programs. For example, a server-side script might receive some visitor information from a form and store it in a database.

<ins> (Inserted Text)

Block Element or Inline Element, Container Element

The <ins> element identifies newly inserted text (for example, text added to a web page during its most recent edit). By design, browsers underline the text inside the <ins> element. Because of its specialized purpose, you’ll rarely come across pages that use the <ins> element.

You can use the <ins> element around block elements or inside a block element. The <del> element is a complementary revision element, and you might want to use it in conjunction with <ins>.

<li> (List Item)

Container Element, Allowed in <ol> and <ul> Only

The <li> element represents a single item in an ordered (numbered) or unordered (bulleted) list. For more information, see the <ol> element for ordered lists and the <ul> element for unordered lists.

<link> (Document Relationship)

Standalone Element, Allowed in <head> Only

The <link> element describes a relationship between the current document and another document. For example, you might use it to point to the previous version of the current document. More commonly, you use it to point to an external style sheet that provides formatting instructions for the current page. You always put the <link> element in the <head> section of a page. Here’s one possible use:

By using external style sheets, you can define the styles for your site in a single file and then link all your site’s pages to it. Chapter 3 has much more on style sheets and how to use them.

<map> (Image Map)

Inline Element, Container Element

The <map> element defines an image map—a picture with one or more clickable regions. When you create an image map, you assign it a unique name using the name attribute. You then add one <area> element inside the <map> element for each clickable region, specifying the coordinates of the clickable area and the destination URL. (See the <area> element on <address> (Contact Information) for more on how the coords attribute works.) Here’s an example of an image map with three clickable regions:

<area href="page1.htm" shape="square" coords="5,5,95,195"

alt="Square #1" />

<area href="page2.htm" shape="square" coords="105,5,195,195"

alt="Square #2" />

<area href="page3.htm" shape="square" coords="205,5,295,195"

alt="Square #3" />

</map>

Finally, to use your image map, you need to apply it to an image using the usemap attribute. The usemap attribute matches the name of the map but starts with a number sign (#), which tells browsers that the image map is on the current page:

You can’t see the clickable regions of an image map (unless you outline them in the image). However, when you point to a hotspot, your mouse cursor changes to a hand. Clicking a hotspot has the same effect as clicking an ordinary <a> link—you immediately go to the new URL. For a full-fledged image map example, see Image Maps: Links Inside Pictures.

<meta> (Metadata)

Standalone Element, Allowed in <head> Only

Meta elements let you embed descriptive information in your web pages. Your visitors never see this information, but automated programs like web search engines can find it as they scan your site. You add metadata by placing <meta> elements in the <head> section of your page.

Every <meta> element includes a name attribute (which identifies the type of information you’re adding) and a content attribute (which supplies the information itself). Although you can have an unlimited number of potential <meta> elements, the two most common are description and keywords, because some search engines use them:

appropriate music classes for children 4 months to 5 years old" />

Include a Page Description describes meta elements in more detail and explains how search engines use them.

<noscript> (Alternate Script Content)

Block Element, Container Element

The <noscript> element defines the content a browser should display if it can’t run a script, a mini-program embedded in your page. You place it immediately after the <script> element. The most common reason a browser can’t run a script is because a visitor has turned off his browser’s script feature.

For more information about scripts, refer to Chapter 14.

<object> (Embedded Object)

Inline Element, Container Element

The <object> element embeds specialized, nonstandard objects in your page. For example, you might use an <object> element to place a Flash movie inside a web page, although this practice is becoming steadily less common.

<ol> (Ordered List)

Block Element, Container Element

An ordered list starts with the <ol> element and contains multiple list items, each of which you represent with an <li> element. In an ordered list, your browser arranges each item consecutively, using your choice of numbers, letters, or Roman numerals.

Here’s a simple ordered list that numbers items from 1 to 3:

<ol>

<li>Buy bread</li>

<li>Soak stamps off letters</li>

<li>Defraud government with offshore investment scheme</li>

</ol>

To start at a number other than 1, use the start attribute and supply the starting number. To change the list’s number or letter format, use the type attribute with one of these values: 1 (numbers), a (lowercase letters), A (uppercase letters), i (lowercase Roman numerals), I (uppercase Roman numerals).

HTML5 adds a feature for backward-counting lists. To create one, you add the reversed attribute to the <ol> element. However, older browsers don’t support this feature.

For more information on ordered lists, see HTML Elements for Lists.

<option> (Menu Option)

Container Element, Allowed in <select> Only

The <option> element defines the items you want to appear in a list, and you put the element inside a <select> element. For example, to create a drop-down menu that lets visitors choose a color from a list of options including Blue, Red, and Green, you need one <select> element with three <option> elements inside it.

When you define the <option> element, you can use the selected attribute to tell a browser to pre-select an item when it displays the page for the first time. You can also use the value attribute to associate a unique identifying piece of information with an option, which is included with the form data when a visitor submits the form.

For a basic example, see the description of the <select> element.

<p> (Paragraph)

Block Element, Container Element

The <p> element contains a paragraph of text:

<p>It was the best of times, it was the worst of times ...</p>

Because paragraphs are block elements, a browser automatically adds a line break and a little extra space between two paragraphs, or between a paragraph and another block element, like a list or a heading.

Browsers ignore empty paragraphs. To create a blank paragraph, use a nonbreaking space like this:

<param> (Object Parameter)

Standalone Element, Allowed in <object> Only

The <param> element defines extra information in an <object> element, which a browser sends to an applet or a plug-in.

<pre> (Preformatted Text)

Block Element, Container Element

Preformatted text breaks the normal rules of HTML formatting. When you put content inside a <pre> element, a browser duplicates every space and line break it sees, retaining the formatting you used originally. Additionally, the browser puts all the content in a monospaced font (typically Courier), which means the results aren’t always pretty.

The <pre> element is an easy and quick way to get text to appear exactly the way you want it, which is useful if you want to represent visual poetry or display a snippet of programming code. However, you shouldn’t use it to align large sections of ordinary text; use CSS positioning rules for that (see Chapter 8).

<pre>

Tumbling-hair

picker of buttercups

violets

dandelions

And the big bullying daisies

through the field wonderful

with eyes a little sorry

Another comes

also picking flowers

</pre>

<q> (Short Quotation)

Inline Element, Container Element

The <q> element defines a short quotation inside another block element, like a paragraph.

<p>As Charles Dickens once wrote, <q>It was the best of times, it was the

worst of times</q>.</p>

Usually, browsers display the <q> element as italic text, and some browsers, like Firefox, add quotation marks around the text. However, don’t use the <q> element as a formatting tool. Instead, use it to identify quotations in your text, and then add style sheet rules to apply the formatting you want.

If you want a longer quotation that stands on its own as a block element, use the <blockquote> element instead.

<samp> (Sample Output)

Inline Element, Container Element

Use the <samp> element to mimic the way computer code looks when it’s printed out or displayed on a computer console. This rarely used element simply formats its contents with a monospaced font, like <pre> and <code>.

<script> (Client-Side Script)

Block Element, Container Element

The <script> element lets you include a client-side script inside your web page. A script is a set of instructions written in a simplified programming language like JavaScript. Web designers use scripts to create interactive web pages that add effects like buttons that change color when you point to them. To learn some of the basics of JavaScript and to see scripts in action, check out Chapter 14.

<select> (Selectable List)

Container Element, Allowed in <form> Only

The <select> element creates a list you can use in a form. Your visitor selects a single item from the list (or multiple items, if you add the multiple attribute). You use the name attribute to give the list a unique name, as in the following example:

<option value="Ad">Google Ad</option>

<option value="Search">Google Search</option>

<option value="Psychic">Uncanny Psychic Intuition</option>

</select>

Ordinarily, you create selection lists as drop-down menus. However, you can create a scrollable list box using the size attribute. Just specify the number of rows you want to show at once:

...

</select>

For an example of a form, refer to A Basic Form.

<small> (Small Print)

Inline Element, Container Element

Use the <small> element to hold “small print,” like the legalese at the bottom of a contract. Visually, small print steps the text size down one notch, although you can change this effect through a style sheet if it’s not appropriate.

<source> (Audio or Video File)

Standalone Element, Allowed in <video> or <audio>

You can use the <source> element to identify the file you want an audio or video player to play. Usually, you do this to list a set of files that provide the same content in different file formats. That way, you can ensure that the largest possible range of browsers can play your file. (The obvious drawbacks are that you need to make multiple copies of the files, encode them in different formats, and then find space to store the files on your website.)

The <source> element takes two attributes: src (which identifies the file) and type (which identifies the file format and, optionally, its codec). Here’s an example with the <audio> element:

</audio>

The most common and reliable formats for audio are MP3 (set the type to audio/mp3) and OGG (set the type to audio/ogg). The most common formats for video are MP4 (video/mp4), WebM (video/webm), and OGG (video/ogg). You can get detailed format information athttp://tinyurl.com/html5-formats.

<span> (Generic Inline Container)

Inline Element, Container Element

Use the <span> element to mark text you want to format inside a block element. For instance, you could format a single word in a paragraph, a few words, a whole sentence, and so on. Here’s an example:

<p>In this paragraph, some of the text is wrapped in a span element.

That <span>gives you the ability</span> to format it in some fancy

way later on.</p>

On its own, the <span> element doesn’t do anything. However, it’s a powerful way to apply style sheet formatting in a flexible, reusable way.

You should also refer to the <div> element, which can apply formatting to several block elements at once (see Improving Your Style Sheet).

<strong> (Strong Importance)

Inline Element, Container Element

The <strong> element has the same effect as the <b> (bold text) element, but the official rules of HTML suggest you use it for text that has greater importance than the surrounding words. Here’s an example:

I'm <strong>very</strong> sorry for all the trouble.

To customize the way the <strong> element emphasizes important text (say, to make the text both bold and italicized), use a style sheet rule. On the other hand, if you want bold text that doesn’t give one word more emphasis than the surrounding words, you’re better off using the <b>element.

<style> (Internal Style Sheet)

Container Element, Allowed in <head> Only

The <style> element lets you define a style right inside a web page. This is known as an internal style sheet. Use it to supply style sheet rules for the current page. Always put the <style> element inside the <head> section of a web page.

Here’s an example of an internal style sheet that gives <h1> headings fuchsia text:

<style>

h1 { color: fuchsia }

</style>

More commonly, you’ll use the <link> element in your pages to connect to a central style sheet. That way, you can apply the same styles to all the pages in your site without cluttering up your markup. Chapter 3 has much more about style sheets and how to use them.

<sub> (Subscript)

Inline Element, Container Element

The <sub> element makes text smaller and positions it lower than the surrounding text (the midpoints of subscript characters line up with the bottom of the surrounding text). It’s best not to rely on this trick for formatting (use style sheets instead), but it’s a handy way to deal with scientific terms like H₂O. Here’s how you use it:

Water is H<sub>2</sub>O

<sup> (Superscript)

Inline Element, Container Element

The <sup> element makes text smaller and positions it higher than the surrounding text (the middle of superscript text lines up with the top of the current line). It’s best not to rely on this trick for formatting (use style sheets instead), but it’s a handy way to deal with exponents like 3³. Here’s the <sup> element in action:

3<sup>3</sup> is 27

<table> (Table)

Block Element, Container Element

The <table> element is the outermost element that defines a table. Inside it, you define rows with the <tr> element, and inside each row, you use the <td> element to define individual cells and specify the content they hold. Here’s a basic table:

<table>

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

It looks like this:

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

See HTML Elements for Tables for more on creating tables and Sizing Tables for information on sizing them.

<td> (Table Data Cell)

Container Element, Allowed in <tr> Only

The <td> element represents an individual cell inside a table row (a <tr> element). Each time you add a <td> element, you create a column. However, it’s perfectly valid to have different numbers of columns in subsequent rows (although it might look a little wacky). For a basic table example, see the <table> element definition above, and for a detailed explanation of tables, check out Chapter 2.

<textarea> (Multiline Text Input)

Container Element, Allowed in <form> Only

The <textarea> element displays a large text box in a form (the <form> element) that can fit multiple lines of text. As with all input controls, you need to identify the control by giving it a unique name. Additionally, you can set the size of the text box using the rows and cols attributes.

To preload text in the <textarea> element, put it between the start and end tags, like so:

<textarea name="Comments">Enter your comments here.</textarea>

<th> (Table Header Cell)

Container Element, Allowed in <tr> Only

The <th> element represents an individual cell with table heading text. Use the <th> element in the same way you use the <td> element. The difference is that you usually reserve the <th> element for the first row of a table (because it represents column headings), and <th> text appears boldfaced and centered (which you can tailor using style sheets).

<title> (Document Title)

Container Element, Allowed in <head> Only

The <title> element specifies the title of a web page. A browser displays this text in its title bar and uses it as the bookmark text if a visitor bookmarks the page. You have to put the <title> element in the <head> section of a page.

<title>Truly Honest Car Mechanics</title>

<tr> (Table Row)

Container Element, Allowed in <table> Only

The <tr> element represents an individual row inside a table (a <table> element). To add cells of information, you need to add the <td> element inside the <tr> element. For a basic table example, see the <table> element definition above.

<ul> (Unordered List)

Block Element, Container Element

An unordered list starts with the <ul> element and includes multiple list items, each of which you represent with an <li> element. The browser indents each item in the list and draws a bullet next to it.

Here’s a simple unordered list:

<ul>

<li>Buy bread</li>

<li>Soak stamps off letters</li>

<li>Defraud government with offshore investment scheme</li>

</ul>

Webmasters often use the <ul> element to create a menu of commands. (You can also use multiple levels of nested lists to create a hierarchical menu.) When using <ul> to create a navigation menu, use a style sheet rule to remove the bullets (set list-style-type to none) and tweak themargin and padding settings.

<video> (Video Player)

Block element, Container element

The <video> element creates a playback window with a small set of playback controls underneath it. A visitor uses these controls to watch a video.

You specify the video you want to appear in the window using the src attribute. Browsers differ in the video file formats they play back, but you can’t go wrong with MP4 files that use H.264 encoding (see Showing Video Clips). In addition, you should always include the controlsattribute. Without it, you’ll create a playback window that has no buttons (and that therefore won’t play a video unless you create an alternative set of controls using JavaScript).

Here’s a fully configured <video> element at its simplest:

The <video> element lets you set a few options.

The height and width properties set the size of the video window. If you don’t set these attributes, browsers create a video window that matches the dimensions of the video you want to play. The poster attribute specifies an image that appears in the video window initially, before a visitor clicks Play. The obnoxious autoplay attribute tells the player to start playback as soon as the page loads, and the loop attribute tells the player to restart the video file when it ends, unless a visitor clicks the Pause button. Finally, you can use the muted attribute to start the player with the sound muted (visitors can click the speaker icon to restore sound).

You can specify fallback content inside the <video> element. That way, very old browsers that don’t understand HTML5, like IE 8, display the fallback content instead of the video player. (Without the fallback content, old browsers ignore the video player altogether.)

No video for you. But you can still download the

<a href="butterfly.mp4">butterfly.mp4</a> video file.

</audio>

Optionally, you can give the <video> element a list of files in different formats. The player shows the first video file that has a format it understands. To do this, you need to remove the src attribute and then, inside the <video> element, add one or more <source> elements, like this:

Your browser is old. Click here to download the

<a href="butterfly.mp4">butterfly.mp4</a> video file.

</audio>

If a browser understands the WebM video standard, the video player loads butterfly.webm (as you’ll see in Chrome, Firefox, and Opera). Browsers that don’t play WebM files but do play MP4 (like Internet Explorer and Safari) will load butterfly.mp4. And if the browser doesn’t understand the<video> element at all, it displays the fallback content and a link to download the video file.

To see what the <video> element looks like in a full web page, see Showing Video Clips.

HTML5 Semantic Elements

As you learned in Chapter 1, the latest version of the HTML language is known as HTML5. And although it’s full of improvements, it also comes with a significant caveat. Because it’s relatively new, many browsers don’t recognize all its features. Internet Explorer is a particular laggard; you’ll won’t be able to tap into any HTML5 features unless you use IE 9 or later.

Because of these browser support issues, web designers need to approach HTML5 with caution. Workaround techniques let you use many HTML5 features without leaving older browsers in the dark. (For example, Fallbacks for Old Browsers explains how you should use a Flash fallback with the HTML5 <video> element to make sure your videos work even on old browsers.) However, these solutions aren’t always simple, and sometimes they’re more trouble than they’re worth.

You can use one group of elements right now, however, and without much extra effort. These are HTML5’s semantic elements, which add meaning to the structure of your pages. Semantic elements let you identify the logical purpose of different portions of your page. For example, you can indicate in your markup where your header is, where you placed your navigation links, and so on. Your visitors never see this information, but you can employ it in a variety of other useful ways. For example, search engines can use it to learn more about your website, screen reading programs can present your content more effectively to people with disabilities, and other tools can extract your data and reuse it in dozens of ways. All of these scenarios are still evolving, but if you plan to stick with your website for a long time, it’s worth getting used to some of these new conventions so you can take advantage of them when HTML5 works in all browsers.

If you decide to use HTML5’s semantic elements, you still need to worry about one issue. Older browsers (like IE 8) won’t recognize these elements, so they’ll just ignore them. That’s fine up to a point, because the semantic elements aren’t about formatting; they’re about structure. But many of the new semantic elements are block elements, which means a browser should display them on a separate line on the resulting web page, with a little bit of space between them and the preceding (and following) elements. Browsers that don’t recognize HTML5 elements won’t know to display some of the semantic elements as block elements, so it’s up to you to add a style sheet rule that tells these browsers what to do. Here’s a style super-rule that applies block formatting to the nine HTML5 semantic elements in one step:

article, aside, figure, figcaption, footer, header, hgroup, nav, section,

summary {

display: block;

}

This rule won’t have any effect on browsers that already recognize HTML5, because they already set the display property to block.

The super style sheet rule above solves part of the problem but not all of it. It works with old browsers that don’t understand HTML5, except Internet Explorer (which, in practice, is probably the only non-HTML5 browser still traveling the Web in significant numbers). The problem is that IE won’t apply style sheet formatting to elements it doesn’t recognize. Fortunately, you have a workaround: You can trick Internet Explorer into recognizing a foreign element by registering it using a JavaScript command. Here’s a script block that gives IE the ability to recognize and style the<header> element:

document.createElement('header')

</script>

Rather than write this sort of code yourself, you can make use of a ready-made script that does it for you (described at http://tinyurl.com/nlcjxm). To use this script, you simply add a reference to it in the <head> section of your page, like this:

<head>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

</head>

This grabs the script from the html5shim.googlecode.com web server and runs it before the browser starts processing the rest of the page. The script is short and to the point—it uses the JavaScript trick described above to simulate all the new HTML5 elements. That way, you can format the elements with style sheet rules. Add the super-rule shown above to your style sheet, and the new elements will display as proper block elements. The only remaining task is for you to use the elements and add your own style sheet rules to format them.

The following sections list all of HTML5’s new semantic elements. Notably missing are the HTML5 elements that don’t have handy workarounds for old browsers. This includes the new HTML5 widgets for creating forms (Interactive Forms), and the <canvas> element that lets you draw shapes with the help of JavaScript.

TIP

To see the latest version of the HTML5 specification, complete with all the features that leave older browsers out in the cold, see http://dev.w3.org/html5/markup. To learn about all of HTML5’s new features, including those that let you build better web programs with JavaScript, you can read HTML5: The Missing Manual (O’Reilly).

<article> (Article)

Block Element, Container Element

Represents whatever you think of as an article—a section of self-contained content like a newspaper article, a forum post, or a blog entry (not including frills like comments or an author bio).

As with almost all the HTML5 semantic elements, the <article> element doesn’t apply any built-in formatting. Think of it as a more specific version of the generic <div> container.

<aside> (Sidebar)

Block Element, Container Element

Represents a complete chunk of content that’s separate from the main content of the page. For example, it makes sense to use <aside> to create a sidebar with content related to a main article. You can also use it for a block of links or ads.

<figcaption> (Figure Caption)

Block Element, Container Element

The <figcaption> element wraps the caption text that goes with a <figure> (see below). The goal is to clearly indicate the association between an image and its caption. Of course, <figcaption> isn’t limited to text alone. You can use any HTML elements that make sense; good choices include links and tiny icons.

<figure> (Figure)

Block Element, Container Element

The <figure> element wraps a picture and its associated caption. Here’s an example:

<figcaption>The bark of a plane tree</figcaption>

</figure>

In most cases, you want to use a style sheet class to position the <figure> element. For example, you might choose to float it on the left or right side of your page.

<footer> (Footer)

Block Element, Container Element

The <footer> element holds a chunk of content that sits at the bottom of a page (or at the bottom of a well-defined section of content, like an <article>) element. The footer may include small print, a copyright notice, and a small set of links (for example, links that take you to About Us or Get Support pages).

<header> (Header)

Block Element, Container Element

The <header> element represents a heading that includes a title and some content. For example, a heading at the beginning of an article might include a title and a byline, or a title and some links to subtopics in the article. Here’s an example:

<h1>An HTML5 Investigation</h1>

<p>Prepared by Steven Smith</p>

</header>

The <header> can also wrap the heading section of a website (for example, a banner with a company logo). It’s perfectly acceptable for a web page to have more than one <header> section, as long as each header belongs to a distinct section of content. (For example, a news site that shows several articles on one page could have a header section for each article.)

<mark> (Highlighted Text)

Inline Element, Container Element

The <mark> element represents a section of text you want to highlight for reference. For example, you could use it to flag changes, mistakes, or keywords in a page.

If you decide to use the <mark> element now, you’ll need to supply the formatting for browsers that don’t recognize HTML5. Here’s the sort of style rule you need:

mark {

background-color: yellow;

color: black;

}

<nav> (Navigation Links)

Block Element, Container Element

The <nav> element represents a section of a page that contains links. These links may point to topics on the current page or to other pages on a website. In fact, it’s not unusual to have a page with multiple <nav> sections—one for a site-wide navigation menu, another for topics in the current article, and so on.

It’s worth noting that you don’t have to wrap every block of links in a <nav> element. Web designers generally reserve it for the largest and most important navigational sections on a page. You can place <nav> inside another HTML5 element as well. For example, if you have a set of navigation links right in the header, you’re free to place the <nav> element inside the <header> element. Or, if you decide the links aren’t clearly part of the header, you may choose to add the <header> element followed by the <nav> element. The HTML5 specification is explicit in saying that decisions like these are a matter of taste.

<section> (Section)

Block Element, Container Element

Of all of HTML5’s semantic elements, the <section> element is the most general. It represents a document that should start with a heading of any level.

If possible, you should use a more specific container for your content than <section>. For example, both <article> or <aside> have more specific meanings, which makes them better choices than <section>. If you can’t really describe your content as an article or an aside, however (for example, say it’s a patient record pulled out of a database), then a <section> element is a perfectly reasonable way to identify it.

One confusing detail is that you can use a <section> for parts of a page. For example, on your website’s home page you could put blog postings, news, and a sidebar of ads into their own separate <section> elements.

NOTE

As web designers become more accustomed to using elements like <section>, people will begin to settle on a few widely accepted usage patterns. Until then, HTML5 leaves some ambiguity about the best ways to use its new elements.

<time> (Date or Time)

Inline Element, Container Element

Date and time information appears frequently in web pages. For example, it turns up at the end of most blog postings. Unfortunately, there’s no standardized way to tag dates, so there’s no easy way for other programs (like search engine crawlers) to extract them without guessing. The<time> element solves this problem in two ways. Not only does it let you flag an existing date for later use, but it also adds a datetime attribute that you can use to provide the date in a standardized form that any program can understand.

Here are a few examples of the <time> element at work:

<time datetime="2011-11-30">30<sup>th</sup> of November</time>

<time datetime="2011-11-30T20:30">8:30 PM on November 11, 2011</time>

Remember, the information in the datetime attribute won’t appear on your web page. It’s there for other programs to read.

Because the <time> element is purely informational and doesn’t have any associated formatting, you can use it with any browser.

HTML Character Entities

HTML character entities are codes that browsers translate into other characters when they display a page. All HTML character entities start with an ampersand (&) and end with a semicolon (;).

There are two principal reasons to use HTML character entities. First of all, you might want to use a character that has a special meaning in the HTML standard. For example, if you type < in an HTML document, a browser assumes you’re starting to define an element, which makes it difficult to write a pithy bit of logic like “2 < 3.” To get around this, you replace the < symbol with a character entity that represents the less-than symbol. The browser then inserts the actual < character you want when it displays the page.

The other reason to use HTML character entities is because you want to use a special character that’s not easy to type, like an accented letter or a currency symbol. In fact, characters like these are quite possibly not on your keyboard at all.

Table B-2 has the most commonly used HTML entities. For the complete list, which includes many more international language characters, see www.webmonkey.com/reference/Special_Characters. You can also type in certain special characters using a non-English keyboard or pick international language characters from a utility program. See Non-English Languages for more information about these options.

Table B-2. HTML character entities.

CHARACTER	NAME OF CHARACTER	WHAT TO TYPE
<	Less-than	<
>	Greater-than	>
&	Ampersand	&
"	Quotation mark	"
@	Copyright mark	©
®	Registered trademark symbol	®
¢	Cent sign	¢
£	Pound sterling sign	£
¥	Yen sign	¥
€	Euro sign	€(but € is better supported)
°	Degree sign	°
±	Plus or minus sign	±
÷	Division sign	÷
x	Multiply sign	×
µ	Micron sign	µ
¼	One-quarter fraction	¼
½	One-half fraction	½
¾	Three-quarters fraction	¾
¶	Paragraph sign	¶
§	Section sign	§
«	Left angle quote, guillemotleft	«
»	Right angle quote, guillemotright	»
¡	Inverted exclamation mark	¡
¿	Inverted question mark	¿
æ	Small ae diphthong (ligature)	æ
ç	Small c, cedilla	ç
è	Small e, grave accent	è
é	Small e, acute accent	é
ê	Small e, circumflex accent	ê
ë	Small e, dieresis or umlaut mark	ë
ö	Small o, dieresis or umlaut mark	ö
É	Capital E, acute accent	É

HTML Color Names

The HTML standard officially recognizes only 16 color names. Table B-3 lists them.

Table B-3. HTML color names.

Aqua	Navy
Black	Olive
Blue	Purple
Fuchsia	Red
Gray	Silver
Green	Teal
Lime	White
Maroon	Yellow

Although many browsers recognize more names, the best way to specify color is with a color code (see Hexadecimal Color Values).