ptg
264 Chapter 5: Building Websites
noticeable in the preview from messing up the blog’s front page. is can hap-
pen, for example, when a link at the end of a post is missing the closing anchor
tag (</a>). When reproduced on the front page, the link may extend into the
title of the post below it in the listing.
not teSting in DiFFerent BroWSerS
Browsers are getting better all the time and are converging on HTML5 as a
common standard. But many of the HTML5 specications for browser behav-
ior are recommendations, not requirements. Also, a wider variety of browsers
are in use, across more device types and operating systems, than ever before.
Furthermore, browsers are getting bigger and incorporating more features. As
a consequence of all this complexity, there are bugs and edge conditions where
browser behavior is not well dened. erefore, there is no way to ensure that
your web pages will perform awlessly without testing them in all the major
browsers.
It is human nature to become attached to your favorite tools. When other
people encounter problems with your website, it’s tempting to blame their
poor choice of browser. Avoid falling into this unproductive attitude by mak-
ing it a point to use dierent browsers as you work on your website. Testing in
Internet Explorer, Firefox, Chrome, Safari, and Opera covers about 98 per-
cent of all browser use, according to data collected on Wikipedia. (Search for
“browser share” to nd the latest statistics.) Unfortunately, that also means
testing on older versions of Internet Explorer. Currently, Internet Explorer,
version 6, running on Windows XP, NT, 2000, and earlier versions of Micro-
so’s operating systems, still accounts for a h of all browser usage! is is in
spite of the fact that this browser is ten years old and is widely derided for its
security issues and lack of support for modern web standards. It is a persistent
fact that many people are forced to work with the tools they are given, not the
ones they would prefer. Major web service companies such as Google do not
provide support for IE6 users of their advanced applications. Whether you

choose to support IE6, or any particular browser, is up to you and your regard
for your target audience.
Social media provides a solution to the dilemma of too many browsers.
You can join a web authors’ or developers’ community and ask your friends
to check out your work in the environments you don’t have access to. Make a
formal checklist that includes browser name, version, operating system, and
device type. If you are doing web work for a client, you will impress that client
by presenting the checklist before putting changes into production.
From the Library of Wow! eBook
ptg
Summary 265
not putting in enough CommentS
Do yourself a big favor and add a lot of comments to your HTML, CSS, and
JavaScript code. Use comments within the code to explain the relationship
of the markup to the content. Put comments at the beginning of every page
to explain the purpose of that page and to provide authorship information
and version history. You will thank yourself later, as will anyone else who
has to work on the code you le behind aer you move on to bigger and
betterthings.
Summary
Here are the important points to remember from this chapter:
.
Good websites are the result of good planning. ere are many
approaches to building a website, and even more tools to help you do it.
Spending the time to analyze your requirements will help you choose the
best approach to putting your content online.
.
A website is essentially a directory of les on a computer running web
server soware. ere are common conventions for naming the subdi-
rectories and les in a website. Some important protocols require the

presence of les with specic names.
.
Good website organization and good navigation go hand in hand. ere
are dierent techniques for providing navigation. Menu bars, drop
menus, buttons, imagemaps, and embedded hyperlinks all play a part.
.
Content can be hidden on a page and then later revealed in response to
a click, tap, or other user action. is provides a way to oer more rich
content to search engine robots while avoiding clutter for humans.
.
You can add a large variety of information about a page to the head sec-
tion of an HTML document, including its relationships to other pages on
the Web. e head section is also where CSS styles are dened and other
resources are associated with the page.
.
Search engine optimization is an important part of most website proj-
ects. Good SEO starts with the proper use of HTML as a semantic
markup language.
From the Library of Wow! eBook
ptg
This page intentionally left blank
From the Library of Wow! eBook
ptg
267
A A:
HTML Q R
T
he tables in this appendix list the HTML elements in the HTML5 dra
specication, along with a brief description, the applicable content
model, and the important attributes for each element. e content

model for any element roughly denes what types of content the element may
contain.
An asterisk (*) next to the element’s name indicates that it is new or signi-
cantly changed in HTML5.
Content Model Description
text A string of characters containing no HTML markup
phrasing Text content plus HTML inline elements and
comments
ow Phrasing content plus HTML body elements
empty e element is not usually written as a container; a
self-closing element
metadata e content consists of HTML head elements and
comments about the document
element name e content depends on the named child element(s)
From the Library of Wow! eBook
ptg
268 Appendix A: HTML5 Quick Reference
R E
Element Description Content Model Attributes
html Provides the container for
all other HTML markup and
content
One head
followed by one
body element
D H E
Element Description Content Model Attributes
head Provides a container
for elements containing
information about the

