HTML5
small要素は細目のような注釈を表します。HTML4では小さなフォントを表していました。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> <footer> <small>© copyright 2012 J.Hashimoto</small> </footer> </body> 外観 関連エントリー HTML5エントリーのまとめ - プログラマー…</html>
strong要素は重要性を表します。HTML4では強調を表していました。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>大見出し</h1> <p>こんにちは！<strong>HTML5</strong></p> </body> 外観 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
figure要素は、図表や図画を表します。 figcaption要素は、figure要素のキャプションを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <p> <figure> <img src="Winter.jpg" /> <figcaption>冬の森</figcaption> </figure> </p> </body> 外観 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
dl要素は名前と値がセットになったリストを表します。dt要素は名前を表します。dd要素は値を表します。 HTML4では、dl要素は定義リストを表していました。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <dl> <dt>開発言語</dt> <dd>VB.NET</dd> <dd>C#</dd> <dt>開発環境</dt> <dd>Visual Studio 2003</dd> <dd>Visual Studio 20…</dd></dl></body></html>
hr要素は、段落の区切れをを表します。 HTML4では罫線を表す要素でした。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> <hr /> <p>HTML5を始めました。</p> </body> 外観 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
address要素は、サイト管理者や記事の著者の連絡先を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> <footer> <address>当サイトの連絡先: mail@example.jp</address> </footer> </body> 外観 連絡先が斜体で表示されてますね。 関連エントリー HTML5エントリーのまとめ - プログラ</html>…
footer要素は、ページやセクションのフッターを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> </head> <body> <article> <header> <h1>2012/07/01の記事</h1> </header> <p>こんにちは！HTML5</p> <footer> <p>投稿者: J.Hashimoto</p> </footer> </article> </body> </html> 外観 関連エントリー HTML5…
header要素はページやセクションのヘッダーを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> </head> <body> <article> <header> <h1>2012/07/01の記事</h1> </header> <p>こんにちは！HTML5</p> </article> </body> </html> 外観 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
hgroup要素は、見出しとそれに付随する小見出しをグルーピングします。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> </head> <body> <article> <header> <hgroup> <h1>2012/07/01の記事</h1> <h2>初めてのHTML5</h2> </hgroup> </header> <p>こんにちは！HTML5</p> </article> </body> </html> 外観 関連エントリー HTML…
aside要素はコンテンツには関連しているものの比較的関連の薄い部分を表します。例えば補足記事やブログのコメント欄が挙げられます。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> </head> <body> <article> <header> <h1>2012/07/01の記事</h1> </header> <p>こんにちは！HTML5</p> <aside> <h2>コメント</h2> <p>私もHTML5に興味があります。</p> </aside></article></body></html>
article要素は独立したコンテンツを表します。例えばブログの記事が挙げられます。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> </head> <body> <article> <h1>2012/07/01の記事</h1> <p>こんにちは！HTML5</p> </article> <article> <h1>2012/07/02の記事</h1> <p>こんばんは！HTML5</p> </article> </body> </html> 外観 …
nav要素はナビゲーションを構成するセクションを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> <style> li { float: left; width: 120px; } </style> </head> <body> <nav> <ul> <li><a href="/">Home</li> <li><a href="/products/">製品紹介</li> <li><a href="/infomation/">会社情報</li>…</ul></nav></body></html>
section要素はセクションを表します。この要素は章や節といった単位で使用します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <h1>大見出し</h1> <p>本文１</p> <section> <h2>中見出し１</h2> <p>本文１−１</p> <section> <h3>小見出し１</h3> <p>本文１−１−１</p> </section> <section> <h3>小見出し２</h3> <p>本文１−…</p></section></section></body></html>
ドキュメントの文字エンコーディングを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> </body> </html> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
プラグマ指示子を表します。プラグマ指示子の値はcontent属性で表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta http-equiv="refresh" content="10" /> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> </body> </html> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
name属性 メタデータの名前を表します。 content属性 メタデータの値を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta name="description" content="Webページの説明です。" /> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> </body> </html> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
ドキュメントのメタデータを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="hoge.css" type="text/css" /> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> </body> </html> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
HTML5でページを記述するのに役立つサイトを紹介します。 マークアップ検証 マークアップがHTML5の仕様に準拠しているかチェックしてくれます。 The W3C Markup Validation Service The W3C Markup Validation Service Validator.nu (X)HTML5 Validator Vali…
リソースのMIMEタイプを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="hoge.css" type="text/css" /> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> </body> </html> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
ドキュメントとリソースの関係を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="hoge.css" type="text/css" /> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> </body> </html> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
リソースを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="hoge.css" type="text/css" /> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> </body> </html> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
ドキュメントの基底URLを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <base href="http://localhost/hoge/"> <meta charset="UTF-8" /> </head> <body> <a href="bar.html">bar</a> </body> </html> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
ドキュメントのタイトルを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5/title> <meta charset="UTF-8" /> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> </body> </html> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
ドキュメントのメタデータを記述します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> </body> </html> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
そのドキュメントの言語を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> </body> </html> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
エントリーする度に随時更新します。 html要素 html要素 - プログラマーな日々ドキュメントのルートを表します ... 属性 html要素 lang属性 - プログラマーな日々そのドキュメントの言語を表します。 ... head要素 head要素 - プログラマーな日々ドキュメン…
ドキュメントのルートを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8" /> </head> <body> <h1>大見出し</h1> <p>こんにちは！HTML5</p> </body> </html> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々
