●HTMLのサンプル例→ > №00 > №01 > №02 > №03 > №04 > №05 > №06 > №07 > №00 > END

№６．汎用属性・汎用属性、Tag Element、HTML5・ページ作成の基本及び要素と属性

№６．汎用属性・汎用属性、Tag Element、HTML5・ページ作成の基本及び要素と属性

01id属性は、主にHTML文書内リンク先として使用されます。

id属性は、主にHTML文書内リンク先として使用されます。id属性は、ひとつのHTML文書内で複数の要素に使用することはできません。 また、大文字と小文字の区別がされますので、名前をつける際は注意が必要です。 スタイルシート、スクリプトで設定したスタイルを要素に反映させる手段として使用することもできます。

※id属性 

サンプルコード
HTML
<li id="sample_id">web上で表示される【id属性】をクリックするとこの場所へ
リンクします</li>
HTML
<li> <a href="./sample/#sample_id">【id属性】</a></li>
※★sample
★①011サンプル

▲Ｔｏｐ

02class属性は、主にスタイルシートで設定したスタイルを要素に反映させる手段。

class属性は、主にスタイルシートで設定したスタイルを要素に反映させる手段として使用します。 class属性は、id属性とは異なりひとつのHTML文書内で複数の要素に使用することができ、 複数まとめて設定することも可能です。また、大文字と小文字の区別がされますので、 名前をつける際は注意が必要です。

※class属性 

サンプルコード
CSS
.sample_class {
	width: 300px;
	height: 100px;
}
HTML
<div class="sample_class">横幅300px/高さ100px</div>
※★sample
★①021サンプル

▲Ｔｏｐ

03lang属性は、言語を示す要素です。

lang属性は、言語を示す要素です。日本語は「jp」、英語は「en」のように決まったコードを指定します。 XHTMLでは、lang属性の変わりにxml:lang属性を使用しますが、ブラウザの互換性を配慮し、 lang属性、xml:lang属性の両方を設定しておくとよいでしょう。

※★sample
★①031サンプル

▲Ｔｏｐ

04title属性は、入力した内容がポップアップ形式で表示されます。

title属性は、設定した要素上にカーソルを合わせると入力した内容がポップアップ形式で表示されます。 表示方法はブラウザに依存します。

※★sample
★①041サンプル

▲Ｔｏｐ

05style属性は、要素に対して適用させたいスタイルシートを直接設定します。

style属性は、要素に対して適用させたいスタイルシートを直接設定します。 *style属性は、XHTML1.1では非推奨です。

※★sample
★①051サンプル

▲Ｔｏｐ

06dir属性は、UNICODEで文字表記の方向が設定ない場合、文字表記の方向を設定

dir属性は、UNICODEで文字表記の方向が設定されていない場合、文字表記の方向を設定します。 *style属性は、XHTML Basicでは使用できません。

※★sample
★①061サンプル

▲Ｔｏｐ

07ブロックレベル要素

ブロックレベル要素

element description
div <div>～</div>

（終了タグあり）

01サンプルコード 
<div class="xxxx">
<h1>見出し</h1>
<p>段落</p>
</div>
★①0701サンプル
fieldset <fieldset>～</fieldset>

（終了タグあり）

02サンプルコード 
<form method="post" action="xxxx.php">
<fieldset>
<legend>情報</legend>
<p>name<input type="text" name="name" size="50" /></p>
<p>mail<input type="text" name="mail" size="50" /></p>
</fieldset>
<fieldset>
<legend>レビュー</legend>
<textarea rows="5" name="comment" cols="50"></textarea>
</fieldset>
<input type="submit" value="送信" />
</form>
★①0702サンプル
blockquote <blockquote>～</blockquote>

（終了タグあり）

03サンプルコード 
<blockquote>
<p>引用文</p>
</blockquote>
★①0703サンプル
form <form action="">～</form>

（終了タグあり）

04サンプルコード 
<form method="post" action="example.php">
<p>お名前<input type="text" name="name" /></p>
<p>メール<input type="text" name="email" /></p>
<p><input type="submit" value="送信" /></p>
</form>
★①0704サンプル
noscript <noscript>～</noscript>

（終了タグあり）

