頻出HTMLタグ一覧を紹介!基本を確認しよう初心者必見

  • スキルアップ
公開日:

HTMLのタグは、非常に種類が多い傾向です。しかし、特に基本のタグから覚えていくと、初心者には学びやすくなります。そこで今回は、HTMLのタグの中でも押さえておきたいタグを一覧形式で紹介します。

タグ一覧は、HTMLの基本構造に関するタグ、入力フォームに関するタグ、コンテンツ作成時に多く利用するタグと、用途別にまとめました。 HTMLの学習を始めたばかりの初心者には必見ですので、ぜひ勉強にお役立てください。

HTMLの基本構造に関するタグ一覧

HTMLの基本構造に関する主なタグには、以下のようなものがあります。

タグ名 開始タグ 終了タグ 概要
html 省略可 省略可 HTML文書であるという指定
head 省略可 省略可 文書のヘッダ部分を指定
title 必須 必須 文書のタイトルを指定
meta 必須 なし 文書のメタ情報を指定
link 必須 なし 関連する文書ファイルを指定してその関係を定義
body 省略可 省略可 文書の本体部分を指定
section 必須 必須 文章のまとまりを指定
header 必須 必須 ヘッダを表示
footer 必須 必須 フッタを表示

htmlタグ

HTML文書であることを示すタグで、最初に<html>、最後に</html>と記述します。「<!DOCTYPE html>」は、この文書のタイプがHTMLであることを宣言しています。

例:

<!DOCTYPE html>
<html lang="ja">
<head></head>
<body></body>
</html>

HTMLタグは、すべてhtmlタグに囲まれた中に記述します。

headタグ

文書のヘッダ情報を指定するタグです。titleタグ・metaタグなどは、headタグ内に記載します。CSSファイルや、JavaScriptを外部ファイルとして切り出した場合は、headタグ内に指定すると読み込めるようになります。

例:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="shift_jis">
  <title>サンプルページ</title>
  <link rel="stylesheet" href="samplestyle.css" type="text/css">
</head>
</html>

titleタグ

headタグ内に記載し、その文書のタイトルを指定するタグです。titleタグの内容は、Webブラウザのタイトルバーや検索結果のタイトルなど、さまざまな部分で表示されます。

また、検索エンジンは、titleタグの文字列に強い重みづけをしているため、SEO対策としても、「どのような文字列を指定するか」をじっくりと検討したいタグです。

例:

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>サンプルページ</title>
</head>
</html>

metaタグ

文書のメタ情報を指定するタグで、headタグ内に記載します。メタ情報は、Webブラウザの画面に表示されません。metaタグの情報は、Googleなどのロボット型検索エンジンに収集され、検索結果一覧に反映されます。

メタ情報は、サイトの制作者・Webページに関連するキーワード、文字コードの指定などに使われます。以下は、文字コードの指定に「Shift-JIS」を指定する例です。

例:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="shift_jis">
</head>
</html>

linkタグ

関連する文書ファイルおよび、そのファイルとの関係を示すタグです。例えば、以下の例は、参照先の文書がstylesheetであり、文書ファイルのURL(相対パス)は「samplestyle.css」、参照先の文書タイプ(MIMEタイプ)は「text/css」を示しています。

例:

<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="stylesheet" href="samplestyle.css" type="text/css">
</head>
</html>

bodyタグ

文書本体の内容を指定するタグです。文章や画像など、本タグに指定する内容は、Webブラウザに表示されます。

例:

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>

sectionタグ

文章のまとまり(1章、2章など)を分けるときに利用するタグです。レイアウトとしてのまとまりを分ける場合は、本タグではなくdivタグを使います。

例:

<body>
   <section>
        <h2>1章</h2>
        <p>地の文</p>
   </section>
   <section>
        <h2>2章</h2>
        <p>地の文</p>
   </section>
</body>

headerタグとfooterタグ

headerタグとfooterタグについては、既存記事に記載があるのでご確認ください。

関連記事:HTMLとは?CSSとの違いや代表的なタグも紹介

ここまで紹介したタグをすべて使ったHTMLの記述例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="shift_jis">
  <title>サンプルページ</title>
  <link rel="stylesheet" href="samplestyle.css" type="text/css">
</head>
<body>
  <header></header>
  <main>
   <section>
        <h2>1章</h2>
        <p>地の文</p>
   </section>
   <section>
        <h2>2章</h2>
        <p>地の文</p>
   </section>
</main>
  <footer></footer>
</body>
</html>

基本的なタグ一覧

以下の基本的な9つのタグは、関連記事で紹介しているのでそちらをご参照ください。

<a>
<img>
<p>
<table>
<nav>
<style>
<script>

関連記事:HTMLとは?CSSとの違いや代表的なタグも紹介

aタグについては、詳しい関連記事もあるのであわせてご覧ください。

関連記事:HTMLのaタグとは?基本の使い方・属性・SEO対策について解説

コンテンツ作成時に頻出するタグ一覧

コンテンツ作成時に多く利用するタグの一覧は、以下の通りです。

