【HTML Living Standard】http-equiv属性の使い方

http-equiv属性の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月26日

基本的な使い方

http-equivプロパティは、Webブラウザに対するHTTPヘッダー相当の指示内容を保持するプロパティです。このプロパティは、HTMLドキュメントの<head>セクションにある<meta>要素でのみ使用され、content属性と組み合わせて機能します。これにより、WebサーバーからのHTTPレスポンスヘッダーと同様の挙動を、クライアント側のHTML記述で実現することが可能になります。

ブラウザは、<meta>要素のhttp-equivプロパティに指定された指示内容とそのcontentプロパティの値を解析し、その情報に基づいてページのレンダリングや動作を調整します。例えば、http-equiv="Content-Type"とcontent="text/html; charset=UTF-8"を組み合わせることで、ページの文字エンコーディングをUTF-8として宣言し、文字化けを防ぐことができます。また、http-equiv="Refresh"とcontent="5;url=https://example.com"と記述すれば、5秒後に指定したURLへ自動的にリダイレクトさせることも可能です。さらに、http-equiv="Cache-Control"を用いることで、ブラウザがページをキャッシュする方法を制御し、常に最新のコンテンツを表示させるといった設定も行えます。

このプロパティは、サーバー側の設定を変更できない共有ホスティング環境や、特定のWebページにだけ詳細な指示を与えたい場合に特に有用です。HTTPヘッダーと同様の機能を提供することで、開発者はより柔軟にWebページの表示や動作をカスタマイズできます。

現代のHTML Living Standardにおいては、文字エンコーディングの指定には<meta charset="UTF-8">のようにcharsetプロパティを直接使用することが推奨されています。しかし、http-equivプロパティは、古いブラウザ（Internet Explorerなど）の互換モード指定や、特定のリダイレクト処理、キャッシュ管理など、依然として特定のユースケースで有効な手段として利用されています。システムエンジニアを目指す上で、このプロパティの働きを理解することは、Web技術の基礎知識として重要です。

公式リファレンス: <meta> http-equiv attribute

構文(syntax)


1<meta http-equiv="refresh" content="3; URL=https://www.example.com/">

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTMLのhttp-equiv="refresh"で自動リロードする


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>http-equiv="refresh" サンプル</title>
7    <!-- 
8        このメタタグは、http-equiv="refresh" を使用して
9        5秒後にページを自動的にリロード（再読み込み）する指示をブラウザに送ります。
10        'content'属性の値は秒数を表します。
11    -->
12    <meta http-equiv="refresh" content="5">
13</head>
14<body>
15    <h1>このページは5秒後に自動的にリロードされます</h1>
16    <p>現在の時刻: <span id="current-time"></span></p>
17
18    <script>
19        // ページがリロードされた時間を表示するためのスクリプト
20        document.getElementById('current-time').textContent = new Date().toLocaleTimeString();
21    </script>
22</body>
23</html>

このHTMLサンプルコードは、<meta>タグのhttp-equiv="refresh"属性を使用して、ウェブページを自動的に再読み込みする基本的な方法を示しています。

http-equiv属性は、ブラウザに対してHTTPヘッダーが通常行うような特定の指示を与えるためのものです。その中でも、"refresh"という値は、ブラウザに対して指定された時間後にページを自動的にリロード（再読み込み）する、または別のURLへリダイレクトするよう命令します。

サンプルコード内の<meta http-equiv="refresh" content="5">という行がこの機能を実現しています。ここでcontent属性に設定されている「5」という数値は、ページが自動的に再読み込みされるまでの秒数を指定します。したがって、このHTMLページは読み込まれてから5秒後に自動的に更新されます。ページ下部に表示される現在の時刻は、実際にリロードが行われたことを視覚的に確認するためのものです。

http-equivはHTML要素の属性であり、プログラミング言語の関数が持つような直接的な引数や戻り値はありません。その振る舞いは、refreshのような属性値と、content属性に指定される秒数やURLといった情報との組み合わせによって制御されます。この機能は、最新情報を定期的に表示したい場合や、一定時間後にユーザーを別のページへ自動的に誘導したい場合などに利用されます。

