8. •Validation and testing
•HTML vs XHTML
•HTML5
•Other W3C draft standards
•Keeping up with browsers
•The End
Contents: Choices
9. Semantic markup is markup that
encodes meaning into your content
(instead of just embedding
presentational cues).
Semantic markup
10. Semantic markup is important
because it transforms a document
into being useful as a “document as an
information tool” — like a database.
Semantic markup
11. Do’s and Don’ts
Do make good use of semantic
markup in your content — because it
facilitates unanticipated reuses
(repurposing) of your content (uses
that you may not be able to anticipate
when you are creating the content).
Semantic markup
12. Device-interoperable markup is
markup that is “portable” — not tied
to any one specific device or platform
or context, but that instead works
across a range of context and devices
(including mobile devices, TVs, PDAs,
and other “constrained” contexts).
Device-interoperable markup
13. Accessible markup is markup that
does not exclude users of any
particular class and that does not
discriminate against users of any
particular class (for example, markup
that does not exclude or discriminate
against users with visual disabilities).
Accessible markup
14. Do’s and Don’ts
Do make good use of device-
interoperable markup and accessible
markup in your content — noting that
the same set of basic set of techniques
do double-duty to enable both device
independence and accessibility.
Accessible markup
15. Maintainable markup is markup that
makes clear, consistent, and logical
use of markup features (for example,
class names and ID values) in such a
way that it lends itself to easy
maintenance.
Maintainable markup
16. HTML is an abstract language that
applications can represent in memory
in any number of possible ways. The
W3C DOM is just one way — but it is
the standard way supported in all
major browsers. The DOM gives Web
developers programmatic (scripting)
access to inspect and manipulate
HTML documents within browsers.
The W3C DOM
17. HTML documents can potentially be
stored and transmitted using any
number of possible “concrete
syntaxes”. But there are two standard
syntaxes for HTML:
• text/html syntax (sometimes called
quot;tag soupquot; HTML)
• XML syntax (XHTML).
HTML syntax/serializations
18. • <html> — root element
• <head> — document metadata
• <body> — document content/body
Basic HTML structure
19. Do’s and Don’ts
Do learn which HTML elements are
obsolete/deprecated.
Do not resort to “tag abuse”; that is,
do not use HTML elements in ways
that conflict with the definitions of
what they are intended to represent.
Basic HTML structure
20. The HTML language (especially
compared to languages such as
DocBook) does not enforce much
structure on content. It is therefore
the responsibility of authors and
content creators to build structure
and semantics into their content.
Basic HTML structure
21. A key part of adding logical structure
is to make judicious use of titled
sections, using the <div> element and
the <h1> through <h6> title/heading
elements; doing so also adds obvious
“visual” structure to rendered output.
Adding semantics and structure
22. Do’s and Don’ts
Do also learn about other mechanisms
for adding semantics and structure to
your content, such as microformats
and RDFa.
Adding semantics and structure
23. Do’s and Don’ts
Do add as much structure and
semantics to your content up-front —
as early in the content-authoring and
content-creation cycle as possible.
Why? Because adding structure and
semantics to content becomes more
costly the later you do it in the cycle.
Adding semantics and structure
29. Do’s and Don’ts
Do use meaningful hyperlink text.
Do not use (for example) context-
bound (presentationally-bound),
meaningless text such as “click here”
for hyperlinks.
Hyperlinks
30. The <img> element
<img src=”vermeer.png”
alt=”Oil painting of a girl
with blonde hair, wearing a
blue scarf and a pearl
earring; her body turns away
at an angle from the painter,
but she looks back over her
shoulder at the painter.”>
Images
31. The value of the alt attribute on an
image should be a “text alternative”
which serves an equivalent purpose to
the purpose of the image (in the
particular context in which the image
is used in the document).
Hyperlinks
32. Do’s and Don’ts
Do learn to write useful alternative
text for images, and do consistently use
such text in your content.
Do not toss junk alt text into the values
of alt attributes just to keep validators
or other tools from complaining.
Images
33. • <ul> — unordered list
• <ol> — ordered list
• <dl> — description list
Lists
34. The <ul> element
<p>The HTML language has three
list wrappers:</p>
<ul>
<li>The ul element</li>
<li>The ol element</li>
<li>The dl element</li>
</ul>
Lists
35. The <ol> element
<p>There are three steps:</p>
<ol>
<li>Twist the knob.</li>
<li>Push the button.</li>
<li>Run like hell.</li>
</ol>
Lists
36. The <dl> element
<p>This list associates events
with recommended actions:</p>
<dl>
<dt>Intruder detected</dt>
<dd>Repeat “Intruder alert”.
Optionally, wave hands
around in random fashion.</dd>
</dl>
Lists
37. Do’s and Don’ts
Do use the <dl>, <dt>, and <dd>
structure for more than just
definitions; it is suitable for any kind of
list that associates names or terms of
some kind with values or descriptions
of some kind.
Lists
38. Do’s and Don’ts
Do not use the <dl>, <dt>, and <dd>
structure simply for the presentational
purpose of indenting particular
content.
Lists
39. • <form> — form
• <input> — [many purposes]
• <textarea> — text input/edit control
• <select> — selection menu
• <option> — option in a selection menu
• more...
Forms
41. Do’s and Don’ts
Do use <em> and <strong> when you
are actually marking up emphatic
stress and strong importance.
Emphasis/importance
42. Do’s and Don’ts
Do not use <i> and <b> when you are
actually marking up emphatic stress
and strong importance.
Do note, however: The HTML5 draft
attempts to redefine <i> and <b> in a
way that also gives them a semantic
(non-presentational) purpose.
Emphasis/importance
43. • <abbr> — abbreviation
• <address> — contact information
• <blockquote> — contact information
• <cite> — cited title of a work
• <code> — code fragment
Specific semantic elements
44. • <dfn> — defining instance of a term
• <kbd> — user input <q> — quotation
• <samp> — (sample) output
• <var> — variable or “placeholder text”
Specific semantic elements
45. Do’s and Don’ts
Do use the title attribute on <abbr>
elements, to provide the expansion of
the abbreviation.
Specific semantic elements
46. Do’s and Don’ts
Do not use the <cite> element to mark
up names of persons.
The example of <cite> in the HTML4
spec is wrong, as are any other
examples that use <cite> to mark up
names of persons.
Specific semantic elements
47. Do’s and Don’ts
Do use the id attribute on all <dfn>
elements, to make all definitions
linkable/bookmarkable.
Do use <a> hyperlinks around
instances of a term that are not the
defining instance (with href value
pointing to id of corresponding <dfn>).
Specific semantic elements
48. Do’s and Don’ts
Do use the <var> element to mark up
“placeholder text”; that is, text which
the user is meant to mentally replace
with some other literal value.
Specific semantic elements
50. The <div> element
<div id=”status”
class=”section”>
<h1>Publication status</h1>
<p>This document…</p>
</div>
<div> and <span>
51. Do’s and Don’ts
Do always put <div> containers around
sections that contain <h1> through
<h6> titles.
<div> and <span>
52. Do’s and Don’ts
Do make judicious use of carefully
chosen class values with <div> and
<span> elements and other elements, to
add semantic meaning to your content.
The class and id attributes
53. Do’s and Don’ts
Do make judicious use of carefully
chosen id values with <div>, <dfn>, and
other elements, to add “linkability” and
“bookmarkability” to your content.
Do make id values as short as possible,
but no shorter.
The class and id attributes
54. Do’s and Don’ts
Do note that the class and id attributes
do double-duty as a means to enable
CSS Selector expressions and CSS
rules and properties to be used for
specifying presentation of specific
parts of your content.
The class and id attributes
55. Do’s and Don’ts
Do use validators as tools for yourself,
to help yourself catch your own markup
mistakes — just as you would use a spell
checker or grammar checker (or as you
would use a lint checker to catch coding
mistakes).
Validation and testing
56. Do’s and Don’ts
Do not use validators as a means to
earn “This site is valid” badges; that is,
as a means to publicly assert to others
that your content is valid.
Think about it. You don’t put “This site
contains not spelling errors” badges on
your pages.
Validation and testing
57. Do’s and Don’ts
Do not use validators as a substitute
for thorough testing across multiple
browsers.
Do test your content in multiple
browsers and platforms, and (as much
as possible and practical) multiple
devices.
Validation and testing
58. All major browsers have two very
different parsers:
• HTML parser, for content served
with a text/html MIME type
• XML parser for content served with
an XML MIME type (such as
application/xhtml+xml)
HTML vs. XHTML
59. Do’s and Don’ts
Do not serve machine-generated
XHTML with a text/html MIME type.
Why? Programs cannot ensure their
XML/XHTML output is compatible
with HTML parsers in browsers.
XHTML 1.0 Appendix C is bad advice.
HTML vs. XHTML
60. How to accidently hide an entire page
<head>
<script src=”functions.js”/>
<link rel=”stylesheet”
href=”style.css”>
</head>
<body>
<p>This will not be seen.</p>
HTML vs. XHTML
61. Do’s and Don’ts
Do not use self-closing tags in text/html.
HTML vs. XHTML
62. Do’s and Don’ts
Do start learning about HTML5 now:
Not just about new features in HTML5,
but about what problems HTML5 is
intended to solve.
HTML5
63. Do’s and Don’ts
Do take time to learn about W3C draft
standards related to HTML5, as well as
recent full Recommendations.
• http://www.w3.org/TR/
• CSS Selectors API, Cross-0rigin
Resourse Sharing, Geolocation API,
Element Traversal, SVG
W3C draft standards
64. Do’s and Don’ts
Do test your content with development
versions of browsers.
• Opera snapshots
• WebKit/Safari/Chrome nightly builds
• Mozilla Minefield
• IE beta releases
Keeping up with browsers
65. Do’s and Don’ts
Do report browser bugs to vendors.
See John Resig,
“A Web Developer's Responsibility”:
http://ejohn.org/blog/a-web-
developers-responsibility/
Keeping up with browsers
