HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのhead要素の使い方を徹底解説!基本から実例まで

この記事では、WebサイトにおけるHTMLの<head>要素の使い方をわかりやすく解説します。

HTMLの<head>要素は、ページタイトル、スタイル、スクリプトなど、Webページに関するメタデータ(情報)を格納するためのコンテナです。

<head>要素の中身は、サイト訪問者のためというよりも、主にブラウザなどのマシンによって読み取られ、処理されるものだと覚えておきましょう。

なお、<head>要素は、ページ上部のヘッダー領域を表す<header>要素とは役割がまったく異なるため、混同しないよう注意してください。

head要素の配置場所

<head>要素は、<html>開始タグの直後、かつ<body>開始タグの直前に配置します。

<!DOCTYPE html>
<html>
  <head>
    <!-- マシン処理向けのメタデータを格納 -->
  </head>
  <body></body>
</html>

<head>要素内に配置できる主なHTML要素は以下の通りです。

  • <title>
  • <link>
  • <style>
  • <meta>
  • <script>
  • <base>
  • <noscript>

具体例

ここからは、よく使われるメタデータ要素を組み合わせた<head>要素の具体的な使用例を紹介します。

<title>要素

<title>要素は、HTMLドキュメントのタイトルを定義します。ここで指定したタイトルは、ブラウザのページタブに表示されます。

<!DOCTYPE html>
<html>
  <head>
    <title>ドキュメントのタイトル</title>
  </head>
  <body></body>
</html>

ちなみに、任意のWebサイトのページタブにマウスカーソルを重ねて数秒間そのままにすると、完全なページタイトルを表示した小さなポップアップが現れます。ぜひ試してみてください。

<style>要素

<style>要素には、CSSで記述したHTMLドキュメントのスタイル情報(フォント、余白、色、アニメーションなど)を直接埋め込むことができます。

<!DOCTYPE html>
<html>
  <head>
    <title>ドキュメントのタイトル</title>
    <style type="text/css">
      body {
        background-color: red;
      }

      p {
        font-size: 18px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body></body>
</html>

現在の主流となっているのは、<link>要素を使って外部CSSスタイルシートを読み込む方法です。HTMLとCSSを分離できるため、コードの管理がしやすくなります。

<!DOCTYPE html>
<html>
  <head>
    <title>ドキュメントのタイトル</title>
    <link href="/styles/main.css" rel="stylesheet" />
  </head>
  <body></body>
</html>

覚えておきたいポイント: 同じドキュメント内で<style>要素と<link>要素を併用する場合、スタイルは記述した順番に適用されます。CSSにはカスケード(段階的な上書き)の仕組みがあるため、同じHTML要素を対象としたスタイルが複数あるときは、下に書かれたものほど優先されます。

<script>要素

<script>要素は、次の2つの方法でJavaScriptを実行するために使われます。

  1. JavaScriptのコードをドキュメント内に直接記述する(<style>要素と同じ要領)
  2. src属性を使って外部のJavaScriptファイルを読み込む

JavaScriptコードをドキュメント内に直接埋め込む例:

<!DOCTYPE html>
<html>
  <head>
    <title>ドキュメントのタイトル</title>
    <script>
      // 背景色を赤に変更する
      document.body.style.backgroundColor = "red"
    </script>
  </head>
  <body></body>
</html>

外部のJavaScriptファイルを読み込む例:

<!DOCTYPE html>
<html>
  <head>
    <title>ドキュメントのタイトル</title>
    <script src="/scripts/main.js"></script>
  </head>
  <body></body>
</html>

<meta>要素

<meta>要素は、文字エンコーディング、スマートフォン対応のためのビューポート設定、検索エンジン向けのページ説明など、ページに関するさまざまな情報を指定できます。

<!DOCTYPE html>
<html>
  <head>
    <title>ドキュメントのタイトル</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ページの説明文">
  </head>
  <body></body>
</html>

まとめ

<head>要素は一見地味な存在ですが、ページタイトルの表示、デザインの適用、JavaScriptの動作など、Webページの土台となる重要な役割を担っています。<header>要素との違いにも注意しながら、正しく活用しましょう。

  1. HTMLのrequired属性とは？フォームの必須入力チェックを実装する方法

    HTMLのrequired属性は、フォーム送信前にその要素（フィールド）への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンがクリックされると、ブラウザは自動的に「このフィールドに入力してください（Please fill out this field）」というエラーメッセージを表示し、フォームの送信は失敗します。 JavaScriptを使わずに、HTMLだけで簡単なバリデーション（入力チェック）を実現できるのが大きな特徴です。 required属性を使用できる要素 required属性は、以下の3つのフォーム部品に対して使用できます。 <

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値