semantic-xhtml-design-principles: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
No edit summary
m (Reverted edit of AfsU77, changed back to last version by JamesCraig)
Line 9: Line 9:
## Plural components are made singular, and thus multiple nested elements are used to represent multiple text values that are comma-delimited.
## Plural components are made singular, and thus multiple nested elements are used to represent multiple text values that are comma-delimited.
# Use the most accurately precise semantic XHTML building block for each object etc.
# Use the most accurately precise semantic XHTML building block for each object etc.
# Otherwise use a generic structural element (e.g. <code>
# Otherwise use a generic structural element (e.g. <code>&lt;span&gt;</code> or <code>&lt;div&gt;</code>), or the appropriate contextual element (e.g. an <code>&lt;li&gt;</code> inside a <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code>).
# Use class names based on names from the original schema, unless the [[semantic-xhtml|semantic XHTML]] building block precisely represents that part of the original schema.  If names in the source schema are case-insensitive, then use an all lowercase equivalent.  Components names implicit in prose (rather than explicit in the defined schema) should also use lowercase equivalents for ease of use. Spaces in component names become dash '-' characters.
# Finally, if the format of the data according to the original schema is too long and/or not human-friendly, use <code>&lt;abbr&gt;</code> instead of a generic structural element, and place the literal data into the 'title' attribute (where abbr expansions go), and the more brief and human-readable equivalent into the element itself. Further informative explanation of this use of <code>&lt;abbr&gt;</code>: [[abbr-design-pattern]], [http://tantek.com/log/2005/01.html#d26t0100 Human vs. ISO8601 dates problem solved], and [http://www.webstandards.org/2007/04/27/haccessibility/ hAccessibility] aka "abbr-design-pattern considered harmful."
 
==Semantic XHTML and Microformats==
(from Tantek Çelik on the [http://article.gmane.org/gmane.comp.web.microformats.general/6014 microformats-discuss mailing list])
 
Note that microformats use semantic XHTML, but not all use of semantic
XHTML are microformats.
 
Web designers and authors are using semantic XHTML everyday without using
microformats, and that's perfectly fine.  They are not trying to create
standards and interoperably/automatically exchange data with each other.
They are simply expressing the semantics of their documents.
 
Whereas microformats follow a specific process and are intended to provide
a way for publishers worldwide to easily interoperably exchange simple
bits of data.
 
http://microformats.org/wiki/process
 
This distinction between "semantic XHTML" and "microformats" is very
important to understand and is often confused - I've even seen W3C staff
themselves call microformats "just using good class names", which is
incorrect.  (Using good class names is simply one of the practices of
semantic XHTML).

Revision as of 13:19, 28 May 2007

Semantic XHTML Design Principles

XHTML is built on XML, and thus XHTML-based formats can be used not only for convenient display presentation, but also for general-purpose data exchange. In many ways, XHTML-based formats exemplify the best of both HTML and XML worlds. However, when building XHTML-based formats, it helps to have a guiding set of principles.

  1. Reuse the schema (names, objects, properties, values, types, hierarchies, constraints) as much as possible from pre-existing, established, well-supported standards by reference. Avoid restating constraints expressed in the source standard. Informative mentions are ok.
    1. For types with multiple components, use nested elements with class names equivalent to the names of the components.
    2. Plural components are made singular, and thus multiple nested elements are used to represent multiple text values that are comma-delimited.
  2. Use the most accurately precise semantic XHTML building block for each object etc.
  3. Otherwise use a generic structural element (e.g. <span> or <div>), or the appropriate contextual element (e.g. an <li> inside a <ul> or <ol>).
  4. Use class names based on names from the original schema, unless the semantic XHTML building block precisely represents that part of the original schema. If names in the source schema are case-insensitive, then use an all lowercase equivalent. Components names implicit in prose (rather than explicit in the defined schema) should also use lowercase equivalents for ease of use. Spaces in component names become dash '-' characters.
  5. Finally, if the format of the data according to the original schema is too long and/or not human-friendly, use <abbr> instead of a generic structural element, and place the literal data into the 'title' attribute (where abbr expansions go), and the more brief and human-readable equivalent into the element itself. Further informative explanation of this use of <abbr>: abbr-design-pattern, Human vs. ISO8601 dates problem solved, and hAccessibility aka "abbr-design-pattern considered harmful."

Semantic XHTML and Microformats

(from Tantek Çelik on the microformats-discuss mailing list)

Note that microformats use semantic XHTML, but not all use of semantic XHTML are microformats.

Web designers and authors are using semantic XHTML everyday without using microformats, and that's perfectly fine. They are not trying to create standards and interoperably/automatically exchange data with each other. They are simply expressing the semantics of their documents.

Whereas microformats follow a specific process and are intended to provide a way for publishers worldwide to easily interoperably exchange simple bits of data.

http://microformats.org/wiki/process

This distinction between "semantic XHTML" and "microformats" is very important to understand and is often confused - I've even seen W3C staff themselves call microformats "just using good class names", which is incorrect. (Using good class names is simply one of the practices of semantic XHTML).