The Essential Guide To HTML5 And CSS3 Web Design


User Manual:

Open the PDF directly: View PDF PDF.
Page Count: 510

DownloadThe Essential Guide To HTML5 And CSS3 Web Design
Open PDF In BrowserView PDF

• The basics of HTML5 and CSS3 web design
• The newest standards implemented in Internet Explorer, Firefox, Opera, Safari, and Chrome
• Effective layouts, tables, images, navigation, forms, and typography
• Cross-browser issues, including quirks, bugs, and hacks in all the major browsers
• Real-world examples of different styles of web front ends

The Essential Guide to
HTML5 and CSS3 Web Design




Authors Craig Grannell, Victor Sumner, and Dionysios Synodinos start you off with a
brief introduction to web design before diving into HTML5 and CSS3 basics, code reuse,
and other best practices. Then they focus on the most important aspects of a successful
website: typography, images, navigation, tables, layouts, forms and feedback (including
ready-made PHP scripts), browser quirks, hacks, and bugs.

:;.]! o 1



Throughout, engaging case studies help you gain invaluable firsthand experience with
important design elements, including all the most popular website archetypes: a blog,
a storefront, a corporate homepage, and an online gallery. You’ll also appreciate the
detailed reference appendixes covering HTML, CSS, color references, entities, and more.


HU1! iH

You’ll find The Essential Guide to HTML5 and CSS3 Web Design invaluable at any stage of
your career. If you’re just starting out, this helpful guide quickly teaches you the basics.
If you’re an experienced developer, it will serve as your ideal reference on techniques,
attributes, and other details you may not have used yet.



illl III



. .in





US $34.99

Mac/PC compatible





CSS3 Web Design



The Essential Guide to HTML5 and CSS3 Web Design contains everything you need to
design great websites that are standards-compliant, user-friendly, and aesthetically pleasing. It has been fully revised from its critically acclaimed first edition and now includes
the new features and best practices of HTML5 and CSS3.


ft . 7 f

• Approaches for user-friendly and accessible websites

. . r.



For your convenience Apress has placed some of the front
matter material after the index. Please use the Bookmarks
and Contents at a Glance links to access them.

Contents at a Glance
About the Authors .................................................................................................... xiii
About the Technical Reviewer................................................................................. xiv
About the the Cover Image Designer....................................................................... xv
Acknowledgments .................................................................................................... xvi
Introduction .............................................................................................................. xvii
Chapter 1: An Introduction to Web Design ............................................................... 1
Chapter 2: Web Page Essentials .............................................................................. 29
Chapter 3: Working With Type.................................................................................. 63
Chapter 4: Working With Images............................................................................ 119
Chapter 5: Using Links and Creating Navigation ................................................. 145
Chapter 6: Tables: How Nature (and the W3C) Intended ..................................... 227
Chapter 7: Page Layouts with CSS ........................................................................ 249
Chapter 8: Getting User Feedback ......................................................................... 307
Chapter 9: Dealing with Browser Quirks ............................................................... 343
Chapter 10: Putting Everything Together.............................................................. 357
Appendix A: An HTML5 reference.......................................................................... 387
Appendix B: Web Color Reference ........................................................................ 437
Appendix C: ENTITES reference ............................................................................ 441
Appendix D: CSS Reference ................................................................................... 459
Index.......................................................................................................................... 485


The Web is an ever-changing, evolving entity, and it’s easy to get left behind. As designers and writers, we
see a lot of books on web design, and although many are well written, few are truly integrated, modular
resources that anyone can find useful in their day-to-day work. Most web design books concentrate on a
single technology (or, commonly, a piece of software), leaving you to figure out how to put the pieces

This book is different
The Essential Guide to HTML5 and CSS3 Web Design provides a modern, integrated approach to web
design. Each of the chapters looks at a specific aspect of creating a web page, such as formatting type,
working with images, creating navigation, and creating layout blocks. In each case, relevant technologies
are explored in context and at the appropriate times, just like in real-world projects; for example, markup is
explored along with associated CSS and JavaScript, rather than each technology being placed in separate
chapters, and visual design ideas are discussed so you can get a feel for how code affects page layouts.
Dozens of practical examples are provided, which you can use to further your understanding of each
subject. This highly modular and integrated approach means you can dip in and out of the book as you
need, crafting along the way a number of web page elements that you can use on countless sites in the
Because the entire skills gamut is covered—from foundation to advanced—this book is ideal for beginners
and longtime professionals alike. If you’re making your first move into standards-based web design, the
“ground floor” is covered, rather than an assumption being made regarding your knowledge. However,
contemporary ideas, techniques, and thinking are explored throughout, ensuring that the book is just as
essential for the experienced designer wanting to work on CSS layouts or for the graphic designer who
wants to discover how to create cutting-edge websites.
This book’s advocacy of web standards, usability, and accessibility with a strong eye toward visual design
makes it of use to technologists and designers alike, enabling everyone to build better websites. For those
moments when a particular tag or property value slips your mind, this book provides a comprehensive
reference guide that includes important and relevant HTML5 elements and attributes, HTML5 entities, web
colors, and CSS 3 properties and values.

