Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Markup
Michael(tm) Smith
mike@w3.org
•Semantic markup
•Device-interoperable markup
•Accessible markup
•Maintainable markup


           Contents: Markup issues
•The W3C DOM
•HTML syntax/serializations



           Contents: DOM & Syntax
•Basic HTML structure
•Adding more semantics and structure



           Contents: S&S
•Hyperlinks
•Images
•Lists
•Forms
•Emphasis/importance
•Specific semantic elements

           Contents: Element types
•<div> and <span>
•The class and id attributes



            Contents: Using generics
•Validation and testing
•HTML vs XHTML
•HTML5
•Other W3C draft standards
•Keeping up with browsers
•The End

           Co...
Semantic markup is markup that
encodes meaning into your content
(instead of just embedding
presentational cues).




    ...
Semantic markup is important
because it transforms a document
into being useful as a “document as an
information tool” — l...
Do’s and Don’ts


Do make good use of semantic
markup in your content — because it
facilitates unanticipated reuses
(repur...
Device-interoperable markup is
markup that is “portable” — not tied
to any one specific device or platform
or context, but ...
Accessible markup is markup that
does not exclude users of any
particular class and that does not
discriminate against use...
Do’s and Don’ts


Do make good use of device-
interoperable markup and accessible
markup in your content — noting that
the...
Maintainable markup is markup that
makes clear, consistent, and logical
use of markup features (for example,
class names a...
HTML is an abstract language that
applications can represent in memory
in any number of possible ways. The
W3C DOM is just...
HTML documents can potentially be
stored and transmitted using any
number of possible “concrete
syntaxes”. But there are t...
• <html> — root element
• <head> — document metadata
• <body> — document content/body




                Basic HTML struc...
Do’s and Don’ts


Do learn which HTML elements are
obsolete/deprecated.
Do not resort to “tag abuse”; that is,
do not use ...
The HTML language (especially
compared to languages such as
DocBook) does not enforce much
structure on content. It is the...
A key part of adding logical structure
is to make judicious use of titled
sections, using the <div> element and
the <h1> t...
Do’s and Don’ts



Do also learn about other mechanisms
for adding semantics and structure to
your content, such as microf...
Do’s and Don’ts

Do add as much structure and
semantics to your content up-front —
as early in the content-authoring and
c...
• <a> — hyperlink
• <area> — image-map hyperlink
• <link> — metadata hyperlink




                          Hyperlinks
The <a> element



<p>The
<a href=”http://w3.org”
title=”The W3C website”
>W3C</a> produces web
standards.</p>



        ...
The <a> element




The W3C produces standards for
the fundamental technologies
on which the Web is based.




           ...
How to use the <a> element improperly


 <a name=”status”/>
 <h1>Publication status</h1>
 <p>This document…</p>




      ...
Do’s and Don’ts




Don’t use the name attribute on the
<a> element.




                            Hyperlinks
Do’s and Don’ts



Do use meaningful hyperlink text.
Do not use (for example) context-
bound (presentationally-bound),
mea...
The <img> element

<img src=”vermeer.png”
alt=”Oil painting of a girl
with blonde hair, wearing a
blue scarf and a pearl
e...
The value of the alt attribute on an
image should be a “text alternative”
which serves an equivalent purpose to
the purpos...
Do’s and Don’ts


Do learn to write useful alternative
text for images, and do consistently use
such text in your content....
• <ul> — unordered list
• <ol> — ordered list
• <dl> — description list




                            Lists
The <ul> element

<p>The HTML language has three
list wrappers:</p>
<ul>
  <li>The ul element</li>
  <li>The ol element</l...
The <ol> element

<p>There are three steps:</p>
<ol>
  <li>Twist the knob.</li>
  <li>Push the button.</li>
  <li>Run like...
The <dl> element

<p>This list associates events
with recommended actions:</p>
<dl>
  <dt>Intruder detected</dt>
  <dd>Rep...
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
l...
Do’s and Don’ts



Do not use the <dl>, <dt>, and <dd>
structure simply for the presentational
purpose of indenting partic...
• <form> — form
• <input> — [many purposes]
• <textarea> — text input/edit control
• <select> — selection menu
• <option> ...
• <em> — emphatic stress
• <strong> — strong importance




                 Emphasis/importance
Do’s and Don’ts



Do use <em> and <strong> when you
are actually marking up emphatic
stress and strong importance.




  ...
Do’s and Don’ts

Do not use <i> and <b> when you are
actually marking up emphatic stress
and strong importance.
Do note, h...
• <abbr> — abbreviation
• <address> — contact information
• <blockquote> — contact information
• <cite> — cited title of a...
• <dfn> — defining instance of a term
• <kbd> — user input <q> — quotation
• <samp> — (sample) output
• <var> — variable or...
Do’s and Don’ts



Do use the title attribute on <abbr>
elements, to provide the expansion of
the abbreviation.




      ...
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 wro...
Do’s and Don’ts

Do use the id attribute on all <dfn>
elements, to make all definitions
linkable/bookmarkable.
Do use <a> h...
Do’s and Don’ts



Do use the <var> element to mark up
“placeholder text”; that is, text which
the user is meant to mental...
• <div> — generic container (flow content)
• <span> — generic wrapper (phrasing)




                      <div> and <span>
The <div> element

<div id=”status”
  class=”section”>
  <h1>Publication status</h1>
  <p>This document…</p>
</div>



   ...
Do’s and Don’ts




Do always put <div> containers around
sections that contain <h1> through
<h6> titles.




            ...
Do’s and Don’ts



Do make judicious use of carefully
chosen class values with <div> and
<span> elements and other element...
Do’s and Don’ts

Do make judicious use of carefully
chosen id values with <div>, <dfn>, and
other elements, to add “linkab...
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...
Do’s and Don’ts


Do use validators as tools for yourself,
to help yourself catch your own markup
mistakes — just as you w...
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 ass...
Do’s and Don’ts

Do not use validators as a substitute
for thorough testing across multiple
browsers.
Do test your content...
All major browsers have two very
different parsers:
• HTML parser, for content served
  with a text/html MIME type
• XML p...
Do’s and Don’ts


Do not serve machine-generated
XHTML with a text/html MIME type.
Why? Programs cannot ensure their
XML/X...
How to accidently hide an entire page

<head>
<script src=”functions.js”/>
<link rel=”stylesheet”
href=”style.css”>
</head...
Do’s and Don’ts




Do not use self-closing tags in text/html.




                     HTML vs. XHTML
Do’s and Don’ts



Do start learning about HTML5 now:
Not just about new features in HTML5,
but about what problems HTML5 ...
Do’s and Don’ts

Do take time to learn about W3C draft
standards related to HTML5, as well as
recent full Recommendations....
Do’s and Don’ts


Do test your content with development
versions of browsers.
• Opera snapshots
• WebKit/Safari/Chrome nig...
Do’s and Don’ts


Do report browser bugs to vendors.
See John Resig,
“A Web Developer's Responsibility”:
http://ejohn.org/...
Thank you.

mike@w3.org


              The End
Upcoming SlideShare
Loading in …5
×

Michael(tm) Smith ED09 presentation

5,428 views

Published on

Published in: Technology
  • Be the first to comment

Michael(tm) Smith ED09 presentation

  1. Markup
  2. Michael(tm) Smith mike@w3.org
  3. •Semantic markup •Device-interoperable markup •Accessible markup •Maintainable markup Contents: Markup issues
  4. •The W3C DOM •HTML syntax/serializations Contents: DOM & Syntax
  5. •Basic HTML structure •Adding more semantics and structure Contents: S&S
  6. •Hyperlinks •Images •Lists •Forms •Emphasis/importance •Specific semantic elements Contents: Element types
  7. •<div> and <span> •The class and id attributes Contents: Using generics
  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
  24. • <a> — hyperlink • <area> — image-map hyperlink • <link> — metadata hyperlink Hyperlinks
  25. The <a> element <p>The <a href=”http://w3.org” title=”The W3C website” >W3C</a> produces web standards.</p> Hyperlinks
  26. The <a> element The W3C produces standards for the fundamental technologies on which the Web is based. Hyperlinks
  27. How to use the <a> element improperly <a name=”status”/> <h1>Publication status</h1> <p>This document…</p> Hyperlinks
  28. Do’s and Don’ts Don’t use the name attribute on the <a> element. Hyperlinks
  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
  40. • <em> — emphatic stress • <strong> — strong importance Emphasis/importance
  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
  49. • <div> — generic container (flow content) • <span> — generic wrapper (phrasing) <div> and <span>
  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
  66. Thank you. mike@w3.org The End

×