05サンプルコード 
<script type="text/javascript">
document.write("xxxx");
</script>
<noscript>
<p>代替内容</p>
</noscript>
★①0705サンプル
h1～h6 <h1>～</h1>
<h2>～</h2>
<h3>～</h3>
<h4>～</h4>
<h5>～</h5>
<h6>～</h6>

（終了タグあり）

06サンプルコード 
<h1>見出し重要度高</h1>
<h2>見出し重要度中</h2>
<h3>見出し重要度低</h3>
<h4>見出し重要度低</h4>
<h5>見出し重要度低</h5>
<h6>見出し重要度低</h6>
★①0706サンプル
address <address>～</address>

（終了タグあり）

07サンプルコード 
<address>
<p>xxxx</p>
<p><a href="mailto:xxxx@example.com">xxxx@example.com</a></p>
<p>updated：1/23/2009</p>
</address>
★①0707サンプル
p <p>～</p>

（終了タグあり）

08サンプルコード 
<p class="sample">段落</p>
★①0708サンプル
pre <pre>～</pre>

（終了タグあり）

09サンプルコード 
<pre>
整形済みテキスト
</pre>
★①0709サンプル
ul <ul>～</ul>

（終了タグあり）

10サンプルコード 
<ul>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ul>
★①0710サンプル
ol <ol>～</ol>

（終了タグあり）

11サンプルコード 
<ol>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ol>
★①0711サンプル
dl <dl>～</dl>

（終了タグあり）

12サンプルコード 
<dl>
<dt>定義する用語</dt>
<dd>用語の説明</dd>
<dt>定義する用語</dt>
<dd>用語の説明</dd>
</dl>
★①0712サンプル
table <table>～</table>

（終了タグあり）

13サンプルコード 
<table>
<thead>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
★①0713サンプル
hr <hr>

（終了タグなし）

14サンプルコード 
<hr class="sample" />
★①0714サンプル
noframes <noframes>～</noframes>

（終了タグあり）

15サンプルコード 
<frameset cols="200,*">
<frame src="./navi.html" />
<frame src="./content1.html" />
<noframes>
<body>
<a href="./index.html">root</a>
<a href="./contents1.html">content1</a>
<a href="./contents2.html">content2</a>
</body>
</noframes>
</frameset>
★①0715サンプル
※★sample
★①0700サンプル

▲Ｔｏｐ

08インライン要素

インライン要素

element description
span <span></span>

（終了タグあり）

01サンプルコード 
<p><span class="sample">サンプル</span></p>
★①0801サンプル
em <em></em>

（終了タグあり）

02サンプルコード 
<p><em>テキスト強調</em></p>
★①0802サンプル
strong <strong></strong>

（終了タグあり）

03サンプルコード 
<p><strong>テキスト強調（強）</strong></p>
★①0803サンプル
abbr <abbr></abbr>

（終了タグあり）

04サンプルコード 
<p><abbr>略語を表示します
</abbr></p>
title属性を使用すると、省略前の言葉を表示します。
<p><abbr title="hyper text markup language">
html</abbr></p>
★①0804サンプル
acronym <acronym></acronym>

（終了タグあり）

05サンプルコード 
title属性を使用すると、省略前の言葉を表示します。
<p><acronym title="national aeronautics and space administration
">nasa</acronym></p>
★①0805サンプル
dfn <dfn></dfn>

（終了タグあり）

06サンプルコード 
<p><dfn>dfn</dfn>は定義のための要素です。</p>
★①0806サンプル
q <q></q>

（終了タグあり）

07サンプルコード 
<p><q>短い文章の引用</q>に使用します。</p>
長い文章にはblockquoteを使用します。
★①0807サンプル
cite <cite></cite>

（終了タグあり）

08サンプルコード 
<p>以下<cite>web design lab</cite>参照。</p>
<p>参照文</p>
<p>参照文</p>
★①0808サンプル
sup <sup></sup>

（終了タグあり）

09サンプルコード 
<p>1m<sup>2</sup></p>
★①0809サンプル
sub <sub></sub>

（終了タグあり）

10サンプルコード 
<p>h<sub>2</sub>0</p>
★①0810サンプル
code <code></code>

（終了タグあり）

11サンプルコード 
<pre><code>
	<html>
	<body>
 
	</body>
	</html>
