Your SlideShare is downloading. ×
0
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Michael(tm) Smith ED09 presentation

1,790

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,790
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×