PR

【HTML】headタグ:意味と使い方・重要性を1分で解説

CSS

headタグは、HTMLで作成された文章に関するメタ情報を記述するためのタグです。

ページのタイトルなど、実際にページに表示されることはないものの、ページ全体で保持するデータを定義するためのタグなので重要なタグと言えます。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル名</title>
  </head>
  <body>
    <!-- ここに本文を記述 -->
  </body>
</html>

このページではheadタグが持つ意味と役割、重要性についてわかりやすく解説します。

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

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の1つです。是非最後までご覧ください。

スポンサーリンク

HTML:headタグとは?

HTMLの<head>タグは、ウェブページのメタデータを定義するための重要な要素です。

メタデータは、ウェブページの情報を表すデータで、ブラウザや検索エンジンに対してそのページの概要や設定を伝えます。

具体的には "ページのタイトル" や "言語" 、"ページを書いた人の情報" などが含まれます。

HTMLの全体構成は以下の通り、ブラウザに表示されない「文書のメタデータ」を示す部分と、実際のコンテンツを示すbody部分に分かれます。

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

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

headタグの使い方・書き方

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

headタグは通常、htmlタグの後 / bodyタグの前に記述します。

blank

参考 HTMLの書き方:基本ルール

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

以下に一般的な<head>タグの使用例を記載します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ウェブページのタイトル</title>
  <meta name="description" content="このページの簡潔な説明">
  <meta name="keywords" content="キーワード1, キーワード2, キーワード3">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <!-- ここにページのコンテンツが入ります -->
</body>
</html>

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

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

titleタグ(タイトルタグ)

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>ウェブページのタイトル</title>
</head>
<body>
  <!-- ここにページのコンテンツが入ります -->
</body>
</html>

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

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

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

metaタグ(メタタグ)

以下は、一般的なHTMLドキュメントの<head>タグ内で使用される一連のmetaタグのサンプルコードです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This is a sample meta description.">
    <meta name="keywords" content="sample,meta,tags,html">
    <meta name="author" content="Your Name">
    <title>Sample HTML Document</title>
  </head>
  <body>
    <!-- HTML document body goes here -->
  </body>
</html>
  • <meta charset="UTF-8">
    このメタタグは、HTMLドキュメントのエンコーディング(文字コード)を指定するために使用されます。ここではUTF-8が指定されています。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    このメタタグは、デバイスのビューポートの設定を指定するために使用されます。ここでは、デバイスの幅をビューポートの幅と同じにし、初期スケールを1.0に設定しています。これにより、デバイスの画面に最適な表示が可能になります。
  • <meta name="description" content="This is a sample meta description.">
    このメタタグは、HTMLドキュメントの説明を提供するために使用されます。検索エンジンは、この説明を使用して、HTMLドキュメントの内容を要約するために使用します。
  • <meta name="keywords" content="sample,meta,tags,html">
    このメタタグは、HTMLドキュメントのキーワードを提供するために使用されます。これらのキーワードは、検索エンジンがHTMLドキュメントをインデックス化する際に使用されます。ここでは、サンプル、メタ、タグ、およびHTMLがキーワードとして指定されています。
  • <meta name="author" content="Your Name">
    このメタタグは、HTMLドキュメントの著者を提供するために使用されます。これは、ドキュメントが公開された場合に、著者の識別に役立ちます。

参考 HTMLタグの属性

linkタグ

HTMLの<link>タグは、HTMLドキュメント内で外部ファイル(CSSファイルやファビコンなど)を読み込むために使用されます。以下は一般的な<link>タグのサンプルコードです。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <title>Sample HTML Document</title>
  </head>
  <body>
    <!-- HTML document body goes here -->
  </body>
</html>
  1. <link rel="stylesheet" href="style.css">
    この<link>タグは、HTMLドキュメントにスタイルシートを適用するために使用されます。href属性には、スタイルシートファイルへのパスが指定されます。rel属性には、このリンクがHTMLドキュメントとスタイルシートファイルの間の関係を定義するために使用されます。ここでは、rel="stylesheet"が指定されています。

関連 CSSを読み込む方法

  1. <link rel="icon" type="image/png" href="favicon.png">
    この<link>タグは、HTMLドキュメントにファビコンを追加するために使用されます。
    ファビコンは、Webサイトのタブやブックマークバーなど、ブラウザの各種場所に表示される小さなアイコンです。href属性には、ファビコンへのパスが指定されます。type属性には、ファビコンのMIMEタイプが指定されます。ここでは、PNG形式のファビコンであることを示すため、type="image/png"が指定されています。

参考 MIMEタイプとは?

headタグの意味と重要性
  • ウェブページのタイトル
    <head>タグの中には、<title>タグを使用してページのタイトルを指定します。タイトルはブラウザのタブやブックマーク、検索エンジンの結果ページで表示されるため、ユーザーがページの内容を理解しやすくする役割があります。
  • キャラクターセットの指定
    <head>タグ内で、<meta charset="UTF-8">のように指定することで、ページで使用される文字のエンコーディングを設定できます。これにより、ブラウザが正しい文字セットでコンテンツを表示できるようになります。
  • メタタグによるSEO対策
    検索エンジン最適化(SEO)に重要な役割を果たすメタタグも<head>タグ内に配置されます。これには、<meta name="description">タグでページの説明を指定したり、<meta name="keywords">タグで関連キーワードを設定したりできます。
  • リンクタグによる外部リソースの参照
    <head>タグ内で、<link>タグを使用してCSSファイルやファビコン(ブラウザのタブに表示される小さなアイコン)などの外部リソースを参照できます。これにより、ページのデザインや構造を制御することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ウェブページのタイトル</title>
  <meta name="description" content="このページの簡潔な説明">
  <meta name="keywords" content="キーワード1, キーワード2, キーワード3">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <!-- ここにページのコンテンツが入ります -->
</body>
</html>

Webエンジニアになりたい方は→完全無料のHTMLロードマップ

Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の1つがHTMLです。

以下のページでは、そもそもHTMLって何?何のために学習するの?という疑問に回答しつつ、HTMLを学習するためのロードマップ(全20記事)を整理しています。

以下のページの内容をマスターすればHTMLの基本はOK。Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。

このWebサイトは現役のエンジニアが以下3点を目的として運営しています。

  1. 勉強:一度理解した内容を忘れないように。
    → アウトプットは「最強のインプット」である! 
  2. 備忘:忘れたとしても後から見返せるように。
    → 未来の自分への「お手紙」を書いています。 
  3. 共有:〇〇ってこうだったんだ!の感動をシェアできるように。
    → あなたの知識は誰かにとっての「価値ある情報」です。 

副業ブログの始め方はこちらから

スポンサーリンク
CSSHTMLWEBデザイン
シェアする
ビズドットオンラインをフォローする
blank
ビズドットオンライン
タイトルとURLをコピーしました