</code></pre>
★①0811サンプル
var <var></var>

（終了タグあり）

12サンプルコード 
<p><var>i</var>に代入。</p>
★①0812サンプル
kbd <kbd></kbd>

（終了タグあり）

13サンプルコード 
<p><kbd>guest</kbd>と入力してログインしてください。</p>
★①0813サンプル
samp <samp></samp>

（終了タグあり）

14サンプルコード 
<p>3回入力を間違うと
<samp>invalid</samp>というエラーメッセージが表示されます。</p>
★①0814サンプル
bdo <bdo dir=""></bdo>

（終了タグあり）

15サンプルコード 
<p><bdo dir="rtl">右から左へ</bdo></p>
<p><bdo dir="ltr">左から右へ</bdo></p>
★①0815サンプル
big <big></big>

（終了タグあり）

16サンプルコード 
<p><big>ひとまわり大きい文字で表示</big></p>
★①0816サンプル
small <small></small>

（終了タグあり）

17サンプルコード 
<p><small>ひとまわり小さい文字で表示</small></p>
★①0817サンプル
b <b></b>

（終了タグあり）

18サンプルコード 
<p><b>太字で表示</b></p>
★①0818サンプル
i <i></i>

（終了タグあり）

19サンプルコード 
<p><i>イタリック体で表示</i></p>
★①0819サンプル
tt <tt></tt>

（終了タグあり）

20サンプルコード 
<p><tt>等幅フォントで表示</tt></p>
★①0820サンプル
a <a></a>

（終了タグあり）

21サンプルコード 
<p><a href="index.html">リンク</a></p>
★①0821サンプル
label <label></label>

（終了タグあり）

22サンプルコード 
<div>
<label for="name">name</label>
<input type="text" name="name" id="name" />
</div>
 
<div><label>name<input type="text" name="name" /></label></div>
★①0822サンプル
object <object></object>

（終了タグあり）

23サンプルコード 
<object data="./sample.jpg"
 type="image/jpeg" width="100" height="100">
代替コンテント
</object>
★①0823サンプル
iframe <iframe></iframe>

（終了タグあり）

24サンプルコード 
<div>
<iframe src="./sample.html">
代替コンテント
</iframe>
</div>
★①0824サンプル
button <button></button>

（終了タグあり）

25サンプルコード 
<p><button type="button">内容</button></p>
★①0825サンプル
textarea <textarea cols="" rows=""></textarea>

（終了タグあり）

26サンプルコード 
<div>
<textarea name="example" cols="20" rows="5">
ここに入力すると初期値として表示されます
</textarea>
</div>
★①0826サンプル
select <select></select>

（終了タグあり）

27サンプルコード 
<select name="example">
<option value="選択a">選択a</option>
<option value="選択b">選択b</option>
</select>
★①0827サンプル
img <img src="" alt="">

（終了タグなし）

28サンプルコード 
<p><img src="example.jpg"
 width="100" height="25" alt="example" /></p>
★①0828サンプル
br <br>

（終了タグなし）

29サンプルコード 
<p>
改行<br>
改行
</p>
★①0829サンプル
input <input>

（終了タグなし）

30サンプルコード 
<p><input type="text" name="text" value="テキスト入力" /></p>
<p><input type="password" name="password" value="パスワード入力" />
</p>
<p><input type="radio" name="radio" value="ラジオボタン" /></p>
<p><input type="checkbox" name="checkbox" value="チェックボックス" />
</p>
<p><input type="file" name="file" value="ファイル選択" /></p>
<p><input type="hidden" name="hidden" value="隠しデータ" /></p>
<p><input type="submit" value="送信" /></p>
<p><input type="reset" value="リセット" /></p>
<p><input type="image" src="./button.gif" alt="送信" /></p>
<p><input type="button" value="ボタン" /></p>
★①0830サンプル
script <script type=""></script>

（終了タグあり）

31サンプルコード 
<script type="text/javascript">
document.write("");
</script>
 
<script type="text/javascript" src="example.js"></script>
★①0831サンプル
map <map name=""></map>

（終了タグあり）

32サンプルコード 
<p><img src="./map.gif" alt="サンプル" usemap="#sample" /></p>
<map name="sample">
<area shape="rect" coords="10,20,30,40" href="./map1.html"
 alt="リンク1" />
