document.createElement("section");は、IEだけなので、


即席html5を作成してみました。
ファイル一枚だけで使えます。
yahoo user interface と jquery も付いています。

よろしければどうぞ





しょうがないので、html5xmlでも描けるので、やってみた。
作ったサンプル: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).

ということだった。

スタイルは、見ていないらしい。

TOP