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

HTMLのcontent属性とは？meta要素での使い方を初心者向けに解説

HTMLにおけるcontent属性は、<meta>要素と組み合わせて使用され、ページに関するメタ情報（メタデータ）の具体的な値を指定するための属性です。name属性やhttp-equiv属性とセットで使われることで、その意味を持つようになります。

content属性の役割

<meta>要素のcontent属性は、HTML文書内にメタ情報を設定するために利用されます。たとえば、以下のような情報を記述できます。

  • ページの説明文（description）：検索結果に表示されるサイト概要
  • キーワード（keywords）：ページに関連する検索キーワード
  • 文字コードやビューポート設定などの各種指定値

つまり、content属性単体では機能せず、「何についての情報か」を示すname属性やhttp-equiv属性と組み合わせることで、初めて意味を持ちます。

content属性の基本構文

content属性の書き方は次のとおりです。

<meta name="属性名" content="テキスト">

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>

コードのポイント

  • name="description"により、このmetaタグが「ページの説明」であることを宣言しています。
  • content="Learn for free"が、その説明文の内容そのものです。この部分が検索エンジンなどに渡されます。
  • content属性はhead要素内のmetaタグにのみ記述でき、body要素内には配置できません。

表示結果

上記のコードを実行すると、ブラウザ上には次のようにリスト形式のチュートリアル一覧が表示されます。

HTMLのcontent属性とは？meta要素での使い方を初心者向けに解説

まとめ

content属性は、meta要素とともにページの説明やキーワードなどのメタ情報を定義する重要な属性です。SEOの観点からも、descriptionの内容を適切に設定することは検索結果のクリック率向上につながります。ぜひ基本的な使い方を押さえておきましょう。

  1. HTMLのrequired属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのrequired属性は、フォームを送信する前に該当要素の入力または選択が必須であることを指定するためのブール型属性です。この属性は、input、select、textarea の各要素に適用できます。required属性が設定されたフィールドが空のままフォームを送信しようとすると、ブラウザが自動的にバリデーションを行い、「このフィールドは必須です」といったエラーメッセージを表示して送信を阻止します。JavaScriptを使わずに簡単な入力チェックを実現できるため、フォーム作成時には非常に便利な属性です。構文（シンタックス）required属性の基本的な構文は以下の通りです。<t

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

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