セクションの見出しh1
この段落は<p>要素。直後に<h2>が続いているので、</p>は省略。
暗示的セクションの見出しh2
この段落も<p>要素。
親要素<section>に、この<p>以降コンテンツが無いので、</p>は省略。
テストケース
ルビ関連
「漢字にルビをつけてみた。」
<rt> <rp>の終了タグを省略。
セレクトメニュー関連
セレクトメニュー関連の<option> <optgroup>の終了タグを省略。
テーブル関連
テーブル関連の要素をテスト。<cplgroup>の開始・終了タグを省略。
<tr> <td> <th> <thead> <tfoot> <tbody> の終了タグを省略。
（<tbody> の開始タグは、このサンプルでは条件に合わず省略不可）
| エリア
| 店舗名
| 来店総数
| 新規来店
| リピート
|
| A
| 渋谷店
| 100
| 80
| 20
|
| 神宮前店
| 150
| 100
| 50
|
| 青山店
| 200
| 120
| 80
|
| B
| 三軒茶屋店
| 100
| 80
| 20
|
| 二子玉川店
| 150
| 100
| 50
|
| 合計
| 700
| 480
| 220
|
ソースはこうなっている
このサンプルページのHTMLソースです。
<html> <head> <body> <colgroup>は開始・終了タグ両方省略しています。
終了タグだけ省略した要素は開始タグをブルーにしています。
<!DOCTYPE html>
<meta charset="utf-8">
<title>（タイトル）</title>
<link rel="stylesheet" href="css/omittag.css">
<header>
<h1>ほんっとにはじめてのHTML5とCSS3<br>[ タグの省略 ]</h1>
<p>省略できるタグをすべて省いたサンプル
</header>
<nav>
<ul>
<li><a href="#">HOME</a>
<li><a href="#">MENU1</a>
<li><a href="#">MENU2</a>
<li><a href="#">MENU3</a>
<li><a href="#">SITE MAP</a>
<li><a href="#">ABOUT</a>
</ul>
</nav>
<article>
<section>
<h1>セクションの見出しh1</h1>
<p>本文
<h2>暗示的セクションの見出しh2</h2>
<p>本文
</section>
<section>
<h1>テストケース</h1>
<h2>ルビ関連</h2>
<p>「<ruby>漢字<rp>（<rt>かんじ<rp>）</ruby>にルビをつけてみた。」
<h2>セレクトメニュー関連</h2>
<p>本文<br>
<select>
<option value="">クリックして確認
<optgroup label="optgroup">
<option value="1">option
<option value="2">option
<option value="3">option
<optgroup label="optgroup">
<option value="4">option
<option value="5">option
<option value="6">option
</select>
<h2>テーブル関連</h2>
<p>本文
<table>
<col id="shop" span="2"><col id="count" span="3">
<thead>
<tr>
<th>エリア
<th>店舗名
<th>来店総数
<th>新規来店
<th>リピート
<tbody>
<tr>
<th rowspan="3">A
<td>渋谷店
<td>100
<td>80
<td>20
<tr>
<td>神宮前店
<td>150
<td>100
<td>50
<tr>
<td>青山店
<td>200
<td>120
<td>80
<tr>
<th rowspan="2">B
<td>三軒茶屋店
<td>100
<td>80
<td>20
<tr>
<td>二子玉川店
<td>150
<td>100
<td>50
<tfoot>
<tr>
<th colspan="2">合計
<td>700
<td>480
<td>220
</table>
</section>
<section>
<h1>ソースはこうなっている</h1>
<p>このサンプルページのHTML構造です。本文などは省略しています。
<pre><!--今読んでいるソースです--></pre>
</section>
<p><a href="css/omittag.css">このページのCSSソースを見る</a>
</article>
<aside>
<section>
<h1>カテゴリー</h1>
<ul>
<li><a href="#">カテゴリー1</a>
<li><a href="#">カテゴリー2</a>
<li><a href="#">カテゴリー3</a>
<li><a href="#">カテゴリー4</a>
<li><a href="#">カテゴリー5</a>
</ul>
</section>
<section>
<h1>アーカイブ</h1>
<ul>
<li><a href="#">アーカイブ1</a>
<li><a href="#">アーカイブ2</a>
<li><a href="#">アーカイブ3</a>
<li><a href="#">アーカイブ4</a>
<li><a href="#">アーカイブ5</a>
</ul>
</section>
</aside>
<footer>
Copyrightの文言
<address></address>
</footer>
このページのCSSソースを見る