Web Programming with html5, css, and JavaScript

638
Appendix A
 
HTML5 and CSS Coding-Style Conventions

---

• As shown in the preceding example, when embedding a list inside a list, the outer list’s end 
tag must be placed below the embedded list.
4. Tables:
• Normally, you should nest 
table
, 
thead
, 
tbody
, and 
tr
elements as follows:

Dumb table

A	B
one	two
three	four

• As an alternative to the indentation shown in the preceding example, if all the code in a 
tr
container can fit on one line, then it’s acceptable to put the entire 
tr
container code on one line.
5. Images and colors:
• Include 
width
and 
height
attributes for all 
img
elements.
• Include the 
alt
attribute for all 
img
elements. Use 
alt=""
for decorative images
(A 
decorative image
is an image that doesn’t add any information to the page and isn’t 
mentioned by the page’s content).
• Do not use animated GIFs, or use them sparingly.
6. Character references:
• In the interest of readability, if there’s a choice, use regular characters and not character 
references. Here’s when it’s appropriate to use a character reference:
■
Use a character reference to display a character that’s not on the keyboard.
■
Use a character reference to display a character that would normally have a special 
meaning in HTML:
<
,
>
,
&
double quote (
"
), single quote (
'
), but only when they are inside an attribute value 
string
639
body
Container

---

■
Use an 
 
character reference if you need to:
Display a blank space without allowing a line break (to ensure that a group of words will 
be displayed on the same line).
Display multiple blank spaces without allowing whitespace collapsing.
• Character references fall into two categories—named character references and numeric
character references. Named character references use the format 
&
name
;
. Numeric character
references use the format 
&#
unicode-value
;
. Some symbols are represented by both a 
named character reference and a numeric character reference. For example, the less than 
symbol is represented by 
<
and by 
<
. If a symbol is represented by both types of 
character references, you should use the named character reference version because named 
character references are more understandable. Some symbols are represented only by a 
numeric character reference and not a named character reference. Because numeric character 
references are rather cryptic, you should provide a comment whenever you use a numeric 
character reference for the first time in a web page.
7. Miscellaneous not-quite-as-important guidelines:
These guidelines are useful, but if your web page is small or you’re in a hurry, don’t worry 
if you fail to follow these rules:
•
Plain text
refers to characters that are not part of a tag. In other words, plain text is not a 
tag type, a tag attribute, or a tag attribute’s value.
Plain text should not be positioned immediately within the 
html
container, the 
head
container, or the 
body
container. Plain text should appear only within container elements 
that are within the 
body
element. This style rule leads to page content that is defined 
more accurately. And that makes it possible for CSS and JavaScript to manipulate the page 
content more effectively.
• Phrasing elements should not be positioned immediately inside the 
body
container. 
Normally, they should be positioned within a block element other than the 
body
container.
• Do not specify precise sizes for text font. Instead, use header tags (
h1
, 
h2
, etc.) or use style 
sheets with 
font-size
values such as 
small
, 
large
, 
smaller
, 
larger
, 
125%
, etc.