Code Examples
Remember that you can also download files associated with this book from—just find the
book and follow its instructions to access downloads and other associated resources.
To make it easier to work through the exercises, each one has an introductory box that lists where you can
find any required files and the completed files within the downloadable file archive. A short overview of
what you’ll learn is also included.


Chapter 1

An Introduction to Web Design

In this chapter:

Introducing the Internet and web design


Working with web standards


Working with HTML


Understanding and creating CSS rules


Creating web page boilerplates


Chapter 1


Organizing web page content

A brief history of the Internet
Even in the wildest dreams of science-fiction and fantasy writers, few envisioned anything that offers the
level of potential that the Internet now provides for sharing information on a worldwide basis. For both
businesses and individuals, the Internet is now the medium of choice, largely because it enables you to
present your wares to the entire world on a 24/7 basis. But the technology’s origins were more ominous
than and very different from the ever-growing, sprawling free-for-all that exists today.
In the 1960s, the American military was experimenting with methods by which the U.S. authorities might
be able to communicate in the aftermath of a nuclear attack. The suggested solution was to replace pointto-point communication networks with one that was more akin to a net. This meant information could find
its way from place to place even if certain sections of the network were destroyed. Despite the project
eventually being shelved by the Pentagon, the concept itself lived on, eventually influencing a network that
connected several American universities.
During the following decade, this fledgling network went international and began opening itself up to the
general public. The term Internet was coined in the 1980s, which also heralded the invention of
Transmission Control Protocol/Internet Protocol (TCP/IP), the networking software that makes possible
communication between computers running on different systems. During the 1980s, Tim Berners-Lee was
also busy working on HTML, his effort to weld hypertext to a markup language in an attempt to make
communication of research between himself and his colleagues simpler.
Despite the technology’s healthy level of expansion, the general public remained largely unaware of the
Internet until well into the 1990s. By this time, HTML had evolved from a fairly loose set of rules—browsers
having to make assumptions regarding coder intent and rendering output—to a somewhat stricter set of
specifications and recommendations. This, along with a combination of inexpensive hardware, the advent
of highly usable web browsers such as Mosaic (see the following image), and improved communications
technology, saw an explosion of growth that continues to this day.
Initially, only the largest brands dipped their toes into these new waters, but soon thousands of companies
were on the Web, enabling customers all over the globe to access information and, later, to shop online.
Home users soon got in on the act, once it became clear that the basics of web design weren’t rocket
science and that, in a sense, everyone could do it—all you needed was a text editor, an FTP client, and
some web space. Designers soon got in on the act, increasingly catered for by new elements within HTML;
Cascading Style Sheets (CSS), which took a while to be adopted by browsers but eventually provided a
means of creating highly advanced layouts for the Web; and faster web connections, which made mediarich sites accessible to the general public without forcing them to wait ages for content to download.
Therefore, unlike most media, the Web is truly a tool for everyone, and in many countries, the Internet has
become ubiquitous. For those working in a related industry, it’s hard to conceive that as recently as the
mid-1990s relatively few people were even aware of the Internet’s existence!


An Introduction to Web Design

So, from obscure roots as a concept for military communications, the Internet has evolved into an essential
tool for millions of people, enabling them to communicate with each other, research and gather
information, telecommute, shop, play games, and become involved in countless other activities on a
worldwide basis.

Why create a website?
Before putting pen to paper (and mouse to keyboard), it’s important to think about the reason behind putting
a site online. Millions already exist, so why do you need to create one yourself? Also, if you’re working for
a company, perhaps you already have plenty of marketing material, so why do you need a website as
I should mention here that I’m certainly not trying to put you off—far from it. Instead, I’m trying to reinforce
the point that planning is key in any web design project, and although some people swear that “winging it”
is the best way to go, most such projects end up gathering virtual dust online. Therefore, before doing
anything else, think through why you should build a website and what you’re trying to achieve.
Companies and individuals alike have practical and commercial reasons for setting up a website. A
website enables you to communicate with like-minded individuals or potential clients on a worldwide basis.
If you’re a creative talent of some kind, you can use a website to showcase your portfolio, offering online
photographs, music tracks for download, or poetry. If you fancy yourself as a journalist, a blog enables you
to get your opinion out there. If you own or work for a business, creating a website is often the most


Chapter 1

