Michael(tm) Smith ED09 presentation

Markup

Michael(tm) Smith

[email protected]

Contents: Markup issues

•Semantic markup

•Device-interoperable markup•Accessible markup

•Maintainable markup

Contents: DOM & Syntax

•The W3C DOM•HTML syntax/serializations

Contents: S&S

•Basic HTML structure •Adding more semantics and structure

Contents: Element types

•Hyperlinks•Images

•Lists•Forms

•Emphasis/importance•Specific semantic elements

Contents: Using generics

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

Contents: Choices

•Validation and testing •HTML vs XHTML

•HTML5•Other W3C draft standards

•Keeping up with browsers•The End

Semantic markup

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

Semantic markup

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

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

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

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

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.

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.

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.

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

Basic HTML structure

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

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.


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.

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.

Do’s and Don’ts


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

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.

Hyperlinks

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

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

The <a> element

Hyperlinks

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

The <a> element

Hyperlinks

How to use the <a> element improperly

Hyperlinks

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

Do’s and Don’ts

Hyperlinks

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

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.

<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

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

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.

Lists

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

<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

<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

<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

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.

Do’s and Don’ts

Lists

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

Forms

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

Emphasis/importance

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

Do’s and Don’ts

Emphasis/importance

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

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.

Specific semantic elements

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


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

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 wrong, as are any other examples that use <cite> to mark up names of persons.

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

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.

<div> and <span>

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

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

The <div> element

<div> and <span>

Do’s and Don’ts

<div> and <span>

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

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.

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.

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.

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

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.

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.

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)

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.

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>

Do’s and Don’ts

HTML vs. XHTML

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

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.

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

http://www.w3.org/TR/

http://www.w3.org/TR/

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

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/

http://ejohn.org/blog/a-web-developers-responsibility/




The End

Thank you.

[email protected]

mailto:[email protected]

mailto:[email protected]

Michael(tm) Smith ED09 presentation

Technology

Transcript of Michael(tm) Smith ED09 presentation