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

HTML

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

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

このページで学べる内容
  • headタグの役割
  • headタグの使い方・書き方
  • headタグの中に記述するべき内容は?

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

スポンサーリンク
スポンサーリンク

headタグとは?

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

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

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

参考:実際のHTMLコード

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

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

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

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

headタグの使い方・書き方

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

blank

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

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

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

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

覚えておきたい「headタグ内に記述する3つのタグ」
  • titleタグ ⇒必須タグ(超・重要
  • metaタグ
  • linkタグ

titleタグ(タイトルタグ)

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

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

titleタグの使い方

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

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

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

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

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

metaタグ(メタタグ)

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

<meta charset="utf-8">


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

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

linkタグ

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

<link rel="stylesheet" href="mycss.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を1から学びたい方は・・・

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

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

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

タイトルとURLをコピーしました