<area shape="circle" coords="100,50,10" href="./map2.html"
 alt="リンク2" />
<area shape="poly" coords="100,50,10,150,70,110,30,120" 
href="./map3.html" alt="リンク3" />
</map>
★①0832サンプル
※★sample
★①0800サンプル

▲Ｔｏｐ

09その他要素

その他要素

element description
html <html></html>

（終了タグあり）

01サンプルコード 
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" 
"http://www.w3.org/tr/html4/loose.dtd">
<html lang="ja">
<head>
 
<title>タイトル</title>
 
</head>
<body>
 
<p>本体</p>
 
</body>
</html>
★①0901サンプル
head <head></head>

（終了タグあり）

02サンプルコード 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>タイトル</title>
<link rel="stylesheet" type="text/css" href="./example.css" />
<script type="text/javascript" src="./example.js"></script>
</head>
★①0902サンプル
body <body></body>

（終了タグあり）

03サンプルコード 
<body>
 
<p>本体</p>
 
</body>
★①0903サンプル
frameset <frameset></frameset>

（終了タグあり）

04サンプルコード 
<html>
<head>
 
<title>タイトル</title>
 
</head>
<frameset rows="100,*,100">
 
<frame src="./example1.html" />
 
<frameset cols="100,*">
 
<frame src="./example2.html" />
<frame src="./example3.html" />
 
</frameset>
 
<frame src="./example4.html" />
 
<noframes>
<body>
<p>フレームの代替内容</p>
</body>
</noframes>
 
</frameset>
</html>
★①0904サンプル
title <title></title>

（終了タグあり）

05サンプルコード 
<head>
 
<title>タイトル</title>
 
</head>
★①0905サンプル
meta <meta content="" />

（終了タグなし）

06サンプルコード 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>タイトル</title>
</head>
★①0906サンプル
base <base href="" />

（終了タグなし）

07サンプルコード 
<head>
 
<base href="http://shin-sapporo.com/index.html" />
 
</head>
★①0907サンプル
link <link />

（終了タグなし）

08サンプルコード 
<head>
 
<link rel="contents" href="index.html" />
 
</head>
★①0908サンプル
style <style type=""></style>

（終了タグあり）

09サンプルコード 
<head>
<style type="text/css">
h1 {
	color: #000000;
}
p {
	color: #000000;
	font-size: 1.5em;
}
</style>
</head>
★①0909サンプル
li <li></li>

（終了タグあり）

10サンプルコード 
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>
★①0910サンプル
dt <dt></dt>

（終了タグあり）

11サンプルコード 
<dl>
<dt>定義</dt>
<dd>説明</dd>
</dl>
★①0911サンプル
dd <dd></dd>

（終了タグあり）

12サンプルコード 
<dl>
<dt>定義</dt>
<dd>説明</dd>
</dl>
★①0912サンプル
area <area alt="">

（終了タグなし）

13サンプルコード 
<p><img src="./map.gif" alt="サンプル" usemap="#sample" /></p>
<map name="sample">
<area shape="rect" coords="10,20,30,40" href="./map1.html"
 alt="リンク1" />
<area shape="circle" coords="100,50,10" href="./map2.html"
 alt="リンク2" />
<area shape="poly" coords="100,50,10,150,70,110,30,120" href="
./map3.html"
 alt="リンク3" />
</map>
★①0913サンプル
param <param name="" />

（終了タグなし）

14サンプルコード 
<div>
<object classid="" codebase="" type=
"application/x-shockwave-flash" width="900" height="500">
<param name="movie" value="./example.swf" />
<param name="loop" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
</object>
</div>
★①0914サンプル
caption <caption></caption>

（終了タグあり）

15サンプルコード 
<table>
<caption>テーブルタイトル</caption>
	<thead>
	<tr>
		<th>見出し</th>
		<th>見出し</th>
	</tr>
	</thead>
 
	<tfoot>
	<tr>
		<td>フッタ</td>
		<td>フッタ</td>
	</tr>
	</tfoot>
 
	<tbody>
	<tr>
		<td>データ</td>
		<td>データ</td>
	</tr>
	</tbody>
</table>
★①0915サンプル
thead <thead></thead>

（終了タグあり）

