基本構造
<!DOCTYPE html>
<html>
<head>
<meta charset="文字コード">
<title>Title</title>
</head>
<body>
</body>
</html>
| タグ | 説明 |
|---|---|
| <!DOCTYPE html> | DOCTYPE宣言: HTML5に準拠した内容という宣言 |
| <html></html> | ルート要素: <head>と<body>の2つのタグがこの順番で含まれる |
| <head></head> | メタデータ(ウィンドウには表示されないHTMLドキュメント自身の情報)を記述 |
| <meta charset="文字コード"> | 文字コードを指定(<head>タグの直下に記述) |
| <title></title> | HTMLドキュメントのタイトル(テキストのみ) |
| <body></body> | 本文 |
複数の要素をまとめるタグ
<body>
<header>
ヘッダーの内容
</header>
<nav>
複数の要素を記載
</nav>
<main>
複数の要素を記載
</main>
<div>
複数の要素を記載
</div>
<footer>
フッターの内容
</footer>
</body>
| タグ | 説明 |
|---|---|
| <header></header> | ヘッダー部分 |
| <nav></nav> | サイトの主要なページを往来できる様にナビゲーション(リンク)を記述 |
| <main></main> | 本文中の重要な要素をまとめるタグ 1つのHTMLファイル内で1回しか使用出来ない |
| <div></div> | 汎用ブロック 本文中の複数の要素をまとめる |
| <footer></footer> | フッター部分 |
見出し
<body>
<h1>最も重要度の高い見出し</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>最も重要度が低い見出し</h6>
</body>
| タグ | 説明 |
|---|---|
| <h1></h1> | 最も重要度が高い見出し |
| <h6></h6> | 最も重要度が低い見出し |
段落
<body>
<p>段落1の内容</p>
<p>段落2の内容</p>
</body>
| タグ | 説明 |
|---|---|
| <p></p> | 段落(paragraph)の内容を記述 (テキスト，テキストを修飾するタグ，リンクタグ，画像タグのみ記述可) |
箇条書き
非序列(番号なし)リスト
<body>
<ul>
<li>箇条書き項目</li>
<li>箇条書き項目</li>
</ul>
</body>
| タグ | 説明 |
|---|---|
| <ul></ul> | 非序列(番号なし)リスト |
| <li></li> | リスト項目 |
序列(番号付き)リスト
<body>
<ol>
<li>項目1</li>
<li>項目2</li>
</ol>
</body>
| タグ | 説明 |
|---|---|
| <ol></ol> | 序列(番号付き)リスト |
| <li></li> | リスト項目 |
テーブル
<body>
<table>
<tr><th>ヘッダー1</th><th>ヘッダー2</th></tr>
<tr><td>項目1</td><td>項目2</td></tr>
</table>
</body>
| タグ | 説明 |
|---|---|
| <table></table> | テーブル本体 |
| <tr></tr> | テーブルⅠ行 |
| <th></th> | ヘッダー |
| <td></td> | 項目 |
リンク
<body>
<a href="Path or URL">リンク</a>
<a href="Path or URL" target="_blank">別タブで開きたいリンク</a>
</body>
| タグ | 説明 |
|---|---|
| <a></a> | リンクを設定 targetに _blankを設定すると新しいタブでリンク先を表示 |
画像
<body>
<img src="画像のファイルパス" alt="代替テキスト">
</body>
| タグ | 説明 |
|---|---|
| <img> | 画像を挿入 |
テキスト修飾
| タグ | 意味 | 例 | 結果 |
|---|---|---|---|
| <br> | 強制改行 | サンプル<br>サンプル | サンプル サンプル |
| <strong></strong> | 重要 | <strong>サンプル</strong> | サンプル |
| <b></b> | 太字 | <b>サンプル</b> | サンプル |
| <sub></sub> | 下付き文字 | H<sub>2</sub>O | H2O |
| <sup></sup> | 上付き文字 | y = x<sup>2</sup> | y = x2 |
特殊文字
| 特殊文字 | 文字実態参照 |
|---|---|
| © | © |
| < | < |
| > | > |
| & | & |
| " | " |
| ¥ | ¥ |
| |
Reference
- スラスラわかるHTML＆CSSのきほん(狩野祐東著;SBクリエイティブ;2018年)