最初のステップ！HTMLで覚えておきたい頻出タグ15選【初心者向け】現役エンジニアが紹介
HTMLでまず最初に覚えておきたいタグをまとめて紹介しています。これからWebサイトを作ろうと思っている方やHTMLを学習しようと思っている方は書き慣れておくと良いでしょう。実際にHTMLファイルを作成して覚えていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLに慣れる上で欠かせないタグをまとめて紹介しています。
どれも頻出のタグで、最低限覚えておきたいものを選んでいるので、これからHTMLを覚えようと思っている方は最初に覚えておきましょう。
実際に書きながら進めていくと理解しやすいです。
目次
HTMLとは
HTMLは、Hyper Text Markup Languageの頭文字を集めたもので、Webサイトの構造を形成するために使用される言語です。
HTMLではタグと呼ばれるマークアップのための目印を使用し、<●●>(開始タグ)～</●●>(終了タグ)という形を作り、その間に命令を書き実行します。
(終了タグは省略できるものや、書かないものも存在します)ここではサイト作成において必ず使用するタグや、よく使われるタグについて紹介します。
HTMLの基本構造に関するタグ
HTMLの基本的な構造は、以下の通りです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ページタイトル</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <header></header> <main></main> <footer></footer> </body> </html>
それでは、ひとつずつ分解して見ていきましょう！
<html>
HTML文書であることを示すタグで、(DOCTYPE宣言※のあとの)最初に<html>、最後に</html>と記述します。
すべてのHTMLタグは、この<html></html>の中に記述していきます。
※DOCTYPE宣言は、その文書がHTMLですよということを表すおまじないのようなキーワードです。
<head>
文書全体の基本的な情報、ヘッダ情報を定義します。
このタグに記述した内容はページには表示されませんが、ブラウザや検索エンジンがその内容を読み取り、そのWebサイトの状態を判定するため、内容はしっかり吟味する必要があります。
<title>
このタグはheadタグ内に記述します。
ブラウザのタブで表記される名前、ブックマークされた際に表示される名前になります。
<title>●●通販の△△</title>
<meta>
このタグはheadタグ内に記述します。
Webサイトのメタ情報を設定するタグです。
メタ情報とは、検索エンジンやブラウザに伝える情報全般のことで、様々な種類があります。
以下はその中でもよく用いるメタ情報の記述です。
<!-- 文字コードをUTF8に指定する --> <meta charset="utf-8"> <!-- Webサイトの説明を検索エンジンに伝える --> <meta name="description" content="サイトの説明文"> <!-- サイトの表示領域を、閲覧するデバイスの幅に合わせる --> <meta name="viewport" content="width=device-width, initial-scale=1">
<link>
このタグはheadタグ内に記述します。
指定した文書を参照するタグです。
外部スタイルシート（CSS）を適用する場合などはこれを使用します。
<!-- style.cssという外部スタイルシートを読み込む--> <link rel="stylesheet" href="style.css" type="text/css">
<body>
Webサイトに実際に表示されるコンテンツすべてを囲むタグです。
<header>
HTML5※から追加されたタグで、ヘッダー(Webサイトの先頭)部分に使用します(ヘッダー情報を扱う<head>タグとは別のものです)。
主にサイトのタイトルや、ナビゲーション（ヘッダーメニュー）などが入ります。
※HTML5とは？
HTML5はHTMLの仕様のひとつで、2014年に有効化しました。
それまでのHTML4と比べて全体的に機能が拡充されており、よりリッチなWebサイトの開発がしやすい仕組みになっています。
本記事執筆時点（2021年）では、HTMLといえばこのHTML5のことを指すことが多くなっています。
<footer>
HTML5から追加されたタグで、フッター(Webサイトの一番下)部分に使用します。
サイトに関する情報、著作権に関する注記、連絡先などが入ります。
サイトコンテンツの作成でよく使うHTMLタグ
次は、bodyタグの中でコンテンツの作成に使用する頻出タグの紹介です。
<p>
文章を作成する際に最もよく使うタグです。
正確には「段落（paragraph）」を表しており、別々のpタグで囲んだ文章は別の段落とみなされます。
例えば以下の場合、2つの<p>～</p>によって2つの段落に分けられています。
<p>この文は段落その1です。</p> <p>この文は段落その2です。</p>
<h1～h6>
各見出しを設定する際に使用します。
h1タグの内容がそのページで最も重要なキーワードとみなされ、ついでh2, h3と重要度が続きます。
文字の大きさだけを表すタグではなく、検索エンジンにより正しい情報を伝えるためのタグなので、内容には常に注意しましょう。
<h1>h1の見出し</h1> <h2>h2の見出し</h2> <h3>h3の見出し</h3> <h4>h4の見出し</h4> <h5>h5の見出し</h5> <h6>h6の見出し</h6>
<img>
画像を貼り付ける際に使用するタグです。
配置や大きさの設定はCSSで行うことができます。
<img src="img_1.png">
<a>
他のページへのリンクを貼ったり、指定したメールアドレスへの送信を行う際に使用します。
開始タグでリンクしたい内容を属性で指定し、タグ内にはリンクを貼りたいテキストや画像を入れます。
<a href="https://example.com/">リンク</a>
リンクを別のブラウザタブで開きたい場合、以下のようにtarget=”_blank”という属性を追加します。
<a href="https://example.com/" target="_blank">リンク</a>
<ol>・<ul>・<li>
リストを作成する際に使用する3種類のタグです。
olとliのセット、もしくはulとliのセットで用います。
<ol>
リストを作成するタグです。
ordered listの略で、「1,2,3～」「a,b,c～」といった順番のあるリストを作成します。
<ol> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol>
<ul>
unordered listの略で、順番がないリストを作成します。
<li>
list itemの略で<ol>〜</ol>あるいは<ul>〜</ul>内に記述します。
それらのリストの各項目を作成するときに使用します。
コード例は、上記olタグとulタグのサンプルコードを参照してください。
<table>・<tr>・<td>・<th>
テーブル(表)を作成する際に使用されます。
<table>
表の開始を示すタグです。
内部に<tr>・<td>・<th>が入ります。
デフォルトでは枠線は表示されず、border属性に”1″を指定することで表示されるようになります。
色や大きさなどの設定はCSSで行います。
<tr>
table rowの略で、テーブルの行に使用します。
このタグを使用した分だけ行が追加されます。
画像では全部で3つの行が作成されています。
<td>
table dataの略で、テーブルのセルに使用します。
画像内の「内容」の部分にあたります。
<th>
table headerの略で、テーブルの見出しのセルに使用します。
画像内の「見出し1～3」の部分にあたります。
<table border="1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<form>・<input>・<select>・<button>・<label>・<textarea>
フォームの作成に使用します。
フォームとは、ユーザーが入力した情報を取得したり、サーバに送信したりするための仕組みです。
フォームの例：複数行のテキストが入力可能な<textarea>を使用したフォーム
<form action="" method="post">
<p>
<textarea name="text" cols="60" rows="4">
テキストを入力してください。
</textarea>
</p>
<p>
<input type="submit" value="送信">
</p>
</form>
<input>
inputタグは、formの中で最もよく使うタグで、様々な種類の入力を実現できます。
type属性の値により、一行のみのテキストボックス・チェックボックス・ラジオボタンなど、10以上の属性を指定できるため、様々な利用が可能です。
入力された値は、value属性に登録されます。
例1) 1行のみのテキストボックス
<input type="text" name="user-input-text" placeholder="入力してください">
例2)複数選択が可能なチェックボックス
<input type="checkbox" name="user-check" value="1" checked>1 <input type="checkbox" name="user-check" value="2" checked>2
例3)1つのみ選択可能なラジオボタン
<input type="radio" name="user-select" value="1" checked>1 <input type="radio" name="user-select" value="2">2
<button>
ボタンを作成するためのタグです。
type属性の値によって、挙動が変わります。
<!-- フォームを送信するtype="submit" --> <button type="submit">送信</button> <!-- フォームをリセットするtype="reset" --> <button type="reset">リセット</button> <!-- フォームに関係なく、単なるボタンとしてふるまうtype="button" --> <button type="button">これはボタンです</button>
<select>
セレクトボックスを作成できます。
セレクトボックスはプルダウン式で選択肢を表示できます。
<select name="course"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select>
<label>
<label>は<form>の部品とその項目名を関連付けるための要素です。
正しくひもづくと、ラベルの部分をクリックしてもチェックボックスをチェックできるなど、操作面でのメリットもあります。
<label> <input type="checkbox" name="check" value="プログラミング">プログラミング </label>
<textarea>
最後はformの一例でも紹介した、テキストエリアです。
input要素のtype=”text”では1行の入力しかできませんが、このタグを使うと複数行の入力をユーザーに許容します。
その項目でどのくらい入力量が必要かに応じて使い分けましょう。
<textarea name="long-sentence" placeholder="複数行入力できます"></textarea>
以上、Webページの作成において必ず一回以上は使うような重要なタグを紹介しました。
書き慣れておくと、今後HTMLファイルを作る上でもスムーズに作業が進むと思うので、ぜひ覚えておきましょう。
執筆してくれたメンター
| 高田悠（たかだゆう）
JavaScriptを用いた実装など、フロントエンド領域の開発が得意。 中でもWeb上での3D表現に興味があり、これまでにWebAR（AR=拡張現実）の実装案件を複数経験。 ワークライフバランスを重視し、趣味の音楽活動や釣りを楽しみつつフリーランス生活を送っている。 |
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