16サンプルコード 
<table>
<caption>テーブルタイトル</caption>
	<thead>
	<tr>
		<th>見出し</th>
		<th>見出し</th>
	</tr>
	</thead>
 
	<tfoot>
	<tr>
		<td>フッタ</td>
		<td>フッタ</td>
	</tr>
	</tfoot>
 
	<tbody>
	<tr>
		<td>データ</td>
		<td>データ</td>
	</tr>
	</tbody>
</table>
★①0916サンプル
tfoot <tfoot></tfoot>

（終了タグあり）

17サンプルコード 
<table>
<caption>テーブルタイトル</caption>
	<thead>
	<tr>
		<th>見出し</th>
		<th>見出し</th>
	</tr>
	</thead>
 
	<tfoot>
	<tr>
		<td>フッタ</td>
		<td>フッタ</td>
	</tr>
	</tfoot>
 
	<tbody>
	<tr>
		<td>データ</td>
		<td>データ</td>
	</tr>
	</tbody>
</table>
★①0917サンプル
tbody <tbody></tbody>

（終了タグあり）

18サンプルコード 
<table>
<caption>テーブルタイトル</caption>
	<thead>
	<tr>
		<th>見出し</th>
		<th>見出し</th>
	</tr>
	</thead>
 
	<tfoot>
	<tr>
		<td>フッタ</td>
		<td>フッタ</td>
	</tr>
	</tfoot>
 
	<tbody>
	<tr>
		<td>データ</td>
		<td>データ</td>
	</tr>
	</tbody>
</table>
★①0918サンプル
colgroup <colgroup></colgroup>

（終了タグあり）

19サンプルコード 
<table>
<colgroup span="2"></colgroup>
<colgroup>
	<col span="2" />
</colgroup>
	<tbody>
	<tr>
		<td>データ</td>
		<td>データ</td>
	</tr>
	</tbody>
</table>
★①0919サンプル
col <col />

（終了タグなし）

20サンプルコード 
<table>
	<col span="2" />
	<tbody>
	<tr>
		<td>データ</td>
		<td>データ</td>
	</tr>
	</tbody>
</table>
★①0920サンプル
tr <tr></tr>

（終了タグあり）

21サンプルコード 
<table>
	<tbody>
	<tr>
		<td>データ</td>
		<td>データ</td>
	</tr>
	</tbody>
</table>
★①0921サンプル
th <th></th>

（終了タグあり）

22サンプルコード 
<table>
	<thead>
	<tr>
		<th>見出し</th>
		<th>見出し</th>
	</tr>
	</thead>
 
	<tbody>
	<tr>
		<td>データ</td>
		<td>データ</td>
	</tr>
	</tbody>
</table>
★①0922サンプル
td <td></td>

（終了タグあり）

23サンプルコード 
<table>
	<thead>
	<tr>
		<th>見出し</th>
		<th>見出し</th>
	</tr>
	</thead>
 
	<tbody>
	<tr>
		<td>データ</td>
		<td>データ</td>
	</tr>
	</tbody>
</table>
★①0923サンプル
frame <frame />

（終了タグなし）

24サンプルコード 
<frameset cols="100,*">
<frame src="./example1.html" />
<frame src="./example2.html" />
<noframes>
<body>
<p>フレームの代替内容</p>
</body>
</noframes>
 
</frameset>
★①0924サンプル
option <option></option>

（終了タグあり）

25サンプルコード 
<select name="sample">
	<option value="a">a</option>
	<option value="b">b</option>
</select>
★①0925サンプル
optgroup <optgroup label=""></optgroup>

（終了タグあり）

26サンプルコード 
<select name="sample">
	<optgroup label="a">
		<option value="a1" label="a1">a1</option>
		<option value="a2" label="a2">a2</option>
	</optgroup>
	<optgroup label="b">
		<option value="b1" label="b1">b1</option>
		<option value="b2" label="b2">b2</option>
	</optgroup>
</select>
★①0926サンプル
legend <legend></legend>

（終了タグあり）

27サンプルコード 
<form method="post" action="xxxx.php">
<fieldset>
	<legend>情報</legend>
	<p>name<input type="text" name="name" size="50" /></p>
	<p>mail<input type="text" name="mail" size="50" /></p>
