HTMLの学習を始めたばかりの方は、どんなタグが存在するのかも分からないですよね。
本記事では、HTMLの中でも頻繁に利用するタグ一覧をそれぞれの概要についてご紹介していきたいと思います。
目次
HTMLタグ一覧： 「基本構造」を解説
HTMLタグの中でも、HTMLを構成する上で必ず利用することになる「基本構造」のタグ一覧をご紹介していきたいと思います。
まずはタグ一覧をご確認ください。
- <!DOCTYPE>
- <html>
- <head>
- <body>
<!DOCTYPE>
文章の型を定義するために利用するもので、HTMLを記述する場合には「<!DOCTYPE HTML>」のように記述します。
正確にいうとHTMLのタグではありませんが、HTMLでコードを構築する際に必ず記述する必要があるのでご紹介しておきます。
<html>
HTMLを構築する際のルートとなる要素で、上述した<!DOCTYPE HTML>以外の要素は全て<html>タグの中に記述されます。
<html>の内側に以降に紹介する各要素を記述していくことで、コンピューターがHTMLのタグであることを理解し、Webサイトを構築していくことが可能となります。
<head>
ヘッダ情報を記述するための要素で、「タイトル」や「スタイルシート」、「サーチエンジン用の情報」といったメタ情報を定義します。
Webサイト上に表示する内容ではなく、裏側でブラウザが理解するための情報が記載されます。
<body>
Webサイト上で、ユーザーに対して表示する情報を定義するための要素で、Webサイトの本体となる部分です。
<body>の内部に様々な要素を記述することで、公開されているWebサイトのような枠組みを構築することが可能です。
HTMLタグ一覧：「meta」タグを解説
HTMLタグ一覧の「基本構造」で解説した<head>タグ内部に記述されるのが「meta」タグです。
まずは、よく利用する「meta」タグ一覧を確認しておきましょう。
- <title>
- <link>
- <script>
<title>
ブラウザ上のタブや検索結果のタイトルとして表示されるのが、この<title>タグに設定された値となります。
また、SEOの観点からも<title>タグに設定された値は、Webサイトの内容を示すための重要なポイントとされており、簡潔に分かりやすく設定することが重要です。
<link>
HTMLファイルと別のファイルやURLを関連付けるために使用されるタグです。
主な利用方法としては、別ファイルとして書き出したCSSファイルとの連携が挙げられます。
他にもSEOの関連でURLの正規化と呼ばれる作業を実施する際に、<link>タグが使用されます。
<script>
Javascriptなどのスクリプト言語を読み込む際に利用するのが<script>です。
外部ファイルの相対パスを指定してJavascriptを読み込む方法が一般的ですが、<script>内に直接、Javascriptの処理を記述して実行することも可能です。
HTMLタグ一覧：「範囲指定」を解説
HTMLのbodyタグ内部に記載される「範囲指定」のタグについて、まとめていきたいと思います。
- <h1> ~ <h6>
- <div>
- <span>
- <p>
<h1> ~ <h6>
見出しを表すタグで、h1~h6まで指定することが可能です。
数値の小さいタグほど重要な見出しとしての役割を果たします。
ブログを中心としたWebサイトでは、見出しをきちんと設定しておくことでSEOやユーザーの離脱率に大きな影響を与えます。
<div>
範囲を指定するためのブロック要素です。
汎用的に利用することが可能で、HTMLを構築する際に最も頻繁に利用するタグの1つとなります。
<div>自体には意味はなく、CSSを利用したレイアウト変更を適用させるための範囲指定として利用されます。
<span>
<div>タグと同じく範囲を指定するためのタグですが、<span>タグはインライン要素となります。
ブロック要素は、内部に指定した要素を1つのまとまりとして扱うのに対し、インライン要素ではまとまりの中の一部という役割を果たします。
ブロック要素が文章としての役割を果たし、インライン要素は文章の中の言葉やフレーズのみを指すイメージです。
<p>
段落を指定するために利用されるブロック要素です。
<p>タグでは、範囲の終わりで自動的に一行分の改行が設定されます。
単純に範囲としてのまとまりを指定したい場合には<div>タグを利用し、段落としてのまとまりを指定する場合には<p>タグを利用するようにしましょう。
HTMLタグ一覧：「リスト」を解説
Webサイト上で、箇条書きの表現を用いる際に利用される「リスト」についてご紹介していきます。
- <ul>
- <ol>
- <li>
<ul>
順序指定無しのリストを作成するために利用します。
type属性の値によって「●」「■」「○」といった、行頭に設定する記号を切り替えることが可能です。
<ol>
順序指定有りのリストを作成するために利用します。
type属性の値によって「1」「a」「A」など任意の値を、行頭に設定することが可能です。
<ol>タグでは「1,2,3…」「a,b,c…」のように行頭の値が、後述する<li>タグの数に応じて切り替わります。
<li>
<ul>タグと<ol>タグのリスト項目として設定されるのが<li>タグです。
上述した順序指定無しリスト、順序指定有りリストの指定によって行頭に設定される値が変わります。
<li>タグだけで利用されることはなく、<ul>タグまたは<ol>タグとセットで利用されます。
HTMLタグ一覧：「表形式」を解説
Webサイト上では、料金表やサービス一覧などのような形で「表形式」が利用されることも少なくありません。
- <table>
- <tr>
- <th>
- <td>
<table>
表自体の大きさや枠線の有無など、表の大枠を決めるタグです。
<table>タグの内側に後述する各種タグを指定することで、表構成を決定していきます。
<tr>
表の「行」に該当するのが<tr>タグです。
<tr>タグの内側に設定された内容が1行分として認識されます。
複数行のテーブルを作成する際には、<tr>タグが行数分記述されることになります。
<th>
表の見出しを設定するタグです。
<th>タグに指定された値は、自動的に太字で表示されます。
<td>
実際のデータや値を設定するのが<td>タグとなります。
一般的には<th>タグで指定した見出しに対しての値を、<td>タグで設定することになります。
HTMLタグ一覧：「イメージ」を解説
画像イメージの表示用タグについて解説していきます。
- <img>
<img>
Webサイト上に画像を表示させるためのタグです。
表示したいイメージのURLを指定することで、Webサイトを開いた際に画像を表示することが可能となります。
HTMLタグ一覧：「リンク」を解説
参考サイトを開く場合などで頻繁に用いられる「リンク」タグについて解説していきます。
- <a>
<a>
href属性を使用することで、<a>タグをクリックすることにより、任意のページや場所に遷移することが可能となります。
また、<a>タグは遷移先としての役割を果たすことも可能です。
id属性やname属性を指定しておき、別のリンクでhref属性を指定することで、ページ内遷移などを簡単に実装することが可能です。
HTMLタグ一覧：「フォーム」を解説
Webサイト上では、アカウント登録をはじめとして、データ入力を実施する機会は多くあります。
データ入力をする際には「フォーム」タグを利用することが多くなるため、しっかりと機能を把握しておきましょう。
- <form>
- <input>
- <button>
- <select>
- <textarea>
<form>
ユーザーが情報を入力するためのフォームを設置します。
フォームの内部に後述する部品となるタグを設置し、入力された値をサーバーへ送信する役割を担います。
<input>
フォームタグの中に、テキスト入力のエリアやボタンなどを設定することが可能となります。
パスワード用のマスクが掛かるテキストボックスやチェックボックス、ラジオボタンなど様々な部品を構築することが可能です。
<button>
上述したように<input>タグでもボタンを作成することは可能ですが、<button>タグを利用することで背景画像などを設定した特殊なボタンを作成可能となっています。
<input>タグと異なり、<button>タグでは、内側に別タグを設定することが可能です。
シンプルなボタンであれば<input>タグ、独自のボタンを作成したい場合には<button>タグを利用するなど状況によって切り分けて使用しましょう。
<select>
セレクトボックスを作成し、プルダウンを利用してユーザーの入力・選択条件を固定することが可能となります。<option>タグとセットで利用する方法が一般的で、<option>タグで指定した値がセレクトボックスの選択可能な値として表示されます。
<textarea>
テキストエリアは、2行以上の文章を入力することが可能なフィールドを設置します。
一般的には、「お問い合わせ」や「備考」などの入力エリアとして利用されることが多いようです。
さいごに：HTMLのタグ一覧は最低限の意味合いを理解すれば全てを記憶する必要はない
本記事では、HTMLで頻繁に利用されるタグ一覧を簡単な概要と共にご紹介してきました。
今回紹介した内容はWebサイト構築において頻繁に利用されるため、ある程度理解しておいた方が良いことは事実ですが、全てを記憶する必要はありません。
最低限の内容を理解した上で、実際に利用する際に、調べながら使いこなせるようになることが重要となります。