タグ名 開始タグ 終了タグ 概要
ol 必須 必須 順序のある番号付きのリストを指定
ul 必須 必須 順序のない箇条書きのリストを指定
li 必須 省略可 リストの項目を指定
form 必須 必須 入力・送信フォームを指定
input 必須 なし 入力部品を指定
select 必須 必須 セレクトボックスを指定
button 必須 必須 ボタンを指定
label 必須 必須 フォーム内の項目ラベルを指定
textarea 必須 必須 複数行の入力エリアを指定

箇条書きに関するタグ

olタグは順序のある数字付きのリスト、ulタグは順序のない箇条書き、liタグはolタグ・ulタグのリスト項目を指定するためのタグです。

例:

<ol>
  <li>数字付きその1</li>
  <li>数字付きその2</li>
  <li>数字付きその3</li>
</ol>
<ul>
  <li>単なる箇条書きその1</li>
  <li>単なる箇条書きその2</li>
  <li>単なる箇条書きその3</li>
</ul>

formに関するタグ

入力・送信フォームを作成するために使うタグは、form・input・select・button・label・textareaです。各タグは、フォーム内に配置する入力エリアやボタンなどを指定するために使います。

例:

<form action="" method="post">
  <p>
    <textarea name="text" cols="60" rows="4">
      1行当たり60文字、4行入力できます
    </textarea>
  </p>
  <p>性別<br>
    <select name="sex">
      <option value="man">男性</option>
      <option value="woman">女性</option>
    </select>
  </p>
  <p>
    <input type="submit" value="送信">
  </p>
</form>

テキスト用のタグ一覧

テキストに適用するタグの一覧は、以下の通りです。

タグ名 開始タグ 終了タグ 概要
h1〜h6 必須 必須 見出しを指定(h1が一番大きい見出し)
p 必須 省略可 段落を指定
br 必須 なし 改行を指定
div 必須 必須 ブロック要素を指定
pre 必須 必須 整形済みテキストを表示
blockquote 必須 必須 引用・転載文の部分を指定
hr 必須 なし 要素内における主題の意味的な区切り(水平線表示)

見出しと段落に関するタグ

h1〜h6タグは、見出しを指定するタグです。h1タグが一番大きいフォントで表示され、h2以降は順番に小さい見出しとなります。

例:

<h1>h1:見出し1</h1>
<h2>h2:見出し2</h2>
<h3>h3:見出し3</h3>
<h4>h4:見出し4</h4>
<h5>h5:見出し5</h5>
<h6>h6:見出し6</h6>

Pタグは段落を示し、終了タグで改行が入ります。brタグは、単純に改行したいときに利用するタグです。

例:

<p>この文は第2段落の1文目です。</p>
<p>この文は第2段落の1文目です。<br>この文は第2段落の2文目です</p>

divタグは、ブロック要素を指定するためのタグです。Sectionタグと違い、要素をひとかたまりのグループにして、一括でレイアウトを行うために利用します。

例:

<body>
  <div>
      <p>div1番目</p>
  </div>
  <hr>
  <div>
      <p>div2番目</p>
  </div>
</body>

center・pre・blockquoteタグは、テキストの表示を修飾するために使用するタグです。hrタグは、要素(段落レベル)の間に意味的な区切りがある場合、例えば話題の切り替えや場面の転換などに指定します。

以前のhrタグは、水平線を引くための要素でしたが、現在では表示のための要素から意味論としての要素に変更されました。水平線を引く際は、別途CSSを利用してください。

HTMLタグの確認方法と注意点

ここまでHTMLタグの仕様について見てきましたが、記述したHTMLの確認方法と注意点について解説します。

HTMLタグをWebブラウザで表示する方法

HTMLタグをWebブラウザで表示するには、以下の手順で説明します。

  1. 1.テキストファイルに保存して拡張子をHTML用にする(.htmlや.htm)
  2. 2.表示したいWebブラウザを起動
  3. 3.保存したテキストファイルをWebブラウザ上にドラッグアンドドロップ
  4. 4.HTMLタグで指定した結果を表示

HTMLタグの記載が間違っている場合は、Webブラウザでうまく表示されないので、テキストファイルを修正して再読み込みをして、修正できたかどうかをご確認ください。

HTML作成時の注意点

HTMLの構造を理解し、頭の中で構造を確認しながら作成するようにしましょう。後から見ても構造を分かりやすくするために、適宜改行やコメントなども使用します。

HTMLタグを覚えるには実際に書いてみよう

初心者がHTMLの構造とタグを覚えるには、実際に自分でいろいろと記述してWebブラウザでどのように表示されるのかを確認するのが一番の近道です。思うような表示にならない場合は、原因を突き止めて正しい記述方法を確認していくと、HTML記述の技術力が身に付きます。

Modisでは、派遣エンジニアの案件を多数掲載しています。HTML言語は、WebエンジニアやWebデザイナーには必須のスキルです。HTMLの実践力を身に付けるために、Modisの派遣エンジニアの案件にも挑戦してくださいね。

(2021年10月現在)

Modisで探す、Webエンジニアの仕事

IT・エンジニア派遣に特化したModisでは、HTMLのスキルを生かし、Webシステムの設計や開発に関わるWebエンジニアの求人を多数ご紹介しています。