Michael(tm) Smith ED09 presentation


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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