</fieldset>
<fieldset>
	<legend>レビュー</legend>
	<textarea rows="5" name="comment" cols="50"></textarea>
</fieldset>
<input type="submit" value="送信" />
</form>
★①0927サンプル
del <del></del>

（終了タグあり）

28サンプルコード 
<del>
<p>削除済みテキスト</p>
</del>
 
<p><del>削除済みテキスト</del></p>
★①0928サンプル
ins <ins></ins>

（終了タグあり）

29サンプルコード 
<ins>
<p>追加テキスト</p>
</ins>
 
<p><ins>追加テキスト</ins></p>
★①0929サンプル
※★sample
★①0900サンプル

▲Ｔｏｐ

10HTML5でページを作るときの基本

HTML5でページを作るときの基本
●《DOCTYPE宣言文》
<!DOCTYPE html> DOCTYPE宣言文は従来のに比べてかなり短くなりました。
●《言語コードの指定》
<html lang="ja"> 言語コードの指定は日本語なら「ja」です。
●《文字コードの宣言》
<meta charset="utf-8">
文字コードの宣言も短くなりました。「utf-8」推奨です。
●《スタイルシートの指定》
<link rel="stylesheet" href="sample.css">
「type="text/css"」は省略して短くできます。
●《スクリプトの指定》
<script src="sample.js"></script>
こちらも「type="text/javascript"」を省略できるので短くなります。
IE8以下はHTML5に対応していませんが「Google Code」で公開されている
「html5shiv」スクリプトを利用すればIE8以下でもHTML5のページを表示することが可能になります。
●《head内に以下の内容を記述します。》
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
*JavaScriptをオフにしている環境では適用されませんのでIE8以下では表示が崩れるおそれがあります。
●《HTML5の新要素でブロックボックスとしてレンダリングさせる要素に対して「display: block」を指定します。》
article,aside,canvas,details,figcaption,figure,
header,footer,hgroup,menu,nav,section,summary {
display: block
}

※★sample
★①101サンプル

▲Ｔｏｐ

11【HTML5】レイアウトサンプル

【HTML5】レイアウトサンプルです <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5 - WEB DESIGN LAB</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="sample.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>ヘッダー</header>
<p>コンテント</p>
<footer>フッター</footer>
</body>
</html>
まとめると上記のようになります。

※★sample
★①111サンプル

▲Ｔｏｐ

12HTML5では次の要素が新しく追加されました。

HTML5では次の要素が新しく追加されました。
《新しい要素》
★section 一般的なセクションを表します。見出し（h1、h2、h3、h4、h5、h6） を用いて文書構造を表すことができます。
★article ブログのエントリや記事など、その範囲だけでも1つのコンテンツとして完結するような部分で使用します。 見出し（h1、h2、h3、h4、h5、h6）を用いて文書構造を表すことができます。
★aside ページの内容とあまり関係のない補足情報等を表します。関連広告やリンク等に利用します。
★hgroup 複数の見出し要素をグループ化します。h1、h2、h3、h4、h5、h6のみをグループ化することができます。
★header セクションごとにヘッダを使用することができ、そのページ内で何回でも利用できます。
★footer セクションごとにフッタを使用することができ、そのページ内で何回でも利用できます。 フッタには作者に関する情報や著作権情報などを含められます。
★nav グローバルナビゲーション、ページ内リンク、パンくずリスト等で使用します。
★figure 本文から単独で参照される内容を表します。
★figcaption 参照される内容に対してキャプションを付けます。
★audio オーディオデータ再生用の要素です。スクリプトを利用し独自のユーザーインターフェース を作成するためのAPIが提供されます。ユーザーエージェントが自動的にインターフェースを 追加するような仕組みも導入されます。source要素を用いることで異なるメディアデータを選択させることもできます。
★video ビデオデータ再生用の要素です。スクリプトを利用し独自のユーザーインターフェースを 作成するためのAPIが提供されます。ユーザーエージェントが自動的にインターフェースを 追加するような仕組みも導入されます。source要素を用いることで異なるメディアデータを 選択させることもできます。
★embed Flash等のプラグインを利用するコンテンツで使用します。
★mark 印し付けのための要素です。参照しやすいようテキストを目立たせます。
★progress ダウンロードや負荷の高い処理を実行する際に利用します。実行中のタスクを表します。
★meter 特定の範囲内の数量や割合を表します。ディスク容量などの測定値を表す際に利用します。
★time 日付や時刻などの時間情報を表します。
★ruby ルビ（ふりがな）を付けたいテキストに使用します。
★rt ruby内のルビを付けたいテキストに対して使用します。
★rp ルビ表示に対応していないブラウザではルビテキストの前後に括弧を付ける。 ルビに対応しているブラウザでは（）は表示されない。
★bdi 双方向のテキストが周辺の文字の影響を受けないようにします。
★wbr 単語の改行位置の候補を指定します。
★canvas グラフやゲーム等、動的に実行されるビットマップグラフィックスで使用します。
★command ユーザーが実行するコマンドを表します。
★details オンデマンド（ユーザーのリクエストの実行）で提供される追加情報等を表します。 summary要素で要約等を提供します。
★datalist input要素とlist属性を組み合わせてコンボボックスを作成することができます。
★keygen 暗号化用のキーのペアを生成します。
★output スクリプトによる計算結果等の出力結果を表します。
★inputのtype属性は新しく次の値をサポートします。
tel
search
url
email
datetime
date
month
week
time
datetime-local
number
range
color
これらの属性値でサーバーにデータを送信することができるように定義されました。