http-equiv="refresh"は、HTMLのメタタグとして、指定した秒数後にページを自動的にリロードしたり、別のURLへ転送したりする機能です。サンプルコードでは5秒後にページを自動リロードする指示をブラウザに送っています。content属性には秒数を指定します。

この機能の利用には、いくつかの注意点があります。まず、ユーザー体験を大きく損なう可能性があることです。ユーザーがフォーム入力中やコンテンツを読んでいる最中にページが突然リロードされると、入力データが失われたり、集中が途切れたりして、不快感を与えてしまいます。また、アクセシビリティの観点からも推奨されない場合が多いです。

さらに、検索エンジン最適化（SEO）の観点からも、不適切なリダイレクトとして扱われ、ウェブサイトの評価に悪影響を与えるリスクがあります。通常、ページのリダイレクトや自動更新が必要な場合は、ユーザーの操作に柔軟に対応できるJavaScriptや、サーバーサイドのリダイレクト（HTTPステータスコード301や302など）を使用することが推奨されます。どうしてもこの機能を使う場合は、ユーザーに動作を明確に伝え、必要に応じて停止できる選択肢を提供するなど、慎重な実装を心がけてください。

http-equiv属性でページを自動リロードする


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>http-equiv 属性のサンプル</title>
7    <!--
8        http-equiv 属性は、HTTPヘッダーに似た情報をブラウザに指示するために <meta> タグで使用されます。
9        この例では、ページを5秒後に自動的にリロードするよう指示しています。
10        "refresh" の "content" 値は、秒数とオプションでリダイレクト先のURLを指定できます。
11    -->
12    <meta http-equiv="refresh" content="5">
13</head>
14<body>
15    <h1>http-equiv 属性の使用例</h1>
16    <p>このページは、読み込み後5秒で自動的にリロードされます。</p>
17    <p>ブラウザの動作を確認し、http-equiv の効果を理解しましょう。</p>
18</body>
19</html>

http-equiv属性は、HTML文書の<head>要素内で使用される<meta>タグに記述することで、ブラウザに対してHTTPヘッダーに似た情報を伝えるための特別な属性です。これにより、Webサーバーから送信されるHTTPヘッダーがなくても、ページに関する特定の動作をブラウザに指示できます。

この属性自体には直接的な引数や戻り値は存在しません。その挙動は、同じ<meta>タグ内でcontent属性と組み合わせて値を設定することで定義されます。http-equiv属性が「どのような種類の指示を与えるか」を示し、content属性が「その指示の具体的な内容」を指定する役割を持ちます。

サンプルコードでは、<meta http-equiv="refresh" content="5">と記述されています。これは、ブラウザに対して「このページを読み込んでから5秒後に自動的にリロードしなさい」と指示しています。ここでrefreshはページの自動更新を意味し、content="5"はその更新までの秒数を指定しています。例えば、content="5;url=https://example.com"のように記述すれば、5秒後に指定されたURLへリダイレクトすることも可能です。このようにhttp-equiv属性は、Webページの表示や動作を制御する上で重要な役割を果たします。

http-equiv属性は<meta>タグでのみ使用し、ブラウザにHTTPヘッダーに似た特別な指示を与えるものです。サンプルコードのrefresh指定は、ページを自動的にリロードまたは指定URLへリダイレクトしますが、安易な使用はユーザー体験を損なう可能性があるため注意が必要です。特に、意図しない画面遷移や入力中のデータ消失につながる場合があります。ウェブページの自動更新やリダイレクトは、必要な場合でもユーザーに通知したり、JavaScriptなどより柔軟な方法で制御したりすることも検討しましょう。また、検索エンジンの評価に影響を与える可能性や、アクセシビリティの観点からも推奨されない場合があるため、利用する際はその影響を十分に考慮することが大切です。