【HTML】headタグの基本や属性一覧、書き方例をすべて紹介

（最終更新日：2023年6月）

✔以下の疑問を持つ方へ向けた記事となります

「HTMLの書き方はどうすればよいのだろうか？」
「HTMLの書き方を具体的に知りたい」
「HTMLを書くための実例が見てみたい」

✔この記事で得られる知識

HTMLの書き方の基本
具体的なHTMLの書き方とその応用
HTMLを書く実例

本記事では、HTMLの書き方の基本から、様々な要素を使った応用の仕方まで、実例を交えて詳しく解説します。

ぜひ最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

headタグの意味と役割

こちらでは、HTMLのheadタグの意味と役割についてお伝えしていきます。

このタグについて理解することは、ウェブページの設計と構築において非常に重要です。

そのため、具体的には以下の内容を説明します。

HTMLのドキュメント構造：headとbody
headタグの重要性と基本的な理解

HTMLのドキュメント構造：headとbody

HTMLのドキュメントは大きく二つのセクション、headとbodyに分けられます。

この二つは全く異なる役割を持っています。

headタグはHTMLドキュメントのメタ情報を持つ部分で、以下のようなブラウザにとって重要な情報が入ります。

ページのタイトル
CSSへのリンク
文字のエンコード方法

一方、bodyタグはウェブページの主要なコンテンツを含む部分で、ユーザーに直接表示される情報がここに記述されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- headタグ部分（メタ情報を記述、表示されない） -->
</head>
<body>
  <!-- bodyタグ（コンテンツを記述、表示される -->
</body>
</html>

headタグの重要性と基本的な理解

headタグは、ウェブページの重要な部分であり、ブラウザや検索エンジンがページをどのように解釈するかを制御します。

例えば、headタグ内のtitle要素はブラウザのタブに表示され、ユーザーがそのページが何であるかを一目で理解するのに役立ちます。

また、meta要素を使ってページの説明を提供することで、検索エンジンの結果ページに表示されるスニペットを制御することができます。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページのタイトル</title>
</head>

これらの要素はウェブページの可視性とユーザビリティに大きく影響を与えるため、headタグの適切な利用はウェブ開発において重要なスキルとなります。

headタグ内に含まれる要素とその詳細

headタグにはさまざまな要素が含まれ、それぞれがページの異なる側面を制御します。

これらの要素を理解して、より思い通りにページを制御しましょう。

具体的には以下の内容を説明します。

titleタグ：ウェブページの名前付け
metaタグ：文字コードとその他のメタデータ
言語設定：文書の主要な言語の設定
linkタグ：ページのアイコン設定とスタイルシートへのリンク
scriptタグ：JavaScriptの適用

titleタグ：ウェブページの名前付け

titleタグはウェブページに名前を付けるためのもので、ブラウザのタブや検索エンジン結果のページに表示されます。

良好なtitleタグは、そのページが何についてのものなのかを明確に示すべきです。

例えば、”ホームページ | 会社名”や”プロダクト名 | 会社名”といった形式が一般的です。

<title>ホームページ | 会社名</title>

metaタグ：文字コードとその他のメタデータ

metaタグはさまざまなメタデータを提供するためのもので、以下を指定します。

文字コードの指定：charset
ページの説明：description
キーワード指定：keywords

文字コードの指定は特に重要で、これによりブラウザが正しくテキストを解釈できます。

<meta charset="UTF-8">
<meta name="description" content="ページの説明文をここに入力">
<meta name="keywords" content="キーワード1, キーワード2, キーワード3">

また、ページの説明は検索エンジンの結果ページでスニペットとして表示され、ユーザーがそのページが何であるかを理解するのに役立ちます。

言語設定：文書の主要な言語の設定

ウェブページの主要な言語は、htmlタグ内のlang属性で設定します。

この設定は検索エンジンやスクリーンリーダーがページを適切に解釈するのに重要です。

例えば、日本語のページであれば、htmlタグは以下のようになります。

<html lang="ja">

linkタグ：ページのアイコン設定とスタイルシートへのリンク

linkタグは、主に外部のリソースへのリンクを提供。

favicon（ブラウザタブに表示されるアイコン）の設定
CSSファイルへのリンクなど

faviconの設定はウェブサイトのブランドイメージを強化するために重要で、CSSファイルへのリンクはページのデザインとレイアウトを制御します。

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">

scriptタグ：JavaScriptの適用

scriptタグは、JavaScriptをHTMLページに組み込むために使用。

これにより、ユーザーのインタラクションに対応した動的な機能をページに追加できます。

scriptタグはHTML文書のどこにでも配置できますが、ページの読み込み速度を最適化するためには通常、bodyタグの終わり近くに配置します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="このウェブページは、ユーザーの名前を入力して挨拶するサイトです。">
  <title>挨拶サイト</title>
