HTML(HyperText Markup Language)はウェブページを作成するためのマークアップ言語です。
HTMLではタグ<タグ名>を使用して文書の構造を定義します。
タグは要素として知られ要素は開始タグと終了タグ</タグ名>で囲まれることが一般的です。
これらの要素はテキストや画像、リンク、フォームなど、ウェブページの構成要素を表します。
head
meta(メタデータ)やリンク、css(スタイルシート)、js(スクリプト)など、HTMLページの情報を含む部分。
<head>
</head>header
ウェブページのヘッダー部分を表します。通常、ロゴやタイトルが入ります。
<header>
<h1>ウェブサイトへようこそ</h1>
</header>nav
ウェブページの主要なコンテンツ部分を表します。
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#about">私たちについて</a></li>
</ul>
</nav>main
ページの中心的なコンテンツ部分を示すために使われます。
<main> タグはSEOの観点からも重要でページのコンテンツの主要部分であることを示し、検索エンジンがページの内容を理解するのを支援します。
<main>
<h2>メインコンテンツの見出し</h2>
<p>ここにページの主要なコンテンツが入ります。</p>
</main>section
ウェブページ内の個別のセクションを示します。
<section>
<h2>セクション1</h2>
<p>ここにセクション1のコンテンツが入ります。</p>
</section>h1～h6
見出しタグ。<h1>が最も重要で、<h6>が最も重要度が低い見出しです。
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>h1タグ : 見出し1
h2タグ : 見出し2
h3タグ : 見出し3
h4タグ : 見出し4
h5タグ : 見出し5
h6タグ : 見出し6
p
段落を表現するために使用されるタグです。
<p>これは最初の段落です。</p>
<p>これは2番目の段落です。</p>
<p>最後の段落です。</p>span
テキストの一部をグループ化したり、スタイルを適用するために使用されます。
<p>これは<span class="highlight">重要な</span>メッセージです。</p>a
ハイパーリンクを作成するために使用されるタグです。<a>タグのhref属性にリンク先のURLを指定することが一般的です。
<a href="#">リンクの例</a>img
画像を埋め込むために使用されるタグです。<img>タグは、src属性に画像ファイルのURLを指定することが一般的です。また、alt属性を使用して画像の代替テキストを指定することが推奨されています。これにより、画像が表示できない場合や、スクリーンリーダーを使用している場合にテキストが表示されます。
<img src="img.jpg" alt="サンプル画像" width="300" height="200">
ul・ol・li
<ul>順序なしリスト(箇条書きリスト)を作成するタグ。<li>タグと一緒に使われます。
<ol>順序付きリスト(番号付きリスト)を作成するタグ。<li>タグと一緒に使われます。
<li>リスト項目を示すタグ。<ul>や<ol>の中に配置されます。
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
<ol>
<li>ステップ1</li>
<li>ステップ2</li>
<li>ステップ3</li>
</ol>無序リスト（ul）
- アイテム1
- アイテム2
- アイテム3
順序リスト（ol）
- ステップ1
- ステップ2
- ステップ3
table・tr・th・td
<table>テーブルを作成するタグ。<tr> <th> <td> などのタグと一緒に使われます。
<tr> テーブルの行を示すタグ。<table> の中に配置されます。
<th> テーブルのヘッダーセルを示すタグ。<tr> の中に配置されます。
<td> テーブルのデータセルを示すタグ。<tr> の中に配置されます。
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
</tr>
</table>| 見出し1 | 見出し2 | 見出し3 |
|---|---|---|
| データ1-1 | データ1-2 | データ1-3 |
| データ2-1 | データ2-2 | データ2-3 |
| データ3-1 | データ3-2 | データ3-3 |
footer
フッターコンテンツ(著作権情報、連絡先情報など)を囲むセマンティックなタグ。
<footer>
<p>コピーライト © 20xx. すべての権利を保有.</p>
</footer>