WEB制作(html・css(スタイルシート))に関する各種メモ書き

HTML5での追加タグと記述サンプル

■ HTML5での追加タグは以下の通り

video
section
time
rt
ruby
progress
rp
output
nav
menu
meter
mark
legend
keygen
header
footer
figure
dialog
details
datalist
command
canvas
audio
aside
article

■ HTML5のサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>HTML 5</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="XXXXX.css" />
</head>
<body>
    
    <header>
      <h1>Header</h1>
        <nav><ul>
            <li><a href="#">home</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">contact</a></li>
        </ul></nav>
    </header>

    <section>
        <ol id="posts-list" class="hfeed">
            <li><article>
                <header><h2><a href="#">article title 1</a></h2></header>
                <footer>
                    <abbr title="2005-10-10T14:07:00-07:00">
                        8th October 2009
                    </abbr>
                    <address>By <a href="#">User 1</a></address>
                </footer>
                <div>contents contents contents contents contents contents contents contents contents </div>
            </article></li>

            <li><article>
                <header><h2><a href="#">article title 1</a></h2></header>
                <footer>
                    <abbr title="2005-10-10T14:07:00-07:00">
                        8th October 2009
                    </abbr>
                    <address>By <a href="#">User 1</a></address>
                </footer>
                <div>contents contents contents contents contents contents contents contents contents </div>
            </article></li>

            <li><article>
                <header><h2><a href="#">article title 1</a></h2></header>
                <footer>
                    <abbr title="2005-10-10T14:07:00-07:00">
                        8th October 2009
                    </abbr>
                    <address>By <a href="#">User 1</a></address>
                </footer>
                <div>contents contents contents contents contents contents contents contents contents </div>
            </article></li>
        </ol>
    </section>

    <section>
        <h2>sub menu</h2>
          <ul>
              <li><a href="#" rel="external">menu 1</a></li>
              <li><a href="#" rel="external">menu 2</a></li>
              <li><a href="#" rel="external">menu 3</a></li>
              <li><a href="#" rel="external">menu 4</a></li>
              <li><a href="#" rel="external">menu 5</a></li>
          </ul>
    </section>

    <footer>
        <address>Copyright &copy; XXXXX All Rights Reserved.</address>
    </footer>

</body>
</html>

http://granshe.blog.shinobi.jp/Entry/118/

http://www.scratchbrain.net/blog/ver2/entries/001552.html

http://dwlog.net/2009/08/html5-in-dreamweaver.html

iPhoneのSafari対応について - プログラミングノート

http://d.hatena.ne.jp/ntaku/20090913/1252827348


関連エントリー

No.726
08/02 14:41

edit

html5