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

HTMLページでheadタグを使う理由とは？基本的な使い方を解説

<head>タグは、HTMLページ内のすべてのヘッダー要素を格納するためのコンテナです。画面上に直接表示される本文（body）とは異なり、文書自体に関する情報＝メタデータを定義する重要な役割を担っています。

<head>…</head>タグの追加方法はとても簡単です。この中には、文書のタイトル（<title>）、メタ情報（<meta>）、スタイルの定義（<style>や<link>）、スクリプトの読み込み（<script>）などを記述します。

特に覚えておきたいのは、<title>…</title>タグは必ず<head>…</head>タグの内部に配置するという点です。タイトルはブラウザのタブや検索結果、ブックマークなどに表示されるため、SEOの観点からも非常に重要です。

HTMLページでheadタグを使う理由とは？基本的な使い方を解説

headタグの主な子要素

  • <title>：文書のタイトルを指定（必須）
  • <meta>：文字コード、説明文、ビューポートなどのメタ情報を指定
  • <link>：外部CSSファイルを読み込む
  • <style>：ページ内にCSSを直接記述する
  • <script>：JavaScriptファイルの読み込みや記述

使用例

以下のコードを実行して、HTMLページに<head>タグを追加する方法を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML head tag</title>
   </head>
   <body>
      <h2>Working with HTML head tag</h2>
      <p>This is demo text.</p>
      <p>Displaying how head tag is used in HTML. Add title in it or meta information about the document.</p>
   </body>
</html>

実行結果

HTMLページでheadタグを使う理由とは？基本的な使い方を解説

  1. HTMLのbタグとは？使い方とサンプルコードをわかりやすく解説

    HTMLの<b>タグは、テキストを太字にして視覚的に強調表示するための要素です。ただし、HTML5の仕様では、意味的に重要なキーテキストを表す場合には、<strong>タグの使用が推奨されています。 それでは、実際にHTMLで<b>タグを実装した具体例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>Reference Links</h2> <a href="https://www.tutorialspoint.com/onl

  2. HTMLのdlタグとは？記述リストの作成方法をサンプルコード付きで解説

    HTMLのdlタグとは HTMLの<dl>要素は、記述リスト（description list）を定義するために使用されるタグです。HTML5では<dl>は「記述リスト」を表しますが、HTML4では「定義リスト（definition list）」として扱われていました。この違いを理解しておくと、より適切なマークアップができるようになります。 記述リストは、用語とその説明をセットで表示したい場合に便利な要素で、用語集、FAQ、メタデータの表示など、さまざまな場面で活用できます。 dlタグの基本構造 <dl>タグは、以下の2つの要素と組み合わせて使用します。