【HTML】５分で理解するheadタグのすべて

HTML

2020.01.24

headタグは、HTMLで作成された文章に関するメタ情報を記述するためのタグです。ページのタイトルなど、実際にページに表示されることはないものの、ページ全体で保持するデータを定義するためのタグなので重要なタグと言えます。

画面から見えない分、イメージが湧かず少し難易度が高い印象を受けてしますが、基本から学べば意外と簡単に理解することができます。

このページで学べる内容

headタグの役割
headタグの使い方・書き方
headタグの中に記述するべき内容は？

HTML勉強中の方であれば絶対に知っておきたい内容ばかりですので是非最後までご覧ください。

headタグとは？
headタグの使い方・書き方
headタグの中に記述する内容
HTMLを１から学びたい方は・・・

headタグとは？

headタグは、文章全体の情報を定義するためのタグです。例えば、ページのタイトルや言語、ページを書いた人の情報などを定義します。

どういうことかを分かりやすく説明するために、HTML全体の構成を振り返ってみます。ご存じのようにHTMLは、大きく２つの部分から成立しています。

headタグは、ページ全体の情報のうち、読む人の目に入るコンテンツではなく、ページ全体の情報（前提となる情報）を定義していく役割を持ちます。

参考：実際のHTMLコード

<!DOCTYPE html>
<html>
  <head>
<!-- ページ全体の情報 -->
  </head>  
  <body>
    <!-- ページコンテンツ -->
  </body>
</html>

headタグは、ページ全体の情報のうち、読む人の目に入るコンテンツではなく、ページ全体の情報（前提となる情報）を定義していく役割を持ちます。

ここに定義した情報は、例えばGoogleに「こんなページだよ！」というのを伝えるために使われたり、ブラウザに「このページは日本語でできているよ！」というのを伝える役割を持ちます。headタグは、それらのメタ情報を定義するために用いられるタグなのです。

※HTMLの基本ルールを復習したい方はこちらのページをご覧ください。

headタグの使い方・書き方

headタグの書き方について覚えておくべきルールは１つだけです。「htmlタグの後 / bodyタグの前」に記述するだけです。（理解すべきなのは、この後に説明するheadタグ内に記述するタグです。）

コーディング時に注意するのはこれだけです。重要なのは、書く位置ではなくその中にどのような内容を記述していくか？ということです。

headタグの中に記述する内容

いよいよここからが本題です。headタグの中には何を記述すればよいのか？

ここでは、一般的なWebページであれば基本的に埋め込まれている情報を大きく３つに分類して解説していきます。

覚えておきたい「headタグ内に記述する３つのタグ」

titleタグ ⇒必須タグ（超・重要）
metaタグ
linkタグ

titleタグ（タイトルタグ）

titleタグは、その名の通りタイトルを示すタグです。別の言葉言えば、ページの「題名」を定義するタグです。

titleタグは、必須タグなので必ずページ内に一つ設置する必要があります。

titleタグの使い方

<title>ビズドットオンラインのトップページ</title>

使い方は一般的なタグと同様です。属性などは特に指定する必要はありません。このtitleタグで囲ったテキストはブラウザのタブに表示されるようになります。

また、ページ全体の内容を一言で表した内容として認識されるため、Googleの検索エンジンがページの内容を把握するためにも用いられるようです。これらを踏まえ、titleタグは「headタグ内に必ず１つだけ設置する」ようにしましょう。

例）本ページで用いられているtitleタグ

<title>【HTML】５分で理解するheadタグのすべて | ビズドットオンライン</title>

metaタグ（メタタグ）

metaタグは、文字コードやページの作成者、ページの概要説明などを定義することができます。

例

metaタグについては、終了タグが存在しません。「charset」「name」「content」「property」などの主な属性を定義していく形で用います。

※タグの属性について詳しく知りたい方はこちら。

linkタグ

リンクタグは、そのHTMLが参照するCSSファイルの定義やファビコンの定義を行います。

例

本ページで用いられているlinkタグ

<link rel='stylesheet' id='child-style-css' href='https://it-biz.online/wp-content/themes/xeory_extension_child/style.css?ver=5.3.2' type='text/css' media='all'/>

HTMLを１から学びたい方は・・・

HTML/CSSを実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがベストです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。