この記事では、よく使用されるHTMLタグを紹介します。
それぞれの用途に応じたタグがありますので、使い方を間違えないように確認しておきましょう。
よく使うタグ一覧
hタグ（h1 ～ h6）
見出しのhタグは、文章の見出しを表します。
<h1>が最も重要な見出しで、<h6>が最も重要度の低い見出しです。
<h1>これはh1見出しです</h1>
<h2>これはh2見出しです</h2>
<h3>これはh3見出しです</h3>
<h4>これはh4見出しです</h4>
<h5>これはh5見出しです</h5>
<h6>これはh6見出しです</h6>pタグ
pタグは、文章の段落を表します。
<p>これは段落です。このタグを使うことで、文章を段落ごとに区切ることができます。</p>brタグ
brタグは、文章の改行を表します。
<p>これは改行です。<br>このタグを使うことで、文章を改行することができます。</p>ul, ol, liタグ
ul, ol, liタグは、箇条書きや番号付きリストを作成するために使用します。
<ul>は「unorderd list」の略で、順番のない箇条書きのリストで使用します。
<ol>は「orderd list」の略で、番号付きリストで使用します。
<li>はリスト項目を表します。
<ul>や<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>
<li>リスト項目1</li>
<li>リスト項目2
<ul>
<li>リスト項目2-1</li>
<li>リスト項目2-2</li>
<li>リスト項目2-3</li>
</ul>
</li>
<li>リスト項目3
<ol>
<li>リスト項目3-1</li>
<li>リスト項目3-2</li>
<li>リスト項目3-3</li>
</ol>
</li>
</ul>divタグ
「division」の略であるdivタグは、要素をグループ化する際に使用します。
<div>
<p>テキスト</p>
</div>
<div>
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ul>
</div>aタグ
aタグは「anchor」の略で、他のページやリソースへのリンクを作成します。
href属性でリンク先を指定します。
リンク先へ遷移する際に、新しいタブを開いて遷移させたい場合は、target属性に_blankという値を設定します。
<a href="<https://www.example.com>">これはリンクです</a>
<!-- 新しいタブで遷移 -->
<a href="<https://www.example.com>" target="_blank">これは別タブで開くリンクです</a>imgタグ
imgタグは「image」の略で、ウェブページに画像を埋め込むために使用します。
src属性で画像ファイルのパスを指定し、alt属性で代替テキストを指定します。
<img src="image.jpg" alt="説明文">table, tr, th, tdタグ
これらのタグは表組を作成する際に使用します。
tableタグは、表を作成するために親要素として使用します。
<tr>は「table row」の略で、rowとは「行」を表すため、表組みの行をこのタグで囲む必要があります。
<th>は「table header」の略で、セルの内容を見出しとすることができます。
<td>は「table data」の略で、ひとつのセルを表します。
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>headerタグ
headerタグの主な使用用途は、サイトのヘッダーを定義する際に使用されます。
<header>
<h1>サイトタイトル</h1>
<nav>
<ul>
<li>HOME</li>
<li>企業情報</li>
<li>採用情報</li>
</ul>
</nav>
</header>footerタグ
footerタグの主な使用用途は、サイトのフッターを定義する際に使用されます。
コピーライトなどの著作に関する内容などが入ります。
<footer>Copyright 2024 かくざきweb</footer>article
articleタグは独立したコンテンツを表示する際に使用します。
例えばブログやニュースの記事などをひとつずつ囲む際に使用します。
また、articleタグの中には見出しの要素が必要になります。
<article>
<h1>ブログタイトル</h1>
<p>この記事では、HTMLについて解説します。</p>
</article>sectionタグ
sectionタグはページ内でコンテンツを区切る際に使用します。
一つのページの中に、店舗情報や、カフェのメニュー、採用の情報などを表示する場合、それぞれのコンテンツをsectionタグで囲むことになります。
また、基本的にはsectionタグの中に見出しタグを含める必要があります。
<section>
<h2>店舗情報</h2>
</section>
<section>
<h2>メニュー</h2>
</section>
<section>
<h2>採用情報</h2>
</section>form, input, textarea, buttonタグ
フォームタグは、ユーザーからの入力を受け取るために使用します。
<form>はフォーム全体を、<input>は入力フィールドを、<textarea>は複数行のテキスト入力を、<button>はボタンを表します。
<form action="/submit" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<label for="message">メッセージ:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">送信</button>
</form>コメントタグ
コメントタグは、HTMLコードにコメントを追加するために使用します。
ブラウザには表示されません。
<!-- これはコメントです -->audio, videoタグ
audio, videoタグのメディアタグは、オーディオやビデオを埋め込むために使用します。
<audio>は音声ファイル、<video>はビデオファイルを表します。
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
</video>iframe
iframeタグは、別のHTMLページを現在のページに埋め込むために使用します。
<iframe src="<https://www.example.com>"></iframe>navタグ
ナビゲーションタグは、ナビゲーションリンクを含むセクションを表します。
<nav>
<ul>
<li><a>ホーム</a></li>
<li><a>私たちについて</a></li>
<li><a>サービス</a></li>
<li><a>お問い合わせ</a></li>
</ul>
</nav>まとめ
この記事では、よく使用するHTMLタグについて解説しました。
今回紹介したタグの他にもHTMLタグが多く存在します。
Webサイトを制作する時は、正しいタグを使用することが大切です。
どのタグを使うべきか瞬時にわかるようにこの記事で紹介した基本のタグは是非とも覚えておきましょう。
コメント