document.createElement("section");は、IEだけなので、
しょうがないので、html5はxmlでも描けるので、やってみた。
作ったサンプル:Example document
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="html5.css"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title> </head> <body> <header> <h1>hello html5</h1> </header> <nav> <ul> <li><a href="http://www.whatwg.org/specs/web-apps/current-work/">working Draft</a></li> </ul> </nav> <section> <h2>web log</h2> <p>初めてhtml5に接したけど、君のプロポーションをまだ理解できない。</p> <p>君は、未来から来たためか、インターネットエクスプローラってシャツと、ジャヴァスクリプトのズボンは家内と、姿が見えないんだね</p> <p>Example paragraph</p> <dialog> <dt class="costello"> Costello</dt> <dd class="costello"> Look, you gotta first baseman?</dd> <dt> Abbott</dt> <dd > Certainly.</dd> <dt class="costello"> Costello</dt> <dd class="costello"> Who's playing first?</dd> <dt> Abbott</dt> <dd> That's right.</dd> <dt class="costello"> Costello</dt> <dd class="costello"> When you pay off the first baseman every month, who gets the money?</dd> <dt> Abbott</dt> <dd> Every dollar of it.</dd> </dialog> </section> <footer> <address>my-address@mydomain.com</address> </footer> </body> </html>
@charset "utf-8"; /* * CSS Document *------------------------------------------------------------------*/ /*ieはリンクカッコだけ*/ a{color:blue;text-decoration:underline;cursor:pointer} nav{ float:left; width:240px; display:block; border:1px solid #ccc; } section{ margin-left:260px; display:block; border:1px solid #ccc; } header{ color:navy; text-indent:2em; width:100%; } footer{ text-align:center; } dt.costello{ font-weight:bold; } dd.costello{ color:red; } /*スタイルをリセットする。xmlなのでブラウザにより、タイトルなどまで表示されるので、*/ head{display:none;} ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, NOFRAMES, OBJECT, OL, P, UL, CENTER, DIR, HR, MENU, PRE { display: block } LI { display: list-item } HEAD { display: none } TABLE { display: table } TR { display: table-row } THEAD { display: table-header-group } TBODY { display: table-row-group } TFOOT { display: table-footer-group } COL { display: table-column } COLGROUP { display: table-column-group } TD, TH { display: table-cell } CAPTION { display: table-caption } TH { font-weight: bolder; text-align: center } CAPTION { text-align: center } BODY { padding: 8px; line-height: 1.33 } H1 { font-size: 2em; margin: .67em 0 } H2 { font-size: 1.5em; margin: .83em 0; } H3 { font-size: 1.17em; margin: 1em 0 } H4, P, BLOCKQUOTE, UL, FIELDSET, FORM, OL, DL, DIR, MENU { margin: 1.33em 0 } H5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 } H6 { font-size: .67em; margin: 2.33em 0 } H1, H2, H3, H4, H5, H6, B, STRONG { font-weight: bolder } BLOCKQUOTE { margin-left: 40px; margin-right: 40px } I, CITE, EM, VAR, ADDRESS { font-style: italic } PRE, TT, CODE, KBD, SAMP { font-family: monospace } PRE { white-space: pre } BIG { font-size: 1.17em } SMALL, SUB, SUP { font-size: .83em } SUB { vertical-align: sub } SUP { vertical-align: super } DEL { text-decoration: line-through } HR { border: 1px inset } OL, UL, DIR, MENU, DD { margin-left: 40px } OL { list-style-type: decimal } OL UL, UL OL, UL UL, OL OL { margin-top: 0; margin-bottom: 0 } INS { text-decoration: underline } CENTER { text-align: center } BR:before { content: "\A" } /* An example of style for HTML 4.0's ABBR/ACRONYM elements */ ABBR, ACRONYM { font-variant: small-caps; letter-spacing: 0.1em } A[href] { text-decoration: underline } :focus { outline: thin dotted invert } /* Begin bidirectionality settings (do not change) */ BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } *[DIR="ltr"] { direction: ltr; unicode-bidi: embed } *[DIR="rtl"] { direction: rtl; unicode-bidi: embed } /* Elements that are block-level in HTML4 */ ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, CENTER, DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT, COL, COLGROUP, TD, TH, CAPTION { unicode-bidi: embed } /* End bidi settings */
HTML5 のバリデーションを行ってくれるサービスがある - IT戦記で、html5のバリデーションがあるらしいことを知った。
一応、やってみた。
(X)HTML5 validation results for http://www.tenman.info/hatena/html5.xml
The document is valid XHTML5 + SVG 1.1 + MathML 2.0 (subject to the utter previewness of this service).
ということだった。
スタイルは、見ていないらしい。