document and its relation
to other documents and
resources
metadata
title Provides the title for the
document’s window
text none
base Sets the base URL for any
hyperlinks using relative
addressing
empty href, target
link Provides a URL to a related
resource
empty rel, href
meta Provides data values relating to
the page
empty name,
content,
http-equiv
style Provides a container for CSS
statements
CSS statements media, type
script Provides a container for client-
side executable code, such as
JavaScript
code statements src, type
noscript Provides content for user
agents that do not execute
scripts
metadata, ow

From the Library of Wow! eBook
ptg
Section Elements 269
S E
Element Description Content Model Attributes
body Provides the container for
all content elements: HTML
markup and content
ow
section* Marks a section of a document
that can have its own header
and footer elements
ow
nav* Marks content containing
navigation elements
ow
article* Denes a document section
that may have its own headings
as in a blog index or archive
ow
aside* Marks content that is tangential
to other information in the
document
ow
header* Marks content that appears
above the main contents of a
web page
ow
footer* Marks content that appears
below the main contents of a

web page
ow
address Provides information about the
document’s author
ow
hgroup* Groups other elements into a
heading section
heading
elements
From the Library of Wow! eBook
ptg
270 Appendix A: HTML5 Quick Reference
H E
Element Description Content Model Attributes
h1 Highest-level heading phrasing
h2 Second-level heading phrasing
h3 ird-level heading phrasing
h4 Fourth-level heading phrasing
h5 Fih-level heading phrasing
h6 Sixth-level heading phrasing
B E
Element Description Content Model Attributes
div Marks a division of a page or
document section
ow
p Represents a paragraph of
content
phrasing
hr Inserts a horizontal rule empty size, width
br Inserts a line break into the

content
empty clear
pre Contains preformatted content;
white space and line breaks are
kept as is
phrasing
blockquote Marks a quote from an external
source
ow cite
gure Provides annotation for gures,
photos, diagrams, code listings,
and so on
ow
gcaption Marks a caption for a gure
element
phrasing
From the Library of Wow! eBook
ptg
Inline Elements 271
L E
Element Description Content Model Attributes
ol Creates an ordered list li type, start
ul Creates an unordered list li type
li Marks an item of an ordered or
unordered list
ow
dl Creates a denition list dt, dd
dt Marks the term part of a denition
list item
phrasing

dd Marks the denition part of a
denition list item
ow
I E
Element Description Content Model Attributes
a Creates an anchor that represents
either a hypertext link or a link’s
in-page destination
noninteractive
ow
href, name,
target
em Marks contents as emphasized phrasing
strong Marks contents as strongly
emphasized
phrasing
small* Represents content such as “the
ne print”
phrasing
cite Marks the title of a referenced
work
phrasing
q Represents content quoted from
another source
phrasing cite
dfn Marks the dening instance of a
term
phrasing title
abbr Represents an abbreviation or
acronym

phrasing title
continues
From the Library of Wow! eBook
ptg
272 Appendix A: HTML5 Quick Reference
Element Description Content Model Attributes
time* Provides a machine-readable
timestamp that is equivalent to the
element’s content
phrasing datetime,
pubdate
code Represents a fragment of computer
code inline
phrasing
var Represents a variable name phrasing
samp Represents sample output of a
computer program
phrasing
kbd Represents user input to a
computer program
phrasing
sub Marks the content as a subscript phrasing
sup Marks the content as a superscript phrasing
i Indicates that the content is in
an alternative voice or should be
italicized but not emphasized
phrasing
b Indicates that the content should
be in boldface without signifying
any special importance

phrasing
mark* Indicates a highlight that was
added by an editor or author to
quoted text
phrasing
ruby* Marks content in Asian languages
that includes accompanying
phonetic or other linguistic info
phrasing, rt, rp
rt* Marks the text component of a
ruby element
phrasing
rp* Marks the annotation part of a
ruby element
phrasing
bdo Provides bidirectional override for
text direction
phrasing dir
I E (continued)
From the Library of Wow! eBook
ptg
Embedded Elements 273
Element Description Content Model Attributes
span Provides a meaningless inline
container
phrasing
ins Marks content as inserted by an
editing process
phrasing cite,
datetime

del Marks content as deleted by an
editing process
phrasing cite,
datetime
E E
Element Description Content Model Attributes
img Inserts an inline image
into the content
empty src, width, height,
alt, usemap, ismap
iframe Represents a nested
browsing context—one
document embedded
inside another
ow, HTML
document
src, width, height,
name, sandbox,
seamless
embed Inserts content from
an external source
(typically non-HTML
from a plugin) into a
document
empty src, width, height,
type
object Represents an external
resource, possibly an
image or other media
type from a plugin

param data, type, width,
height, name,
form
param Provides parameters for
a plugin invoked by an
object element
empty name, value
video* Inserts a video or
movie, possibly with
accompanying audio,
into the content
source src, width, height,
controls, poster,
loop, autoplay,
preload
continues
From the Library of Wow! eBook