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

HTMLのmeta要素のcontent属性とは？基本構文と使い方を解説

meta要素のcontent属性とは

HTMLの<meta>要素におけるcontent属性は、HTMLドキュメント内にメタ情報（メタデータ）を設定するために使用される属性です。name属性と組み合わせることで、ページの説明（description）やキーワード（keywords）といった情報を指定できます。

検索エンジンやブラウザは、このメタ情報を参照してページの内容を把握します。そのため、SEO（検索エンジン最適化）の観点からも重要な属性といえます。

content属性の基本構文

content属性の書式は以下のとおりです。

<meta content="テキスト">

「テキスト」の部分に、設定したいメタ情報を記述します。

content属性の使用例

それでは、<meta>要素のcontent属性を実装した具体的な例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Learn for free">
</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要素のcontent属性とは？基本構文と使い方を解説

コードの解説

上記の例では、<head>要素内に次のように<meta>タグを記述し、ページの説明（description）を設定しています。

<head>
<meta name="description" content="Learn for free">
</head>

メタ情報である説明文は、<meta>要素のcontent属性を使って次のように指定します。

content="Learn for free"

name属性に「description」を指定することで、「このページは無料で学習できるチュートリアルを提供している」という情報を、検索エンジンやSNSなどに伝えることができます。このようにcontent属性は、name属性で指定した種類のメタ情報の実際の値を定義する役割を担っています。

  1. HTMLのtabindex属性とは？タブ移動の順序を制御する方法を解説

    HTMLのtabindex属性は、HTMLドキュメント内の要素がTabキーでフォーカスされる順序（タブ移動の順番）を定義するための属性です。tabindexはグローバル属性に分類されるため、すべてのHTML要素に対して使用することができます。通常、Tabキーを押すと要素はHTMLの記述順にフォーカスされますが、tabindex属性を指定することで、この順序を自由にコントロールできます。値には整数を指定し、数値が小さいものから順にフォーカスされます。tabindex属性の値について正の数（1以上）：指定した数値の順序でタブ移動が行われます0：HTMLの記述順にフォーカスされます（デフォルトの挙動

  2. HTMLのonwheelイベント属性とは？使い方とサンプルコードをわかりやすく解説

    onwheelイベント属性は、ユーザーがHTML要素の上でマウスホイールを上下に動かしたときに発生し、指定されたスクリプト（JavaScript）を実行します。本記事では、HTMLドキュメントにおけるonwheelイベント属性の基本的な使い方を、サンプルコードと実行結果つきでわかりやすく解説します。 構文 onwheelイベント属性の基本的な記述方法は以下の通りです。 <tagname onwheel="script">コンテンツ</tagname> それでは、HTMLのonwheelイベント属性の具体的な使用例を見ていきましょう。 使用例 以下のサ