code is shown in monospace typebold gray is used for old codebold orange for transitional codebold fuchsia for new or recommended code<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html> <meta
http-equiv="content-type" content="text/html;
charset=utf-8">
<meta charset="utf-8"><!DOCTYPE html>
<meta charset="utf-8"><plaintext> → use <pre> instead<basefont> <big> <font> <tt> → use CSS font<s> <strike> <u> → text-decoration<center> align → text-align and margin:autolink, alink, vlink → pseudo-classes and color<img longdesc> - use a visible description or link<frameset> <frame> - breaks linking, history
<iframe> if necessary<html version> - no practical effect<meta scheme> - avoid invisible metadata
rev attribute - oft misunderstood.
rel microformats instead<script type="text/javascript">
<a href="..."><img border="0"></a><meta />
<link />
<br />
<hr />
<img />
<input />
<option />
<img src=photo1.jpg> → <img src="photo1.jpg" /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> ... </title>
</head>
<body> ... </body>
</html><table>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
</table><acronym> → use <abbr> instead<applet> → <object><dir> → <ul><a name="a1"></a> → <div id="a1"> ... </div><img name="i1"> → <img id="i1" />rev, longdesc, frame, version, schemeid attribute, <abbr>, <object>, <ul>
<cite><em> - nest to indicate stronger emphasis<strong> - importance rather than emphasis<small> - small print, disclaimer, caveat, copyright<i> - alternate voice/mood. technical term, idiom<b> - stylistically offset. keyword, product, lead<br> - line break, e.g. in poems, addresses<hr> - paragraph level thematic break<iframe> for nested HTML<embed> for plugins<base target>, <a target>, <area target>
<li value><ol start><ol>, <ul> may have zero items<ol reversed> New!<cite> - HTML4 allowed speaker names
<cite> + hCard for speakers:
<q cite="#ak">
The best way to predict the future is to invent it.
</q>
— <cite class="vcard" id="ak">
<span class="fn">
Alan Kay
</span>
</cite><em> <strong><small> <i> <b> <br> <hr><iframe> <embed> <li value> <ol start> target <cite> + hCard for speakers<a> and <area> fixes<a> can now surround blocks, e.g. post headings
<a rel="bookmark" href="..."><h2>title of a blog post, linked to its permalink</h2></a>
class, dir, id, lang, style, tabindex, title
<html>, <title> elements<a media>, <area media> just like <link media>
<a media="handheld" href="http://m.twitter.com" rel="alternate">
mobile site
</a><a media="print" href="http://example.com/article-print" rel="alternate">
print version
</a><area hreflang rel> like <a hreflang rel>
rel for microformatsclass dir id lang style tabindex title
media rel hreflang<ruby> - annotated East Asian text<rt> - Ruby Text annotation
<rp> - Ruby Parenthesis for non-supporting browsers...
<ruby>
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
......
<ruby>
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
...... 漢 (かん) 字 (じ) ...
<section> - thematic grouping of content
<header> - intro/nav/headings<nav> - navigation links<footer> - info about section, author, copyright<article> - self-contained post, entry, news, comment
<section><aside> - tangential content, side comments<hgroup> - related multilevel headings<article> <div class="article">...</div> <article>...
.article { /* article tag styling here */ }
<figure> <figcaption> images, captions/descriptions
<mark> highlighted run of text, e.g. searched terms<time datetime> precise dates and date-times
<section> <header> <nav> <footer><article> <aside> <hgroup><figure> <figcaption> <mark><time> for dates - beware of limitations
<svg> - W3C's vector graphics markup
<canvas> - drawing with javascript
<audio src> - like img for sound
<video src> - alternative to Flash or Quicktime video plugins
<source src> - to publish both H.264 and Ogg
<video controls>
<source src="http://example.com/vid.mp4">
<source src="http://example.com/vid.ogv">
A short example video.
</video><audio src> <video src><source src><input type="..."><output> - result of a calculation<details> - expandable content
<summary> - label for details<meter> - % or measurement within a range
min max value attributes<progress max value> - task completion
<input type="search"> + others cautiously<output> <details> <summary><meter> <progress>