efficient means of marketing your company. And even if you just have a hobby, a website can be a great
way of finding others who share your passion—while you may be the only person in town who likes a
particular movie or type of memorabilia, chances are there are thousands of people worldwide who think
the same, and a website can bring you all together. This is perhaps why the paper fanzine has all but died,
only to be reborn online, where development costs are negligible and worldwide distribution is a cinch.
In practical terms, a website exists online all day, every day (barring the odd hiccup with ISPs), which
certainly isn’t the case with printed media, which is there one minute and in the recycle trash the next.
Distribution is less expensive than sending out printed material—a thousand-page website can be hosted
for $10 per month or less, but sending a thousand-page document to one person (let alone a thousand or
several thousand) may cost more than that. Likewise, development (particularly corrections and updates)
is often significantly cheaper, too. For example, if you want to rework a print brochure, you have to
redesign it and then reprint it. Reworking a section of a website often means swapping out a few files,
which is efficient and affordable. So, for large companies and individuals alike, the ability to have relevant
information online in a form that can often be updated in mere minutes, thereby keeping all interested
parties up-to-date, is hard to resist!

Audience requirements
This book centers on the design and technology aspects of web design, but close attention must always
be paid to your potential audience. It’s no good forcing design ideas that result in inappropriate visuals,
unusable navigation to all but the most technically minded of people, and huge download times on your
site’s unsuspecting visitors.
Prior to creating a site, you must ascertain what your audience wants and expects in terms of content,
design, and how the site will work (by way of talking to the relevant people, and also, if your budget allows,
by using surveys and focus groups). You don’t have to take all of your audience’s ideas into account (after
all, many will be contradictory), but be mindful of common themes and ensure they’re not ignored.
Technical considerations must be researched. If you’re targeting designers, you can be fairly sure that a
large proportion of the audience will be using monitors set to a high resolution and millions of colors, and
you can design accordingly. If your site is targeting mobile users, be mindful that it will be displayed on a
wide range of devices. From tablets and smartphones with high-resolution Retina or PenTile technology
displays to those with low-resolution LCD displays, mobile devices come in all shapes, sizes, and
Determining the web browsers your audience members use is another important consideration. Although
use of web standards (used throughout this book) is more likely to result in a highly compatible site,
browser quirks still cause unforeseen problems; therefore, always check to see what browsers are popular
with a site’s visitors, and ensure you test in as many as you can. Sometimes you won’t have access to
such statistics, or you may just be after a “sanity check” regarding what’s generally popular. A
are and Note, though,
that any statistics you see online are effectively guesswork and are not a definitive representation of the


An Introduction to Web Design

Web as a whole; still, they do provide a useful, sizeable sample that’s often indicative of current browser
Although you might be used to checking browser usage and then, based on the results, designing for
specific browsers, we’ll be adhering closely to web standards throughout this book. When doing this, an
“author once, work anywhere” approach is feasible, as long as you’re aware of various browser quirks
(many of which are explored in Chapter 9). Of course, you should still always ensure you test sites in as
many browsers as possible, just to make sure everything works as intended.

Web design overview
Web design has evolved rapidly over the years. Initially, browsers were basic, and early versions of HTML
were fairly limited in what they enabled designers to do. Therefore, many older sites on the Web are plain
in appearance. Additionally, the Web was originally largely a technical repository, which is the reason for
the boring layouts of many sites in the mid-1990s; after all, statistics, documentation, and papers rarely
need to be jazzed up, and the audience didn’t demand such things anyway.
As with any medium finding its feet, things soon changed, especially once the general public flocked to the
Web. It was no longer enough for websites to be text-based information repositories. Users craved—
demanded, even—color! Images! Excitement! Animation! Interaction! Even video and audio managed to
get a foothold as compression techniques improved and connection speeds increased.
The danger of eye candy became all too apparent as the turn of the century approached: every site, it
seemed, had a Flash intro, and the phrase “skip intro” became so common that it eventually spawned a
parody website.
These days, site design has tended toward being more restrained, as designers have become more
comfortable with using specific types of technologies for relevant and appropriate purposes. Therefore,
you’ll find beautifully designed HTML- and CSS-based sites sitting alongside highly animated Flash efforts.
Also, with the increasing popularity of JavaScript and the introduction of CSS Transitions and HTML5
Canvas, Flash appears to be on the way out because Adobe has recently discontinued support for Flash
on mobile devices.
Of late, special emphasis is being placed on usability and accessibility, and in the majority of cases,
designers have cottoned to the fact that content must take precedence. However, just because web
standards, usability, and accessibility are key, that doesn’t mean design should be thrown out the window.
As we’ll see in later chapters, web standards do not have to come at the expense of good design—far from
it. In fact, a strong understanding of web standards helps improve websites, making it easier for you to
create cutting-edge layouts that work across platforms and are easy to update. It also provides you with a
method of catering for obsolete devices.


