ワンポイントアドバイス！
細かい記述はタグチェッカーで調べてみましょう。
Gateway - Another HTML-lint 5
htmlの記述【body】
| 記述例 | 属性 | 意味 |
|---|---|---|
| <div id="main">∼</div> | id="" | id名を付ける 1ページ1つ |
| <section class="tag-html sample-body">∼</section> | class="" | class名を付ける 複数利用可 ※半角スペースで複数指定可 |
| <h1>∼</h1> <h2>∼</h2> <h3>∼</h3> <h4>∼</h4> <h5>∼</h5> <h6>∼</h6> | 見出しを付ける |
|---|---|
| <section>∼</section> | 一つのセクションであることを示す |
| <nav>∼</nav> | ナビゲーションであることを示す |
| <header>∼</header> | ヘッダであることを示す |
| <footer>∼</footer> | フッタであることを示す |
| <p>∼</p> | ひとつの段落（パラグラフ）であることを表す |
|---|---|
| <hr> | テーマや話題の区切りを表す |
| <ul> <li>∼</li> </ul> | 順序のないリストを表示する |
| <ol> <li>∼</li> </ol> | 順序のあるリストを表示する |
| <dl> <dt>∼</dt> <dd>∼</dd> </dl> | 定義・説明リストを表す |
| <div>∼</div> | ひとかたまりの範囲として定義する |
| <main>∼</main> | メインコンテンツであることを示す |
| <a>∼</a> | ハイパーリンクを指定する |
|---|---|
| <em>∼</em> | 強勢する（アクセントを付ける）箇所を表す |
| <strong>∼</strong> | 強い重要性を表す |
| <small>∼</small> | 免責・警告・著作権などの注釈や細目を表す |
| <i>∼</i> | 声や心の中で思ったことなど、他と区別したいテキストを表す |
| <b>∼</b> | 文書内のキーワードや製品名など、他と区別したいテキストを表す |
| <span>∼</span> | ひとつの範囲として定義する |
| <br> | 改行する |
| 記述例 | 属性 | 意味 |
|---|---|---|
| <a href="サイト内リンク">∼</a> | href="" | リンク先の設定 |
| <a href="外部リンク" target="_blank">∼</a> | target="_blank" | 外部リンクは「target="_blank"」を付けましょう。 |
| <img> | 画像を表示する |
|---|---|
| <iframe>∼</iframe> | インラインフレームを作る |
| 記述例 | 属性 | 意味 |
|---|---|---|
| <img src="images/sample_img001.jpg" alt="" width="400" height="300"> | src="" | 画像の設定 |
| alt="" | 代替えテキスト（必須） ※値は空でも可 |
|
| width="" | 画像の幅（推奨） | |
| height="" | 画像の高さ（推奨） |
| <table>∼</table> | テーブル（表）を作成する |
|---|---|
| <caption>∼</caption> | テーブル（表）にキャプションをつける |
| <tr>∼</tr> | テーブル（表）の横一行を定義する |
| <th>∼</th> | テーブル（表）の見出しセルを作成する |
| <td>∼</td> | テーブル（表）のデータセルを作成する |
| 記述例 | 属性 | 意味 |
|---|---|---|
| <td colspan="2">∼</td> | colspan="2" | セルの結合（横） |
| <td rowspan="2">∼</td> | rowspan="2" | セルの結合（縦） |
複雑なテーブルはソフト「Dreamweaver」等を使うと便利です。