【チートシート付き】コーディングで頻出のHTMLタグをまとめました

この記事を書いた人

PENGIN LLC.

PENGIN BLOGは、LPやECサイト制作を中心に行うPENGIN LLC.が運営しております。弊社は、プログラミング教育などのテクノロジー教育に関わったメンバーが多数在籍しているため、当メディアを通じて、Web制作をご検討中の企業様やWeb制作を学習中の方の学習に役立つ情報を発信しています。

コーディング学習を始めたての時に、覚えることが多すぎてどうしたら良いかわからなくなってしまった経験ありませんか？

頑張ってメモ取りながら学習をして行くけどなかなか進まず、どんどんモチベーションが下がってしまうという現象はコーディングを学習している人のほとんどが経験することです。

そのため今回は、実際のコーディングでよく使用するHTMLタグだけを集めてそれぞれの活用例をまとめました。

この記事を読むことで頻出のHTMLタグを抑えることができ、爆速でコーディング学習を進められるようになります。

チートシートのダウンロード

まずは、業務で良く使うHTMLタグについてまとめたチートシートをご覧ください。Webサイトを制作するうえで、必ず抑えておくべきと考えるタグについてまとめました。

チートシートのダウンロードはこちらをクリックしてください。

そもそもHTMLの役割とは？

HTMLタグの解説をする前に「そもそもHTMLって何のために書くの？？」という部分を解説したいと思います。HTMLを記述するのは主に3つの役割があります。
写真の表示やリンクの設定をする役割
Webページの文書構造を検索エンジンに伝える役割
Webアクセシビリティを担保する役割
以下、1つずつ解説していきます。

写真の表示やリンクの設定をする役割

まず、HTMLの１つ目の役割は、写真の表示をしたり、ハイパーリンクの機能を設定する役割です。HTMLを学習したことがある方ならご存知とは思いますが、imgタグを使用しなければ、写真をコンテンツとして表示することはできませんし、aタグを使用しなければハイパーリンクを設定することができません。
このように写真を表示したり、ハイパーリンクなどの機能を付けたりすることが、HTMLの役割の一つです。

Webページの文書構造を検索エンジンに伝える役割
HTMLの主役割は「文書構造を定義すること」にあります。人間であれば、文書の見た目や文字の大きさ・太さによって、どれが見出しでどれが本文なのかということを理解することができます。しかし、検索エンジンの中のロボットは人間の言葉だけ並んでいても、その意味を理解することができません。そのため、文書構造を定義してロボットがコンテンツの内容を判断できるようにしてあげる必要があります。
ロボットが文書の内容が読者にとって有益であるという判断になれば、検索順位もあがります。正しいマークアップはSEOのためにも必要なものです。

Webアクセシビリティを担保する役割

Webアクセシビリティというのは「様々な状況下にある多様な人々にとっての使いやすさ」と思っていただけると良いと思います。例えば、視覚に不自由がある方はブラウザの読み上げ機能を使ったり、独自のCSSを使用することでWebサイトの情報を得ることができます。
この際に正しくマークアップされていないと、情報が正しく伝わらないということになります。誰にとっても使いやすいWebサイトにするということもHTMLの役割です。

いろいろと説明しましたが、HTMLの役割について理解できたでしょうか？
もしも、SEOもアクセシビリティもどうでも良いのであれば、極端な話「すべてdivタグで書いても良い」です。（実際にリスティングで集客しているLPなどは「ほぼ画像」なサイトも多くあります）
ここでは「HTMLってこんな役割があるんだな〜」と思っていただければ大丈夫です。

最初に覚えてほしいHTMLタグ5選

それでは、まず最初に覚えてほしいHTMLタグ5選を解説します。ほとんどの書籍で最初に紹介される基本的なタグを紹介します。

h1〜h6
p
a
img
ul,li

見出し（h1〜h6）

見出しに当たる部分はh1〜h6のタグを使用します。hはheading（見出し）の頭文字です。重要度順に1〜6です。トップページであれば、サイトのタイトルに当たる部分がh1タグ、セクションタイトルに当たる部分がh2タグといった感じです。

例えば、クリ★スタの記事でいえば、記事のタイトルがh1、大見出しがh2になっています。

段落（p）

段落にあたる部分はpタグで囲みます。pはparagraph（段落）の頭文字です。通常、文書は見出しと本文で成り立っています。この本文の段落に当たる部分をpタグで囲みます。

アンカー（a）

ハイパーリンクにしたい部分はaタグで囲みます。aはanchor（錨）の頭文字です。aタグのhref属性にリンク先へのパスを入力することでハイパーリンクになります。

画像（img）

コンテンツとして画像を表示させたいときにはimgタグを使用します。imgはimage（画像）の略です。imgタグのsrc属性に画像へのパスを入力することで該当の画像を表示することができます。

頻出のHTMLタグ

次にその他のHTMLタグを見ていきましょう。
一覧表の中で、使い方が少し難しいものに絞って解説していきます。

定義型リストの使い方（dl、dt、dd）

まず、定義型リストの使用方法です。dlはdefinition list（定義型リスト）の頭文字、dtはdefinition term（定義型条件）の頭文字、ddはdefinition description（定義型説明文）の頭文字です。

以下のような場合に定義型リストを使用します。

<参考>定義型リストの使用例

See the Pen
poJmBaO by クリ★スタ (@cresta_design)
on CodePen.

「質問」と「回答」のような関係のものをそれぞれdtタグ、ddタグで囲み、リスト全体をdlタグで囲みます。補足事項として、dlタグの子要素にはdtタグ、ddタグの他にdivタグも書くことができます。そうすることで参考画像のような表組みを実装することが簡単になりました。

inputタグの使い方

inputタグはコンタクトフォームを実装するときになくてはならないタグです。type属性を変えると様々な機能が付与できるので、簡単に使い方を解説します。

type=”text”：入力フィールド（1行）
type=”submit”：送信ボタン
type=”radio”：ラジオボタン
type=”checbox”：チェックボックス

ひとまずはこの4つを抑えておけば十分でしょう。

<参考>inputタグの使用例

See the Pen
NWqVmZB by クリ★スタ (@cresta_design)
on CodePen.

プルダウンメニューの作り方

プルダウンメニューを実装する際は、selectタグとoptionタグを使用します。
以下のように、optionタグ内に選択肢を記入し、全体をselectタグで囲みます。

<参考>selectタグの使用例

See the Pen
JjdqVgX by クリ★スタ (@cresta_design)
on CodePen.

labelタグの使い方

labelタグはフォームの操作性を快適にするために使用するタグです。フォームパーツとパーツに付随するテキストを紐付けることによって、テキストがクリックされたときにもフォームパーツに作用するようになります。
以下のように、labelタグのfor属性とinputタグのid属性を一致させることで、テキストをフォームパーツを紐付けます。

<参考>labelタグの使い方

See the Pen
Exjzzxj by クリ★スタ (@cresta_design)
on CodePen.