Chapter 1

Note: If you’re relatively new to web design, you may be wondering about the best
platform and software for creating websites. Ultimately, it matters little which platform
you choose, as long as you have access to the most popular browsers for testing
purposes (a list that I’d now include Apple’s Safari in, alongside Chrome, Internet
Explorer, Firefox, and Opera). Regarding software, there’s an overview in Appendix E,
but this isn’t an exhaustive guide, so do your own research and find software to your

Why WYSIWYG tools aren’t used in this book
With lots of software available and this book being design-oriented, you might wonder why I’m not using
WYSIWYG web design tools. This isn’t because I shun such tools—it’s more that in order to best learn
how to do something, you need to start from scratch, with the foundations. Many web design applications
make it tempting to “hide” the underlying code from you, and most users end up relying on the graphical
interface. This is fine until something goes wrong and you don’t know how to fix it.
Removing software from the equation also means we concentrate on the underlying technology that drives
web pages, without the distraction of working out which button does what. It also ensures that the book will
be relevant to you, regardless of what software you use or your current skill level. Therefore, I suggest you
install a quality text editor to work through the exercises or set your web design application to use its code
view. Once you’re familiar with the concepts outlined in this book, you can apply them to your work,
whatever your chosen application for web design. This level of flexibility is important, because you never
know when you might have to switch applications—something that’s relatively painless if you know how to
design for the Web and understand technologies like CSS and HTML.

Introducing HTML5
The foundation of the majority of web pages is HyperText Markup Language, commonly known by its
initials, HTML. A curious facet of the language is that it’s easy to pick up the basics—anyone who’s
computer literate should be able to piece together a basic page after learning some tags—but it has
enough flexibility and scope to keep designers interested and experimenting, especially when HTML is
combined with Cascading Style Sheets (CSS), which we’ll discuss later in this chapter.
The HTML5 syntax is designed to be simpler, more flexible, developer-friendly, and backward-compatible
than HTML4 and XHTML. HTML5 introduces new features such as animation, offline capabilities, audio,
advanced graphics, typography, transitions, and more, which yields a new class of web standards and
replaces the need for proprietary technologies, like Flash and native mobile platforms.


An Introduction to Web Design

Introducing the concept of HTML tags and elements
HTML documents are text files that contain tags, which are used to mark up HTML elements. These
documents are usually saved with the .html file extension, although other extensions like .htm can be
The aforementioned tags are what web browsers use to display pages, and assuming the browser is well
behaved (most modern ones are), the display should conform to standards as laid out by the World Wide
Web Consortium (W3C), the organization that develops guidelines and specifications for many web
Note: The W3C website is found at The site offers numerous useful tools,
including validation services against which you can check your web pages.
HTML tags are surrounded by angle brackets—for instance, 

is a paragraph start tag. It’s good practice to close tags once the element content or intended display effect concludes, and this is done with an end tag. End tags are identical to the opening start tags but with an added forward slash: /. A complete HTML element looks like this:

Here is a paragraph.

This element consists of the following:  Start tag:

 Content: Here is a paragraph.  End tag:

Note: HTML doesn’t have a hard-and-fast rule regarding the case of tags. If you look at the source code of HTML pages on the Web, you may see lowercase tags, uppercase tags, or, in the case of pages put together over a period of time, a mixture of the two. That said, it’s still good practice with any markup language to be consistent, regardless of whether the rules are more flexible. Nesting tags There are many occasions when tags must be placed inside each other; this process is called nesting. One reason for nesting is to apply basic styles to text-based elements. Earlier, you saw the code for a paragraph element. We can now make the text bold by surrounding the element content with a strong element:

Here is a paragraph.

7 Chapter 1 You might be used to using the bold element to make text bold, but it is a physical element that only amends the look of text rather than also conveying semantic meaning. Logical elements, such as strong, convey meaning and add styling to text and are therefore preferred. These will be covered in Chapter 3. Note that the strong tags are nested within the paragraph tags (

), not the other way around. That’s because the paragraph is the parent element to which formatting is being applied. The paragraph could be made bold and italic by adding another element, emphasis (), as follows:

Here is a paragraph.

In this case, the strong and em tags could be in the opposite order, because they’re at the same level in the hierarchy. However, you must always close nested tags in the reverse order to that in which they’re opened, as shown in the previous code block; otherwise, some browsers may not display your work as intended. For instance, the following should be avoided:

Here is a paragraph.

As previously mentioned, it’s good practice to close tags in HTML—even though it’s not a requirement for all elements, being sloppy in this area can lead to errors. Take a look at the following:

Here is a paragraph.