</head>
<body>
  <label for="name">名前を入力してください：</label> 
  <input type="text" id="name">
  <button onclick="sayHello()">挨拶する</button>
  <script>
    function sayHello() {
      var name = document.getElementById("name").value;
      alert("こんにちは、" + name + "さん！");
    }
  </script>
</body>
</html>

headタグとSEOの関連

headタグは、SEO（検索エンジン最適化）に大きな影響を与える要素でもあります。

検索エンジンはheadタグ内の情報を用いて、ページの内容を理解し、それを適切な検索結果として表示するからです。

SEOとメタデータ：検索エンジン最適化への対応
メタデータと検索エンジン：descriptionの扱い

SEOとメタデータ：検索エンジン最適化への対応

メタデータは、SEOにとって重要な役割を果たします。

とくにtitleタグとmeta descriptionは、検索エンジンの結果ページ（SERP）での表示に大きな影響を与えます。

適切に設定し、あなたのサイトがどんなものなのかを正確に提供しましょう。

メタデータと検索エンジン：descriptionの扱い

meta descriptionはページの内容を要約したもので、検索エンジンの結果ページに表示されます。

これはページについての短い説明で、ユーザーにページの内容を伝えるための重要な手段です。

ただし検索エンジン自体は、meta descriptionを直接的なランキング要因としては扱いません。

ユーザーへ直接影響を与えるため、間接的にページパフォーマンスに影響を及ぼすとされています。

一般的には150文字前後で、そのページが提供する内容や価値を簡潔かつ具体的に伝えるのが良いとされています。

headタグの効果的な利用とベストプラクティス

headタグを効果的に使用するためには、その中に含まれる各要素の適切な活用が重要です。

要素自体やその配置方法など具体的に見ていきましょう。

headタグの書き方：一般的なルールとヒント
headタグとCSS/JavaScriptの組み合わせ
headタグ内の要素一覧とその属性

headタグの書き方：一般的なルールとヒント

headタグは、HTML文書の最初の部分に位置します。

titleタグは、必ず含めるべき要素で、ページの主題を示すことが必要です。

また、metaタグは文字コードの指定や、ページの説明(description)、キーワードの指定などに使用されます。

headタグとCSS/JavaScriptの組み合わせ

CSSとJavaScriptは、headタグ内に含められます。

CSSは、linkタグを用いて外部ファイルとして、またはstyleタグを用いて内部に直接記述できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 外部ファイル -->
  <link rel="stylesheet" href="styles.css">
  <!-- 直接記述 -->
  <style>
    h1 {
      color: blue;
      font-size: 24px;
      text-align: center;
    }
    
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>ようこそ！</h1>
  <p>このページはスタイルが適用されています。</p>
</body>
</html>

JavaScriptはscriptタグを用いて同様に取り扱えます。

ただし、JavaScriptはページの読み込み速度に影響を及ぼす可能性があるため、bodyタグの最後に配置するのが一般的です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="このウェブページにはJavaScriptによる動的な機能が含まれています。">
  <title>JavaScriptページ</title>
</head>
<body>
  <h1>JavaScriptの例</h1>
  <p id="message">クリックしてメッセージを表示します。</p>
　<button onclick="showMessage()">クリック</button>
  <script>
    function showMessage() {
      var messageElement = document.getElementById("message");
      messageElement.innerHTML = "こんにちは！";
    }
  </script>
</body>
</html>

headタグ内の要素一覧とその属性

headタグ内の要素は、特定の目的を持っています。

例えば、titleタグはページのタイトルを定義し、metaタグはページのメタデータを定義します。

以下がその一覧と例文です。

要素名	説明	例
`<meta>`	メタデータを指定するための要素	`<meta charset="UTF-8">`
`<title>`	ページのタイトルを指定する要素	`<title>ウェブページのタイトル</title>`
`<link>`	外部リソースへのリンクを提供する要素	`<link rel="stylesheet" href="styles.css">`
`<script>`	JavaScriptコードを組み込むための要素	`<script src="script.js"></script>`
`<style>`	CSSスタイルを直接指定するための要素	`<style> body { background-color: lightblue; } </style>`
`<base>`	ページ内の全てのURLのベースとなるURLを指定	`<base href="https://example.com/">`
`<meta name="description">`	ページの説明を指定するための要素	`<meta name="description" content="このページの説明文">`
`<meta name="keywords">`	ページのキーワードを指定するための要素	`<meta name="keywords" content="キーワード1, キーワード2">`
`<meta name="viewport">`	モバイルデバイスのビューポートを指定	`<meta name="viewport" content="width=device-width">`
`<style scoped>`	スコープ付きのCSSスタイルを指定する要素	`<style scoped> p { color: red; } </style>`