HTMLの属性について

HTML属性とは？

HTMLの属性（attribute）は、タグに追加情報を与えるための仕組みです。
属性は通常、開始タグの中に記述され、名前＝値のペアで指定します。

属性の基本構文

<タグ名 属性名="値">コンテンツ</タグ名>

例：

<a href="https://example.com">リンク</a>

この例では、href が属性名、"https://example.com" がその値です。

よく使われるHTML属性

リンク・画像関連

• href：リンク先のURLを指定（例：<a>）
• target：リンクの開き方（例：_blankで新しいタブ）
• src：画像や動画のファイルパス（例：<img>, <video>）
• alt：画像が表示できないときの代替テキスト
• title：マウスオーバー時に表示される補足説明

スタイル・レイアウト関連

• class：CSSのスタイルを適用するためのクラス名
• id：一意の識別子を与える（JavaScriptなどでも利用）
• style：インラインでスタイルを指定

入力フォーム関連

• type：入力の種類（text、password、submitなど）
• name：フォーム送信時のキーとなる名前
• value：初期値や送信する値を指定
• placeholder：入力欄に薄く表示されるヒント
• required：入力を必須にする
• checked：チェックボックスの初期状態をONに
• disabled：選択や入力を無効にする

メディア・スクリプト関連

• controls：音声・動画プレイヤーの再生コントロール表示
• autoplay：ページ表示時に自動再生
• loop：繰り返し再生
• defer：JavaScriptの実行を後回しにする
• async：非同期でスクリプトを実行

属性の記述ルール

• 属性は開始タグの中に記述する
• 名前="値"の形式で書く（値はダブルクォーテーションで囲む）
• 1つのタグに複数の属性を記述可能（スペースで区切る）

<img src="cat.jpg" alt="ネコ" width="300" height="200">
  

属性とグローバル属性

グローバル属性とは、ほぼすべてのHTMLタグに共通して使える属性のことです。

• id
• class
• style
• title
• lang
• data-*（カスタムデータ属性）

まとめ

• 属性はHTMLタグに「追加情報」を与えるもの
• 形式は 名前="値"
• href, src, class, id などが代表的
• フォームやメディア要素で属性が重要な役割を果たす
• グローバル属性は多くのタグで共通に使える