※★sample
★①121サンプル

▲Ｔｏｐ

13新しい属性

HTML5ではHTML4.01で定義されていた要素に新しい属性を導入しました。

要素 属性 解説
a media
target 		target属性はhtml5では非推奨ではなくなりました
area media
hreflang
rel
target 		target属性はhtml5では非推奨ではなくなりました
base target -
li value value属性はhtml5では非推奨ではなくなりました
ol reversed
start 		start属性はhtml5では非推奨ではなくなりました
meta charset -
input autofocus
placeholder
form
required
autocomplete
min
max
multiple
pattern
step
dirname
formaction
formenctype
formmethod
formnovalidate
formtarget 		autofocus属性はtype属性にhiddenが指定されたinput要素には指定できません
placeholder属性
form属性
required属性はtype属性にhidden、image、submit等のボタンタイプが指定されたinput要素には指定できません
formaction属性
formenctype属性
formmethod属性
formnovalidate属性
formtarget属性
これらの属性が記述されている場合、form要素のaction属性、enctype属性、method属性、novalidate属性、target属性は上書きされます
select autofocus
form 		autofocus属性はtype属性にhiddenが指定されたinput要素には指定できません
textarea autofocus
placeholder
form
required
dirname 		autofocus属性はtype属性にhiddenが指定されたinput要素には指定できません
placeholder属性
form属性
required属性
これらはtype属性にhidden、image、submit等のボタンタイプが指定されたinput要素には指定できません
button autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget 		autofocus属性はtype属性にhiddenが指定されたinput要素には指定できません
formaction属性
formenctype属性
formmethod属性
formnovalidate属性
formtarget属性
これらの属性が記述されている場合、form要素のaction属性、enctype属性、method属性、novalidate属性、target属性は上書きされます
output form -
fieldset form
disabled 		-
datalist list -
form novalidate -
menu type
label 		label属性はグローバル属性contextmenuと併用することで、コンテキストメニューの提供も行うことができるようになりました
style scoped このようなstyle要素によるスタイル指定は、ローカルツリーにのみ適用されます
script async -
html manifest -
link sizes -
iframe seamless
sandbox 		-
html4.01で定義されていたいくつかの属性（class属性、dir属性、id属性、lang属性、style属性、tabindex属性、title属性）は、すべての要素に適用できるようになりました。これらはグローバル属性となります。 新しいグローバル属性も導入されました。 contenteditable属性 contextmenu属性 data-*属性 draggable属性 dropzone属性 hidden属性 role属性 aria-*属性 spellcheck属性 html5ではhtml4.01で定義されていたonevent-name等のイベントハンドラ属性すべてがグローバル属性に変更されました。新たにvideoやaudioといったメディア要素で利用されるplayイベントハンドラ属性も設定されました。
※★sample
★①131サンプル

▲Ｔｏｐ

14変更予定の要素

次の要素はHTML5から意味が変更されています。

