HTML5基本構造
- より明確に文書構造を示すことができる
- フォームの入力補助やチェック機能を属性で指定できる
- 動画や音声データをHTMLからシンプルに扱える
- APIの追加により、ウェブアプリケーションが構築しやすくなる
- HTML5で追加される予定の要素(タグ)
- HTML5で廃止される予定の要素(タグ)
HTML5の基礎組み立て
<!DOCTYPE html>
<html lang="ja">
<[[head]]>
<title>TAG Design</title>
<!-- 文字コード -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 検索キーワード -->
<meta name="keywords" content="keyword1,keyword2">
<!-- サイト説明文 -->
<meta name="description" content="This is test page !">
<!-- 作者情報 -->
<meta name="author" content="miyoshi">
<!-- 著作権情報 -->
<meta name="copyright" content="miyoshi">
<!-- css外部参照 -->
<link rel="stylesheet" type="text/css" href="../css/style.css">
<!-- google api - jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<[[header]]>
<h1>TAG Design</h1>
<h2>~ tag design ~</h2>
</header>
<div id="main">
<ul>
<li class="about">
<a href="#">>> About Us</a>
</li>
</ul>
</div>
<footer>
<li>
<a href="#">個人情報の取り扱いについて</a>
</li>
<li>
<a href="#">サイトマップ</a>
</li>
<p>
Copyright © 2012 TAG Design
</p>
</footer>
</div>
</body>
</html>
DOCTYPE 宣言(DOCTYPE スイッチ)
オンの状態 |
standards mode (標準準拠モード) |
仕様に準拠した厳格な表示モード |
オフの状態 |
quirks mode (後方 (過去) 互換モード) |
仕様に準拠していない古いブラウザとの互換 |
css3フォーマット
@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great);
body, header, nav, article, aside, footer, div, ul, li, h1, h2, p {
margin: 0;
padding: 0;
}
body {
text-align: center;
line-height: 1.5;
min-width: 800px;
background-color: #f5f5f1;
color: #666666;
font-family: 'Fredericka the Great', cursive;
font-size: 62.5%;
}
最終更新:2012年05月28日 19:37