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

HTMLのタグとは？メタデータの設定方法と主な属性を解説

HTMLの<meta>タグとは

HTMLの<meta>要素は、ページの説明文（description）、キーワード、文書の作者名などのメタデータ（メタ情報）を記述するために使用します。メタデータはページ上には表示されませんが、検索エンジンやWebブラウザなどがページの内容を理解するために利用されます。

<meta>タグは<head>要素内に記述する空要素で、終了タグは不要です。

viewportの設定方法

また、<meta>タグではviewport（ビューポート）を設定することも可能です。これにより、スマートフォンやタブレットなど、各デバイスの画面幅に合わせたWebページの表示サイズを指定できます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta>タグの主な属性一覧

番号属性と説明
1name
プロパティの名前を指定します。任意の値を設定でき、keywords（キーワード）、description（説明文）、author（作者）、revised（更新情報）、generator（作成ツール）などが代表的な例です。
2content
プロパティの値を指定します。
3scheme（非推奨）
content属性で宣言されたプロパティの値を解釈するためのスキームを指定します。現在は非推奨の属性です。
4http-equiv
HTTPレスポンスメッセージヘッダーとして使用します。ページの自動リフレッシュやCookieの設定などに利用でき、値にはcontent-type、expires、refresh、set-cookieなどがあります。
5charset
文書の文字エンコーディングを指定します。HTML5では<meta charset="UTF-8">のように記述するのが一般的です。

<meta>タグの使用例

それでは、<meta>タグを実装したサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Learn for free">
<meta name="keywords" content="Video tutorials, free tutorials, learn, web">
<meta http-equiv="refresh" content="20">
<meta name="author" content="Jack Sparrow">
</head>
<body>
<h2>Tutorials</h2>
<p>Programming tutorials for free:</p>
<ol>
<li>Java</li>
<li>C++</li>
<li>C</li>
<li>C#</li>
</ol>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

HTMLの meta タグとは？メタデータの設定方法と主な属性を解説

  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"