Here, the emphasis element isn’t closed, meaning subsequent text-based content on the page is likely to be displayed in italics—so take care to close all your tags. Web standards and HTML HTML5 is an updated version of the HTML specification that has been around since 1997 and many of its features are already supported in today’s browsers. The changes in HTML5 include a focus on semantic markup like the addition of the
, and
elements and also the addition of the element for displaying advanced interactive graphics and the
In CSS, for the drop shadows flanking the content area to stop where the content does, they need to be assigned to the wrapper div, not the web page’s body. Therefore, you need to amend the body rule, removing the link to a background but retaining the color setting: body { background: #878787; } The #wrapper rule needs updating in two ways. First, the new background image needs to be applied to the div—hence the new background property/value pair. However, because the drop shadows are now shown within the wrapper div, it needs to take up more horizontal space. Since the dimensions of the div’s content don’t need changing, this is achieved by increasing the horizontal padding value. Also, because padding at the foot of the div is no longer required (the contentFooter div effectively takes care of padding at the bottom of the content area), the bottom padding value needs to be set to 0. These padding values are done in shorthand, as per the method outlined in the “Working with CSS shorthand for boxes” section earlier in this chapter. #wrapper { padding: 18px 36px 0; background: url(background-drop-shadow-2.gif) 50% 0 repeat-y; width: 500px; margin: 0 auto; } Finally, the contentFooter div needs styling. Its height is defined on the basis of the height of the background image (which is a slice of the Photoshop document shown in the following image). The background is applied to the div in the same way as in previous examples. One major change, however, is the use of negative margins. The contentFooter div is nested within the wrapper, which has 36 pixels of horizontal padding. This means that the contentFooter div background doesn’t reach the edges of the wrapper div by default, leaving whitespace on its left and right sides. By using margins equal to the negative value of this padding, the div can be “stretched” into place. 50 Web Page Essentials .contentFooter { height: 20px; background: url(background-drop-shadow-2-footer.gif) 50% 0; margin: 0 -36px; } As you can see, the horizontal value for margin is -36px, the negative of the horizontal padding value assigned to #wrapper. The addition of all these new rules results in the following image (which also shows the Photoshop image and exported GIF that makes up the background). An alternate method for getting this effect would be to place the contentFooter div outside of the wrapper and then use the same method of aligning it: .contentFooter { width: 500px; height: 20px; background: url(background-drop-shadow-2-footer.gif) 50% 0; padding: 0 36px; margin: 0 auto; } To ensure the background of the wrapper joins up with the shadow on the contentFooter div, a single pixel of bottom padding needs to be applied to the #wrapper rule: #wrapper { padding: 18px 36px 1px; background: url(background-drop-shadow-2.gif) 50% 0 repeat-y; width: 500px; margin: 0 auto; } 51 Chapter 2 CSS3 shadows The box-shadow property attaches one or more drop shadows on a box. The property is a comma-separated list of shadows, each specified by two to four length values, an optional color, and an optional insetkeyword. div { width: 150px; height: 150px; border:5px solid blue; background-color:orange; margin: 30px; color: blue; text-align: center; } #box1 { box-shadow: rgba(0,0,0,0.4) 10px 10px; } #box2 { box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px } #box3 { box-shadow: rgba(0,0,0,0.4) 10px 10px inset } Plain image gradients Tiled gradient images can be used to add depth and visual interest, without sapping resources (the example’s image is less than 2 KB in size). The depicted example is based on the page from the “Drop shadows” section. The changes are an amendment to the background pair in the #wrapper rule, tiling the gradient image horizontally on the wrapper’s background, and new padding settings, so the text doesn’t appear over the gradient. #wrapper { padding: 36px 18px 18px; background: #ffffff url(background-gradient.gif) repeat-x; width: 500px; margin: 0 auto; } 52 Web Page Essentials Watermarks Although it’s common for sites to be centered in the browser window, many designers choose left-aligned sites that cling to the left edge of the browser window. Both design styles are perfectly valid, but in an era of rapidly increasing monitor resolutions, you can end up with a lot of dead space to the side of a fixedwidth left-aligned design. And while some of you might be saying, “Well, create flexible-width designs, then!” some designs aren’t suited to that, and text-heavy sites tend to work better with fairly narrow text columns, since most users find it hard to read very wide blocks of text. All of this brings us to the final example in this chapter, which shows how to create watermarks for a web page. In the following screenshot, the wrapper div is to the left, with a background image to the right of this area. 53 Chapter 2 To achieve this effect, the margin property/value pair in the #wrapper rule has been removed, and the following rule has been added: body { background: #878787 url(background-watermark-large.gif) no-repeat 536px 0; } As mentioned earlier in the chapter, this assumes you’re adding a second body rule. You can, however, just add the background property/value pair to the existing body rule in the style sheet. The image used is a transparent GIF, so the background color setting was made a medium-gray (#878787). The reasoning behind using a transparent GIF is explained in Chapter 4, but it relates to web browsers sometimes interpreting colors differently from graphics packages. Therefore, it’s often easier to make the flat background color of a graphic transparent and then use the web page background color in place of it. The repeat setting is set to no-repeat, because we don’t want the image to tile. Finally, the background’s position is set to 536px 0 . The 0 setting means it hugs the top of the browser window, while the 536px setting means the image is placed at 536 pixels from the left. This is because the content area was earlier defined as 500 pixels wide with 18 pixels of padding, and 18 + 500 + 18 = 536. As mentioned earlier, backgrounds can be added to any web page element. For instance, you can add a watermark to the wrapper div by using the following CSS: #wrapper { padding: 18px; 54 Web Page Essentials background: #ffffff url(background-watermark.gif) no-repeat 20px 20px; width: 500px; } This adds the background-watermark.gif image to the background of the content div and positions it 20 pixels from the top and 20 pixels from the left. Again, no-repeat is used to stop the image from tiling. In either case for the watermark backgrounds, the images scroll with the page content. However, watermarks can also work well as fixed backgrounds—this can be achieved by adding the fixed value to the background property in the body and #wrapper rules. CSS3 patterns The CSS3 gradient features that are described earlier are powerful enough to produce beautiful patterns. Web designer Lea Verou has assembled a nice CSS3 patterns gallery from many contributors ( 55 Chapter 2 Closing your document At the start of this chapter, we examined basic HTML and XHTML documents. Regardless of the technology used, the end of the document should look like this: There are no variations or alternatives. A body end tag terminates the document’s content, and an html end tag terminates the document. No web page content should come after the body end tag, and no HTML content should come after the html end tag (whitespace is fine, and it’s common practice with server-side technologies to put functions after the html end tag—just don’t put any HTML there). Also, you must only ever have one body and one head in an HTML document, as well as a single html start tag and a single html end tag. This is important stuff to bear in mind, and even if you think it’s obvious, there are millions of pages out there—particularly those that utilize server-side includes and server-side languages—that include multiple body tags and head tags, have content outside the body tag, and have HTML outside the html tag. Don’t do this in your own work. 56 Web Page Essentials Naming your files Each designer has their own way of thinking when it comes to naming files and documents. Personally, we like to keep document names succinct but obvious enough that we can find them rapidly via a trawl of the hard drive. Certain conventions, however, are key: all file names should avoid illegal characters (such as spaces), and it’s good to be consistent throughout your site. We find that naming files in lowercase and replacing spaces with hyphens—like-this-for-example.html—works well. Web designers have historically used underscores in place of spaces, but that causes problems with some search engines, some of which run-in keywords, effectively considering the words within the file name as one string. This doesn’t happen with hyphens Commenting your work The rules for HTML, CSS, and JavaScript comments are simple, but the actual characters used are different in each case. HTML comments begin with and can run over multiple lines, as follows: In XHTML, double hyphens should not occur within the comment itself. Therefore, the following is not valid XHTML: The multiple-hyphen comment is commonly used by designers who favor hand-coding to separate large chunks of code within a document. When working in XHTML, you can replace the hyphens with a different character: CSS comments were covered in the “Creating boilerplates” section of Chapter 1, but we’ll briefly look through them again; they’re opened with /* and closed with */ and, like HTML comments, can run over multiple lines, as shown here: /* This is a comment in CSS */ /* Multiple-line CSS 57 Chapter 2 comment */ Multiple-line comments in JavaScript are the same as in CSS, but single-line comments are placed after double forward slashes: // This is a single-line JavaScript comment. Don’t use comments incorrectly. CSS comments in an HTML document won’t be problematic from a rendering standpoint—but they will be displayed. HTML comments in CSS can actually cause a CSS file to fail entirely. Note: Along with enabling you to comment your work, comments can be used to disable sections of code when testing web pages. Quickly testing your code You can easily test your HTML/CSS ideas with JsFiddle (, which includes an online editor for snippets build from HTML, CSS, and JavaScript. The code can then be shared with others, embedded in a blog, and so on. 58 Web Page Essentials A similar service that focuses more on CSS development is Dabblet ( 59 Chapter 2 Web page essentials checklist Congratulations—you made it to the end of this chapter! We’re aware that some of this one was about as much fun as trying to work out complex quadratic equations in your head, but as mentioned at the start, you need to know this stuff. Imagine designing a site and it suddenly not working the way you thought it would. It looks fine in your web design package and also in some web browsers, but it starts falling apart in others. Just removing an XML declaration might be enough to fix the site. If you take the elements of this chapter and form them into a simple checklist, you won’t have to risk displaying those wonderful “Untitled Documents” to the entire world (or inadvertently advertising the package you used to create the page). To make your life easier, you can refer to this checklist: 1. Ensure the relevant DOCTYPE declaration and namespace are in place. 2. Remove the XML declaration if it’s lurking. 60 Web Page Essentials 3. Add a title tag and some content within it. 4. Add a meta tag to define your character set. 5. If required, add keywords and description meta tags. 6. Attach a CSS file (or files). 7. Attach a JavaScript file (or files). 8. If your web editor adds superfluous body attributes, delete them. 9. Ensure there are no characters prior to the DOCTYPE declaration or after the html end tag. 10. Ensure no web page content appears outside the body element. 61 Chapter 3 Working With Type In this chapter:  Working with semantic markup  Defining font colors, families, and other styles  Understanding web-safe fonts  Creating drop caps and pull quotes  Rapidly editing styled text  Working to a grid  Creating and styling lists 63 Chapter 3 An introduction to typography Words are important—not just what they say but how they look. To quote Ellen Lupton, from her book Thinking with Type, “Typography is what language looks like.” Language has always been symbolic, although the origins of such symbols (of certain letterforms relating to, for example, animals) has largely been lost in written English; instead, we now have rather more abstract symbols designed for repetition on the page or screen. However, from the early calligraphy that was created by hand through the movable type (invented in Germany by Johannes Gutenberg during the 15th century) that enabled mass-production printing via molded letterform casts to the most advanced desktop-publishing software available today, the ultimate aim of type has been one of record and information provision. In other words, type is important from a design standpoint because it needs to record whatever information is being written about, and that information needs to be easily retrievable by anyone who wants to understand it. Like all aspects of design, typography has massively evolved over the years, particularly over the past couple of decades, where computers have enabled designers to more rapidly experiment with lettering. Despite this, many conventions formed much earlier still have a part to play:  Myriad fonts exist, and each one has a different look and therefore a different “feel.” You need to choose the most appropriate one for your purpose. (This is further complicated by there being only a certain number of web-safe fonts, as you’ll learn later.)  Headings, strap-lines/stand-firsts (the introductory line that introduces a piece of text, commonly used in editorial articles), and crossheads (short subheadings that break up areas of body copy) should stand out, and the prominence of each piece of text should be related to its level of importance (in other words, a crosshead shouldn’t be more prominent than a main heading).  Footnotes often use text smaller than the main body copy text to signify their lesser significance to the main text, but nonetheless they provide useful supplementary information.  Decorative elements can be used to draw the reader’s attention to specific parts of the text. Drop caps and initials—large initial letters, flamboyant in classical typography, but typically more restrained in modern work (see right)—enable a reader to rapidly navigate to the beginning of a piece of text. Pull quotes—quotes from the main body of the text, displayed in large lettering outside of context—are often used in magazine articles to draw a reader’s attention to a particular article, highlighting particularly interesting quotes or information.  Spacing is just as important as content. Kerning—the spacing between letter pairs—can be increased to add prominence to a heading. Leading—the amount of added vertical spacing between lines of text—can also be adjusted. Increasing leading from its default can make text more legible. In books, a baseline grid is often employed, ensuring that text always appears in the same place on each page. This means that the text on the opposite side of the paper doesn’t appear in the gaps between the lines on the page you’re reading. Baseline grids often make for 64 Working With Type extremely pleasing vertical rhythm and are regularly used in print publications; they’re infrequently used online but can nonetheless be of use, making a page of text easier to read and navigate.  Columns sometimes make a page easier to read, and this technique is routinely used by newspapers and magazines. Online, the recent ability to autoflow columns of text makes de facto text columns possible. This is impractical because not every browser supports it yet and because columns force users to scroll repeatedly, but the reasoning behind columns is still handy to bear in mind. Generally, it’s considered easier to read text that has fairly narrow columns (although not too narrow—if there are too few characters, reading and comprehension slow down). Text that, for example, spans the entire width of a 23-inch monitor rapidly becomes tiring to read. There are no hard-and-fast rules when it comes to line length, although some go by the “alphabet-and-ahalf” rule (39 characters per line), some advocate the “points-times-two” rule (double the point size and use the number for the number of characters), and others recommend a dozen or so words (or about 60 characters). A few highly useful online resources for web typography can be found at the following locations:  The Elements of Typographic Style Applied to the Web:  Five Simple Steps to Better Typography:  Five Simple Steps to Designing Grid Systems: When it comes to web design, some conventions are used, and others are ignored. In fact, while web designers take the utmost care to get layouts right, scant few give the same thought to text, merely choosing a font and arbitrarily setting other values, if they set them at all. Once, this could be excused, but CSS has enabled web type to come a long way, and although the same degree of control as print-based type isn’t possible, you can do a lot more than just choose your preferred font for headings and body copy. 65 Chapter 3 In this chapter, we’ll take a look at the various components available when working on web-based type (including elements and CSS properties) and provide some exercises, the results from which you can use for the basis of your own sites’ type. As a final note in this introduction, it’s also worth mentioning spelling and grammar. Both of these are clearly way outside the scope of this book, but they’re things designers tend to overlook. A site with a lot of grammatical and spelling errors, especially in larger text (such as headings and pull quotes), looks unprofessional. If in doubt when working on sites, consult (or get your client to consult) a copywriter. Note: There are a couple of books worth digging out for more information on typography and language. A decent primer on type design is Helen Lupton’s Thinking with Type. For an entertaining (if not entirely accurate) history of the English language, read Bill Bryson’s The Mother Tongue. Styling text the old-fashioned way (or, why we hate font tags) Styling text online used to be all about font tags. When Netscape introduced the font element—complete with size and color attributes—web designers wept tears of joy. When Microsoft announced it would go further, adding a face attribute (enabling you to specify the font family), web designers were giddy with anticipation. But things didn’t go according to plan. Page sizes bloated as designers created pages filled with fonts of myriad sizes and colors. Web users looked on aghast, wondering whether giant, orange body copy was really the way to go and whether it was worth waiting twice as long for such abominations to download. More important, it became apparent that font tags caused problems, including the following:  Inconsistent display across browsers and platforms  The requirement for font tags to be applied to individual elements  Difficulty ensuring fonts were consistent sitewide, because of having to style individual elements  HTML geared toward presentation rather than logical structure  Large HTML documents because of all the extra elements In addition, working with font tags is a time-consuming, boring process, and yet some (although, thankfully, increasingly few) web designers remain blissfully ignorant of such problems. In my opinion, if font tags weren’t HTML elements, I’d suggest they be taken out back and shot. Today, there is no reason whatsoever to stick with them. Text can be rapidly styled sitewide with CSS, and, as you’ll learn later in this chapter, CSS provides you with a greater degree of control than font tags ever did. More crucially, font tags encourage badly formed documents, with designers relying on inline elements to style things like headings, when there are perfectly good HTML elements better suited to that purpose. 66 Working With Type HTML should be reserved for content and structure, and CSS for design. Web pages should be composed of appropriate elements for each piece of content. This method of working, called semantic markup, is what we’re going to discuss next. A new beginning: semantic markup Essentially, semantic markup means “using the appropriate tag at the relevant time,” and well-formed semantic markup is an essential aspect of any website. The following is an example of the wrong way of doing things—relying on font tags to create a heading and double line breaks (

) for separating paragraphs: Article heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi.

Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis et, venenatis at, velit. Ut sodales lacus sed eros. Tags should always relate to the content so that if the styling is removed, there is always an indication of what role each element plays within the document structure and hierarchy—for instance, there would be no visual clues as to the importance of the heading. Also, the use of double line breaks (

) instead of paragraph tags means the “paragraphs” cannot be styled in CSS, because there’s nothing to inform the web browser what the content actually is. Instead, the example should be marked up like this:

Article heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi.

Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis et, venenatis at, velit. Ut sodales lacus sed eros.

Here, the heading is marked up with the relevant tags, and paragraph elements are used instead of double line breaks. This means the page’s structural integrity is ensured, and the markup is logical and semantic. If the attached CSS styles are removed, the default formatting still makes obvious to the end user the importance of the headings and will visually display them as such. In this section, we’ll look at how to mark up paragraphs and headings, explore logical and physical styles, and discuss the importance of well-formed semantic markup. Paragraphs and headings With words making up the bulk of online content, the paragraph and heading HTML elements are of paramount importance. HTML provides six levels of headings, from h1 to h6, with h1 being the top-level 67 Chapter 3 heading. The adjacent image shows how these headings, along with a paragraph, typically appear by default in a browser.

Level one heading

Level two heading

Level three heading

Level four heading

Level five heading
Level six heading

Default paragraph size

By default, browsers put margins around paragraphs and headings. This can vary from browser to browser, but it can be controlled by CSS. Therefore, there’s no excuse for using double line breaks to avoid default paragraph margins affecting web page layouts. Despite the typical default sizes, level-five and level-six headings are not intended as “tiny text” but as a way to enable you to structure your document, which is essential, because headings help with assistive technology, enabling people who are visually disabled to efficiently surf the Web. In terms of general usage, it’s generally recommended to stick to just one h1 element per sectioning element, used for the section’s primary heading. As discussed in Chapter 2, a sectioning element is an