この記事では、サイトを制作する際によく使われるHTMLのタグについて解説をしていきます。
今回は、Webサイト制作で使用するもののうち、特に重要度の高いタグに絞って紹介していきます。
この記事で登場するタグは必ず覚えて次の学習に進んでいきましょう。
- Web制作で使用する15個の重要なタグ
基本的な要素のタグ
まずは、Webサイトの中で登場する基本的な要素を表すタグを学んでいきましょう。
h1〜h6タグ
「h1~h6タグ」は、「見出し」を作成する際に使用します。
見出しの意味を持つ「heading（ヘディング）」の頭文字になります。
見出しとは、Webサイトの中で「大事な情報」となる箇所になります。
数字ごとに情報の重要度が決まっており「h1タグ」が一番大事な情報に使用すると覚えておきましょう。
<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
<h4>見出し４</h4>
<h5>見出し５</h5>
<h6>見出し６</h6>
使用箇所の例
- h1タグは、「サイトのロゴ」や「サイトのタイトル」に対して使用する
- h2タグは、「セクションごとのタイトル」や、「記事の見出し」に使用する
- h3タグは、「上記の項目以外の見出し」に対して使用する
よく使用する見出しは「h1~h3タグ」までになります。
見出しはデザインによって使用する箇所が変わってくるものになるので、
「大事な情報に使用する」というイメージを持っておけば大丈夫です。
pタグ
「pタグ」は、「文章」を作成する際に使用します。
文章や段落の意味を持つ「paragraph（パラグラフ） 」の頭文字になります。
<p>HTML,CSSはプログラミングを学ぶ上で最も基本で必須の言語です。</p>
使用箇所の例
- 文章・段落
- キャッチコピー
- サブコピー
Webサイトの中で文章が登場したら、ひとまずpタグを置いておくと良いです。
aタグ
「aタグ」は、リンクの埋め込む際に使用します。
錨や、よりどころの意味を持つ「anchor（アンカー）」の頭文字になります。
<a href="https://zero-plus.io">公式サイトはこちら</a>使い方として、「href属性」を記述し、値に「リンク先のファイルやURL」を記述します。
（href属性は、エイチレフ属性と読みます。上記のコードの例では、値にZeroPlusの公式サイトのURLを記述しています。）
使用箇所の例
- ボタン
- ナビゲーションの項目
Webサイトの中で、クリックしたらページが移動する箇所は「aタグ」が使用されます。
ulタグ
「ulタグ」は、「番号なしリスト」を作成する際に使用します。
「ul」は「unordered list（アンオーダードリスト）」の略です。
リストを作成する際には、基本的に「ulタグ」を使用し、次の「liタグ」と合わせて記述します。
（「olタグ」という「番号付きリスト」を表すタグも存在しますが、ほとんど使用しません。）
liタグ
「liタグ」は、「リストの項目」を作成する際に使用します。
「リストの項目」の意味を持つ「list item（リストアイテム）」の略です。
<h2>ZeroPlusのカリキュラム一覧</h2>
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>WordPress</li>
<li>Design</li>
<li>卒業制作</li>
<li>特別講義</li>
</ul>
使用箇所の例
- ナビゲーションの項目一覧
- ニュースの一覧
Webサイトの中で、「一覧」で表示されている箇所でよく使用されます。
使い方として、ulタグの中にliタグを書くことは鉄則です。
liタグは、ulタグの直下（すぐ下に）に記述されます。この順番は絶対に覚えておきましょう。
imgタグ
「imgタグ」は、「画像」を作成する際に使用します。
「画像」の意味を持つ「image（イメージ）」の略です。
<img src="img/logo.png" alt="ZeroPlus" />使い方として、「src属性」を記述し、値に「読み込みたい画像までパス」を記述します。
また、「alt属性」は画像が表示されなかった際の代替テキストを記述します。
alt属性は空でも良いので、必ずつけましょう。画像が文字や、説明の必要がある場合は、その文字や説明を属性内に記述しましょう。
（src属性は、ソース属性と読みます。情報源を表す「source」の略です。alt属性は、オルト属性と読みます。代替案を表す「alternative」の略です。）
ただし、alt属性の中身に関して詳しく学ぶのは、ある程度コーディングできるようになってからで良いです。
使用箇所の例
- 画像が表示されている箇所
- アイコンが表示されている箇所
CSSで背景画像を読み込む方法があるので、そちらと区別して覚えておきましょう。
Webサイトの構造を表すタグ
次に、Webサイトの構造を表すためのタグについて学んでいきましょう。
headerタグ
「headerタグ」は、ヘッダーというWebサイト上部の構造を作成する際に使用します。
<header>
<!-- サイトのタイトルやナビゲーションが入ります -->
</header>
使用箇所の例
- Webサイト上部の構造
ヘッダーには、主に「サイトのタイトル」や「ナビゲーション」などが記述されることが多いです。
navタグ
「navタグ」は、Webサイトのナビゲーションの構造を作成する際に使用します。
「nav」とは「navigation（ナビゲーション）」の略です。
<nav>
<ul>
<li>
<a href="about.html">私たちについて</a>
</li>
<li>
<a href="service.html">サービス</a>
</li>
<li>
<a href="contact.html">お問い合わせ</a>
</li>
</ul>
</nav>
使用箇所の例
- Webサイト内を移動するナビゲーションの箇所
- ヘッダーやフッターの中にあるナビゲーション
navタグの中には、ulタグ、liタグなどを記述して、ナビゲーションのリストを作ります。
mainタグ
「mainタグ」は、Webサイトのページ内で、１番重要な構造を作成する際に使用します。
<main>
<!-- 主要コンテンツ（Webサイトの内容）が入ります -->
</main>
使用箇所の例
- Webサイトの主要なコンテンツ
mainタグの中には、sectionタグやarticleタグなどの Webサイトの主要なコンテンツを記述します。
sectionタグ
「sectionタグ」は、Webサイトのコンテンツを区切る構造を作成する際に使用します。
名前の通り、「節」や「章」を表す「section」という英単語に由来します。
<section>
<h2>会社概要</h2>
<!-- 会社概要の内容 -->
</section>
<section>
<h2>サービス</h2>
<!-- サービスの内容 -->
</section>sectionタグを使用して、Webサイトの内容を区切っていることがイメージできていれば大丈夫です。
使用箇所の例
- Webサイト内のコンテンツの区切り
sectionタグ内には、見出し要素（h1〜h6タグ）を含む必要があります。
articleタグ
「articleタグ」は、Webサイト内の記事の構造を作成する際に使用します。
名前の通り、「記事」や「論説」を表す「article」という英単語に由来します。
<article>
<img src="img/thumbnail.jpg" alt="" />
<h2>プログラミング学習のモチベーション維持に大事な8つのこと</h2>
</article>
使用箇所の例
- ブログやメディアサイトの記事
articleタグ内には、見出し要素（h1〜h6タグ）を含む必要があります。
asideタグ
「asideタグ」は、サイドバーというWebサイトの補足的な構造を作成する際に使用します。
名前の通り、「脇」や「傍ら」を表す「aside」という英単語に由来します。
<aside>
<!-- ページの補足的なコンテンツが入ります -->
</aside>
使用箇所の例
- ブログやメディアサイトのサイドバー
おすすめ記事やカテゴリーなどの保続情報が含まれます。
footerタグ
「footerタグ」は、フッターというWebサイト末尾部分の構造を作成する際に使用します。
<footer>
<!-- 著者の情報やコピーライトが入ります -->
</footer>
使用箇所の例
- Webサイト末尾の構造
footerタグの中には、著作権表記や連絡先などの情報を記述します。
便利に使用できるタグ
次は、便利に使用できるタグについて紹介していきます。
今までのタグとは異なり、明確に役割が決められていない２種類のタグです。
必要に応じて自由に作成することができるので、使いこなせるととても便利なタグです。
divタグ
「divタグ」は、Webサイトの要素をグループとしてまとめたり、新たに構造を作成する際に使用します。
「div」は、分割の意味を持つ「division（ディビジョン）」の略です。
<div class="curriculum-item">
<h2>Web Design</h2>
<p>Adobe XDを使ってデザインを学びます。</p>
</div>
<div class="curriculum-item">
<h2>HTML, CSS</h2>
<p>HTML, CSSはWeb制作を学ぶ上で最も基本で必須の言語です。</p>
</div>divタグは、ブロックレベル（縦に積み重なる形）で要素をグループ化できることがポイントです。
使用箇所の例
- 新たにWebサイトの構造を作成する
- 要素をグループでまとめる
- Webサイトのレイアウトを調節する
divタグは、Webサイトの見た目を整えるCSSを使用する際に大切になります。
実際にコードを記述していく中で使い方に慣れていきましょう。
spanタグ
spanタグは、divタグと同様に特別な役割はなく、要素をグループ化する際に使用します。
短い期間や全長を表す「span」の名前がついているタグです。
<span class="text__lg">あ</span>いうえおspanタグは、インラインレベル（横に並ぶ形）で要素をグループ化できることがポイントです。
使用箇所の例
- テキストの一定の箇所にスタイルを与える
- 補足情報のテキスト
- Webサイトのレイアウトを調節する
spanタグは、divタグ同様、使えると便利なタグになります。
こちらも、実際にコードを記述していく中で使い方に慣れていきましょう。
まとめ
ここまでで、Webサイト制作で使用する重要な15個のタグ紹介してきました。
- 基本的な要素のタグ
- h1~h6タグ
- pタグ
- aタグ
- ulタグ
- liタグ
- imgタグ
- Webサイトの構造を表すタグ
- headerタグ
- navタグ
- mainタグ
- sectionタグ
- articleタグ
- asideタグ
- footerタグ
- 便利に使用できるタグ
- divタグ
- spanタグ
上記のタグの名前と使い方のイメージを掴んでいれば大丈夫です。
タグの種類は他にもまだまだたくさんありますが、まずは上記のタグを覚えましょう。