要素 変更前 変更後
a リンクの設定 href属性のないa要素はプレースホルダを表すようになりました。内容にブロックレベル要素も含むことができるようになりました。
address 連絡先の表示 管理者の連絡先を表示します。管理者以外の連絡先には使用できない。また連絡先以外の内容（著作権等）も含めることができない。
b テキストを太字にする 文章の中の重要度を示すのではなく、スタイル上の表現が異なる部分を表すために使用します。
cite 引用元の表示 タイトルを表示します。それ以外の情報は含めない。
hr 水平線を表示 段落の区切りに使用する。セクション間の区切りには使用しない。
i イタリック体で表示 文章内で異なった声やムード、心の声等を表現する際に使用します。
label フォームの部品とラベルを関連付ける 関連付けられたフォームにブラウザはフォーカスを移しません。ただし、プラットフォーム側でラベルとフォームのフォーカスが関連付けられている場合はこの限りではありません。
menu メニュー型のリストを作成する ツールバーやコンテキストメニューを表します。
s 取り消し線を引く 正しくなくなった、または関係がなくなったというような内容を表すときに使用します。間違っていたので訂正しますというときは「del」を使用します。
small 小さ目の文字サイズで表示 脚注や法的条項などの細字部分（免責事項や著作権表示等）を表します。インラインで使用します。
strong より強い強調を表す 文章の一部を部分的に強調するものではなく、文章の重要度を示すものとなりました。
head 文章のヘッダ 子要素としてobjectを含むことができなくなりました。
※★sample
★①141サンプル

▲Ｔｏｐ

15変更予定の属性

変更予定の属性

要素 属性 解説
script type script要素のtype属性はスクリプト言語がecmascriptの場合指定が必須ではなくなりました。
style type style要素のtype属性はスタイル言語がcssの場合指定が必須ではなくなりました。

次の属性は使うことはできますが代替手段を利用することを強く求められています。

要素 属性 解説
img border border属性を記述する場合は値に"0"を指定する必要があります。この属性を使用することはできますが、代わりにcssを使うことを推奨されています。
script language language属性を書く場合は値に"javascript"を指定する必要があります。また、type属性と矛盾がないようにする必要もあります。
a name a要素のname属性は使用できますがid属性を使用することが推奨されています。
table summary table要素のsummary属性も使用できますがhtml5では他の代替手段を提供しています。
※★sample
★①151サンプル

▲Ｔｏｐ

16廃止予定の要素

次の要素はHTML5では存在しません。これらの機能はCSSを利用します。
basefont
big
center
font
strike
tt
u

ユーザビリティやアクセシビリティに影響するため次の要素もHTML5に存在しません。
frame
frameset
noframes
次の要素もHTML5に存在しません。他の要素でも処理できることから含まれていません。
acronym要素はabbr要素を使用してください。
applet要素はobject要素またはembed要素を使用してください。
isindex要素はフォームコントロールの代用により置き換えられます。
dir要素にはul要素を使用してください。
noscript要素はHTML構文でのみ適合するようになりました。

※★sample
★①161サンプル

▲Ｔｏｐ

17廃止予定の属性

要素 廃止予定の属性
a rev charset shape coords
area nohref
body alink link text vlink background bgcolor border cellpadding cellspacing
br clear
caption align
col align char charoff valign width
colgroup align char charoff valign width
div align
dl compact
h1 h2 h3 h4 h5 h6 align
head profile
hr align noshade size width
html version
iframe longdesc align frameborder marginheight marginwidth scrolling
img longdesc name（代わりにid属性を使用する） align hspace vspace
input align
legend align
li type
link rev charset target
menu compact
meta scheme
object archive classid codebase codetype declare standby align border hspace vspace
ol compact type
p align
param valuetype type
pre width
table align bgcolor border cellpadding cellspacing frame rules width
tbody align char charoff valign
tfoot align char charoff valign
td axis abbr scope align bgcolor border cellpadding cellspacing char charoff height nowrap valign width
th axis abbr align bgcolor border cellpadding cellspacing char charoff height nowrap valign width
thead align char charoff valign
tr align bgcolor border cellpadding cellspacing char charoff valign
ul compact type
※★sample
★①171サンプル

▲Ｔｏｐ

18XXXXX

18XXXXX

※★sample
★①000サンプル

▲Ｔｏｐ