HTMLタグは100個以上ありますが、こんなたくさん覚えられないよ・・・といった方もいらっしゃるかと思います。ですが、実務で実際に使用するタグはそこまで多くなく、すべて覚える必要は全くありません！
頻繁に使用するタグを覚えておいて損はないため、主要なタグに絞って覚えていきましょう！
よく使用するタグ
h1～h6
見出しを作成する際に使用します。「h」とは見出しの意味で「heading」を略しています。<h1>～<h6>まであり、<h1>が最も大きい見出しで、記事のタイトル等で使用します。<h1>タグは１つのページに1回まで、<h2>タグ以降は複数回使用されます。
開始タグと終了タグの間に、文章を記載します。
<h1>これはh1タグです、HTMLの勉強を始めます</h1>
<h2>これはh2タグです、HTMLの勉強を始めます</h2>
<h3>これはh3タグです、HTMLの勉強を始めます</h3>
<h4>これはh4タグです、HTMLの勉強を始めます</h4>
<h5>これはh5タグです、HTMLの勉強を始めます</h5>
<h6>これはh6タグです、HTMLの勉強を始めます</h6>
見出しタグの数字が大きくなるごとに、テキストのサイズが変化します。
p
文章の段落を表すタグです。「P」は「paragraph」の略で、文章のまとまりを<p>タグで囲みます。
<p>今日はHTMLの勉強をしています。</p>
<p>タグの勉強をしていますが、よく使用するタグに絞って勉強しています。</p>
<p>タグを使用すると、開始タグと終了タグに囲まれた文章が、段落となります。文章が長くなる場合は<p>タグで囲むと見やすくなります。<p>タグの後には自動的に改行され、それぞれの段落の間にはスペースができます。
img
「img」は「image」の略で、Webサイト上に画像を表示する際に使用します。
<img>タグを記載するだけでは画像は表示されず、別途属性を追記する必要があります。
<img src="./logo.svg" alt="ロゴ">
どの画像を表示するかは、「src」属性を使って指定します。値に画像ファイルまでのパスを記載します。「alt」属性はもし画像がうまく読み込めなかった場合に表示される文字です。
画像がうまく読み込めなかった場合は、このように「alt」属性で指定した文字が表示されます。
そのため、「alt」属性も必須となります。
a
サイト内にリンクを埋め込む際に使用します。「anchor」の略で、アンカーリンクタグとも呼ばれます。
<p>IWACODE</p>
<a href="https://iwacode.i-design-creative.com/" target="_brank">IWACODE</a>
<a>タグで囲んだほうの文言がリンクになりました。<p>タグで囲んだ方はただ文言が出力されているだけになります。target属性については、値を「_brank」にすることによって、別タブでリンク先を開くことができます。
<a>タグは以下のようにも使用することができます。
<a href="https://iwacode.i-design-creative.com/" target="_brank">
<img src="./logo.svg" alt="ロゴ">
</a>
<img>タグを<a>タグで囲むことによって、<img>タグをリンクにすることができます。<a>タグで囲んだ箇所はリンクになるため、用途に合わせて使用しましょう。
ul/ol/li
箇条書きや、リスト形式で表す場合は<ul>+<li>、もしくは<ol>+<li>の組み合わせを使用します。
<ul>～</ul>
「ul」はUnordered Listの略で、順序が決まっていないリストとなります。箇条書きで表す場合に使用します。
<ol>～</ol>
「ol」はOrdered Listの略で、順序が決まっているリストとなります。番号付きで表す場合に使用します。
<li>～</li>
「li」はList Itemの略で、<ul>タグ、<ol>タグの中で使用します。数に制限はありません。
<ul>
<li>赤</li>
<li>緑</li>
<li>青</li>
</ul>
<ol>
<li>赤</li>
<li>緑</li>
<li>青</li>
</ol>
table/tr/th/td
料金表などや時刻表などの表を作成するタグとなり、複数のタグで構成されます。
<table>～</table>
表全体を囲むタグとなります。
<tr>～</tr>
表の行部分を囲むタグとなります。
<th>～</th>
表の見出し、ヘッダー部分を表すタグとなります。
<td>～</td>
表のデータ部分を表すタグとなります。
HTMLのイメージは以下のようになります。
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>性別</th>
</tr>
<tr>
<td>IDC一郎</td>
<td>20歳</td>
<td>男性</td>
</tr>
<tr>
<td>IDC次郎</td>
<td>18歳</td>
<td>男性</td>
</tr>
</table>
出力するのこのように表示されます。CSSでスタイルを整えることによって、見栄えの良いテーブルにすることが可能です。
span
<div>タグと同様にタグ自体には意味を要しませんが、CSSでレイアウトを調整する場合に使用します。例えば文章中の特定の文字だけ色を変えるなど、<span>タグを使用して実装します。
<p>よく使うHTMLタグ<span>15</span>選</p>
<style>
span {
font-size: 32px;
color: red;
font-weight: bold;
}
</style>
グループ分けをするタグ
Webサイトでは様々な構成が組み合わさって作られています。サイト上部のヘッダー部分、メインとなるコンテンツ、記事情報、補足情報、お知らせなどがあります。それらを適切なタグで管理することでコードの見栄えも良くなりますし、Webサイトとしての評価の向上にも繋がります。
header
Webサイトや各コンテンツのヘッダー部分で使用します。
<header>
・・・
</header>nav
主に<header>タグ内で使用されることが多く、Webサイト内のナビゲーションリストとして使用します。
<header>
<nav>
<ul>
<li>ホーム</li>
<li>事業内容</li>
<li>会社概要</li>
<li>お問い合わせ</li>
</ul>
</nav>
</header>footer
Webサイトの下部に使用し、主にコピーライトの表記や、各ページのリンクを記載します。
<footer>
・・・
</footer>main
ページ内の主要となる部分で使用します。
<header>
・・・
</header>
<main>
・・・
</main>
<footer>
・・・
</footer>section
意味を持ったグループ（コンテンツ）をまとめる際に使用します。
<main>
<section>
・・・
</section>
</main>article
ページ内の記事にあたる部分で使用します。
<main>
<section>
<article>
・・・
</article>
</section>
</main>aside
ページ内の補足部分で使用します。サイドバーなどで使用することが多いです。
<section>
<article>
・・・
</article>
<aside>
・・・
</aside>
</section>div
レイアウトをCSSで整えるために使用します。<div>タグ自体には特に意味を要しませんが、使用しないとCSSでレイアウトを調整しにくい場面があるため、必要に応じ使用しましょう。
<div>
・・・
</div>さいごに
実務でよく使用するHTMLタグをご紹介させていただきました。
HTMLのタグの数は膨大ですが、実際に使用するタグは一部です。使用頻度が高めで本記事にて挙げていないタグもございますが、より大事だと思われるタグに絞りご紹介させていただきました。模写コーディングなどを行っていくと、徐々に覚えていきます。わからない箇所は必要に応じ調べつつ、覚えていきましょう！
