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