HTMLタグのブロック要素を一覧にしました。ブロックとは周りに影響する領域を持つ要素です。わかりやすい仕様としては改行されます。
テキスト要素
<h1〜h6>
| Strict | ○ | Transitional | ○ |
|---|
見出しを表す要素。<h1>はページ内に1つが望ましい
<h1>タイトル見出し</h1> <h2>サブタイトル</h2> <h3>段落見出し</h3>
<p>
| Strict | ○ | Transitional | ○ |
|---|
段落。主に文章をマークする要素
<p>WEB制作に便利なテンプレートサイト。</p> <p>段落を分ける場合はこのように2つマークアップする。</p> <p>子要素には<span>インライン要素</span>しか含められない。</p>
<address>
| Strict | ○ | Transitional | ○ |
|---|
作者情報・連絡先を表す。数の規定は無い
<address> ©オレのWEBPAD 2011 <a href="mailto:sample@example.com">sakai</a> </address>
<center>
| Strict | × | Transitional | △ |
|---|
水平に対してセンタリングする
<center>WEB制作に便利なテンプレートサイト。</center>
<blockquote>
| Strict | ○ | Transitional | ○ |
|---|
長文を引用した場合、引用文である事を示す要素。
<blockquote> <p>WEB制作に便利なテンプレートサイト...</p> <p>このように段落を含める事も可能...</p> </blockquote>
<pre>
| Strict | ○ | Transitional | ○ |
|---|
半角スペースや改行をhtml記述通りに表示させる。ページ端で折り返しされない
<pre> このよ うにスペ ー スを空けると、その通 りに表示 さ れる。 改行も反映される。 </pre>
<noscript>
| Strict | ○ | Transitional | ○ |
|---|
スクリプトが利用できない場合の代替内容
<script type="text/javascript">
document.write("スクリプト内容");
</script>
<noscript>
<p>代替内容</p>
</noscript>
リスト作成
<ul>
| Strict | ○ | Transitional | ○ |
|---|
リスト表示させる要素。文頭にマークや画像を表示させる。入れ子も可能
<ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> </ul> <ul> <li>メニュー1</li> <li> <ul> <li>メニュー2.1</li> <li>メニュー2.2</li> </ul> </li> <li>メニュー3</li> </ul>
<ol>
| Strict | ○ | Transitional | ○ |
|---|
順序付きリスト表示させる要素
<ol> <li>琴吹 紬</li> <li>平沢 憂</li> <li>田井中 律</li> <li>秋山 澪</li> <li>ごきにゃん</li> </ol>
<dl>
| Strict | ○ | Transitional | ○ |
|---|
定義型リスト。タイトルと説明。複数含める事も可能
<dl> <dt>オレのWEBPAD</dt> <dd>WEB制作に便利なテンプレートサイト。</dd> <dt>オレのWEBPAD</dt> <dd>WEB制作に便利なテンプレートサイト。</dd> <dd>そんなサイトになると良いな。</dd> </dl>
<menu>
| Strict | × | Transitional | △ |
|---|
メニュー型のリスト。<ul>と同じ表示をされる。使用のお勧めはしません
<menu> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> </menu>
ブロックエリア
<div>
| Strict | ○ | Transitional | ○ |
|---|
汎用的に使える範囲の指定要素
<div id="wrapper">
<div id="main">
<h3 id="list_1">オレのWEBPAD</h3>
<p>WEB制作に便利なテンプレートサイト。</p>
</div>
<div id="sidebar">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
</div>
</div>
<hr>
| Strict | ○ | Transitional | ○ |
|---|
水平線を表示する
size=”太さ” width=”長さ” align=”水平位置” noshade（陰を消す）
<h3 id="list_1">オレのWEBPAD</h3> <hr> <p>WEB制作に便利なテンプレートサイト。</p>
表、フォーム
<table>
| Strict | ○ | Transitional | ○ |
|---|
表を作成する要素。大枠であり、中に<tr><th>を入れて表を生成
<table> <tr> <th>セル1</th> <th>セル2</th> </tr> </table>
<form>
| Strict | ○ | Transitional | ○ |
|---|
入力フォームの本体要素
<form method="post" action="webpat.cgi"> <p>名前：<input type="text" name="name"></p> <p>E-mail：<input type="text" name="email"></p> <p><input type="submit" value="送信する"></p> </form>
<fieldset>
| Strict | ○ | Transitional | ○ |
|---|
フォーム部品をグループ化する
<form method="post" action="webpad.cgi"> <fieldset> <legend>お客様</legend> <p>名前：<input type="text" name="name" size="30"></p> <p>年齢：<input type="text" name="nenrei" size="3"></p> </fieldset> <fieldset> <legend>ご連絡先</legend> <p>郵便番号：<input type="text" name="yuubin" size="8"></p> <p>ご住所：<input type="text" name="address" size="50"></p> </fieldset> <p><input type="submit" value="送信する"></p> </form>
HTML5で廃止されるタグ（非推奨）
<dir>
| Strict | × | Transitional | △ |
|---|
ディレクトリ型のリストを表示。<ul>と同じ表示。非推奨
<dir> <li>リスト要素1</li> <li>リスト要素2</li> <li>リスト要素3</li> </dir>
<isindex>
| Strict | × | Transitional | △ |
|---|
テキスト入力欄。入力欄を表示したい場合はinput要素を推薦。非推奨
<isindex>
<noframes>
| Strict | × | Transitional | ○ |
|---|
フレームの代替内容を表示。フレームを利用できない場合に表示される。非推奨
<noframes> <body> <p>そんなブラウザで大丈夫か？</p> </body> </noframes>
