ブロック要素の早見表|HTMLタグ

HTMLタグのブロック要素を一覧にしました。ブロックとは周りに影響する領域を持つ要素です。わかりやすい仕様としては改行されます。

HTMLタグのブロック要素に関するリスト

リスト作成

ブロックエリア

表、フォーム

HTML5で廃止されるタグ(非推奨)

テキスト要素

<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>
&copy;オレの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>