HTMLドキュメントにメタデータを含める方法|metaタグの属性と使い方を解説
HTMLの<meta>タグは、HTMLドキュメントに関するメタデータ(文書情報)を宣言するために使用されます。メタデータはページの
metaタグの主な属性一覧
metaタグで使用できる主な属性とその役割は以下の通りです。
| 属性 | 値 | 説明 |
|---|---|---|
| name | author description keywords generator revised others |
プロパティ(メタ情報)の名前を指定します。 |
| content | テキスト | http-equiv属性またはname属性に関連付けるメタ情報を定義します。 |
| http-equiv | content-type expires refresh set-cookie |
content属性の内容をHTTPヘッダーに関連付けます。 |
| scheme | テキスト | content属性の値を解釈するために使用する形式(スキーム)を定義します。 |
なお、scheme属性はHTML5では廃止されているため、現在のWeb制作ではほとんど使用されません。また、name属性には「viewport」を指定してレスポンシブ対応の設定を行うことも一般的です。
metaタグの記述例
以下のコードを実行して、HTMLドキュメントにメタデータを含める方法を確認してみましょう。
<html> <head> <title>HTML meta tag</title> <meta name = "keywords" content = "HTML, meta tag, metadata" /> <meta name = "description" content = "Description of the document" /> <meta http-equiv = "refresh" content = "10" /> </head> <body style = "background-color:gray"> Document content goes here </body> </html>
この例では、name属性を使ってキーワード(keywords)と文書の説明(description)を指定しています。さらに、http-equiv属性に「refresh」を設定することで、10秒後にページが自動的に再読み込みされるようになっています。
-
HTMLの<meta>タグとは?メタデータの設定方法と主な属性を解説
HTMLの<meta>タグとはHTMLの<meta>要素は、ページの説明文(description)、キーワード、文書の作者名などのメタデータ(メタ情報)を記述するために使用します。メタデータはページ上には表示されませんが、検索エンジンやWebブラウザなどがページの内容を理解するために利用されます。<meta>タグは<head>要素内に記述する空要素で、終了タグは不要です。viewportの設定方法また、<meta>タグではviewport(ビューポート)を設定することも可能です。これにより、スマートフォンやタブレットなど、各デバイス
-
HTMLリンク(ハイパーリンク)の基本!aタグの構文とtarget属性の使い方を解説
HTMLのリンク(ハイパーリンク)とは、クリックすると別のドキュメントへジャンプできる要素のことです。Webページ同士をつなぐ役割を担っており、HTMLにおいて最も重要な機能の一つといえます。基本構文HTMLリンクは、<a>タグを使って以下のように記述します。<a href=URL target=値>リンクテキスト</a>href属性には、リンク先のアドレス(URL)を指定します。ローカルファイルへのパスでも、外部サイトのURLでも指定可能です。また、target属性は、リンク先のドキュメントをどこに開くかを指定する属性で、以下の4つの値を設定できます。値説