Top Banner
Markup
66

Michael(tm) Smith ED09 presentation

Jul 13, 2015

Download

Technology

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Michael(tm) Smith ED09 presentation

Markup

Page 2: Michael(tm) Smith ED09 presentation

Michael(tm) Smith

[email protected]

Page 3: Michael(tm) Smith ED09 presentation

Contents: Markup issues

•Semantic markup

•Device-interoperable markup•Accessible markup

•Maintainable markup

Page 4: Michael(tm) Smith ED09 presentation

Contents: DOM & Syntax

•The W3C DOM•HTML syntax/serializations

Page 5: Michael(tm) Smith ED09 presentation

Contents: S&S

•Basic HTML structure •Adding more semantics and structure

Page 6: Michael(tm) Smith ED09 presentation

Contents: Element types

•Hyperlinks•Images

•Lists•Forms

•Emphasis/importance•Specific semantic elements

Page 7: Michael(tm) Smith ED09 presentation

Contents: Using generics

•<div> and <span>•The class and id attributes

Page 8: Michael(tm) Smith ED09 presentation

Contents: Choices

•Validation and testing •HTML vs XHTML

•HTML5•Other W3C draft standards

•Keeping up with browsers•The End

Page 9: Michael(tm) Smith ED09 presentation

Semantic markup

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

Page 10: Michael(tm) Smith ED09 presentation

Semantic markup

Semantic markup is important because it transforms a document into being useful as a “document as an information tool” — like a database.

Page 11: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Semantic markup

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).

Page 12: Michael(tm) Smith ED09 presentation

Device-interoperable markup

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).

Page 13: Michael(tm) Smith ED09 presentation

Accessible markup

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).

Page 14: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Accessible markup

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.

Page 15: Michael(tm) Smith ED09 presentation

Maintainable markup

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.

Page 16: Michael(tm) Smith ED09 presentation

The W3C DOM

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.

Page 17: Michael(tm) Smith ED09 presentation

HTML syntax/serializations

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

"tag soup" HTML)• XML syntax (XHTML).

Page 18: Michael(tm) Smith ED09 presentation

Basic HTML structure

• <html> — root element• <head> — document metadata• <body> — document content/body

Page 19: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Basic HTML structure

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.

Page 20: Michael(tm) Smith ED09 presentation

Basic HTML structure

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.

Page 21: Michael(tm) Smith ED09 presentation

Adding semantics and structure

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.

Page 22: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Adding semantics and structure

Do also learn about other mechanisms for adding semantics and structure to your content, such as microformats and RDFa.

Page 23: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Adding semantics and structure

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.

Page 24: Michael(tm) Smith ED09 presentation

Hyperlinks

• <a> — hyperlink• <area> — image-map hyperlink• <link> — metadata hyperlink

Page 25: Michael(tm) Smith ED09 presentation

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

The <a> element

Hyperlinks

Page 26: Michael(tm) Smith ED09 presentation

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

The <a> element

Hyperlinks

Page 27: Michael(tm) Smith ED09 presentation

How to use the <a> element improperly

Hyperlinks

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

Page 28: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Hyperlinks

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

Page 29: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Hyperlinks

Do use meaningful hyperlink text.Do not use (for example) context-bound (presentationally-bound), meaningless text such as “click here” for hyperlinks.

Page 30: Michael(tm) Smith ED09 presentation

<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.”>

The <img> element

Images

Page 31: Michael(tm) Smith ED09 presentation

Hyperlinks

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).

Page 32: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Images

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.

Page 33: Michael(tm) Smith ED09 presentation

Lists

• <ul> — unordered list• <ol> — ordered list• <dl> — description list

Page 34: Michael(tm) Smith ED09 presentation

<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>

The <ul> element

Lists

Page 35: Michael(tm) Smith ED09 presentation

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

The <ol> element

Lists

Page 36: Michael(tm) Smith ED09 presentation

<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>

The <dl> element

Lists

Page 37: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Lists

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.

Page 38: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Lists

Do not use the <dl>, <dt>, and <dd> structure simply for the presentational purpose of indenting particular content.

Page 39: Michael(tm) Smith ED09 presentation

Forms

• <form> — form• <input> — [many purposes]• <textarea> — text input/edit control• <select> — selection menu• <option> — option in a selection menu• more...

Page 40: Michael(tm) Smith ED09 presentation

Emphasis/importance

• <em> — emphatic stress• <strong> — strong importance

Page 41: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Emphasis/importance

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

Page 42: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Emphasis/importance

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.

Page 43: Michael(tm) Smith ED09 presentation

Specific semantic elements

• <abbr> — abbreviation• <address> — contact information• <blockquote> — contact information• <cite> — cited title of a work• <code> — code fragment

Page 44: Michael(tm) Smith ED09 presentation

Specific semantic elements

• <dfn> — defining instance of a term• <kbd> — user input <q> — quotation• <samp> — (sample) output• <var> — variable or “placeholder text”

Page 45: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Specific semantic elements

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

Page 46: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Specific semantic elements

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.

Page 47: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Specific semantic elements

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>).

Page 48: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Specific semantic elements

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.

Page 49: Michael(tm) Smith ED09 presentation

<div> and <span>

• <div> — generic container (flow content)• <span> — generic wrapper (phrasing)

Page 50: Michael(tm) Smith ED09 presentation

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

The <div> element

<div> and <span>

Page 51: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

<div> and <span>

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

Page 52: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

The class and id attributes

Do make judicious use of carefully chosen class values with <div> and <span> elements and other elements, to add semantic meaning to your content.

Page 53: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

The class and id attributes

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.

Page 54: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

The class and id attributes

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.

Page 55: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Validation and testing

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).

Page 56: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Validation and testing

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.

Page 57: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Validation and testing

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.

Page 58: Michael(tm) Smith ED09 presentation

HTML vs. XHTML

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)

Page 59: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

HTML vs. XHTML

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.

Page 60: Michael(tm) Smith ED09 presentation

How to accidently hide an entire page

HTML vs. XHTML

<head><script src=”functions.js”/><link rel=”stylesheet”href=”style.css”></head><body><p>This will not be seen.</p>

Page 61: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

HTML vs. XHTML

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

Page 62: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

HTML5

Do start learning about HTML5 now:Not just about new features in HTML5, but about what problems HTML5 is intended to solve.

Page 63: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

W3C draft standards

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

Page 64: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Keeping up with browsers

Do test your content with development versions of browsers.• Opera snapshots• WebKit/Safari/Chrome nightly builds• Mozilla Minefield• IE beta releases

Page 65: Michael(tm) Smith ED09 presentation

Do’s and Don’ts

Keeping up with browsers

Do report browser bugs to vendors.See John Resig,“A Web Developer's Responsibility”:http://ejohn.org/blog/a-web-developers-responsibility/