HTMLの学習を始めたばかりの方がつまずきやすいのが「属性（attribute）」です。
タグだけでは「写真を出すよ！」という命令しかできませんが、属性を追加することで「このフォルダの中の写真を表示して！」といった細かな指示を与えることができます。
本記事では、HTMLにおける属性とは何かを初心者にもわかりやすく解説し、実際のimg・class・aタグを例にして基本的な使い方を紹介します。
属性とは？
HTMLの「属性（attribute）」とは、タグに追加して細かい情報や指示を与える仕組みです。
タグだけでは「ここに画像を表示する」「ここにリンクをつける」といった大まかな役割しか伝わりません。そこで属性を使うことで、どの画像を表示するか・どのページにリンクさせるかといった具体的な指示を出すことができます。
👉 例えば <img> タグは「画像を表示する」という宣言ですが、属性を指定しなければどの画像を出すのかが分かりません。そこで src（画像ファイルの場所）や alt（代替テキスト）の属性を追加することで、はじめて正しく画像が表示されます。
属性の基本ルール
HTML属性の書き方には共通ルールがあります。
１タグの中に書く
２ 属性名と値を = でつなぐ
３ 値は”ダブルクオーテーション”で囲む
👉 属性は「タグの説明書」のような役割を持っている、と覚えておくと分かりやすいです。
よく使われる代表的な属性
１ < img >タグの属性名は src alt
画像を表示するときに必ず使うのが src属性 と alt属性 です。
src：画像ファイルの場所を指定する
alt：画像が表示されなかったときの代替テキスト（SEOにも重要）
↓これは「画像を出すよ！」という命令です。
< img >
でも、どの写真を使うのかが分からないので、写真を表示できません。
2 属性は細かい指示をする
さあ、ここで属性の登場です！
下の図はカレーの写真を出すための要素です↓
要素を解体してみるとこのようになります
もっと噛み砕いて説明するとこのようになります↓
細かい指示を受けることで、「これですね！」と表示させてくれます
➡ 要素の関連記事はこちらから→「 要素 」って何？ ブロック要素とインライン要素を一発で見分ける方法！
➡ 写真の関連記事はこちらから →写真（画像）の表示を理解しよう！<img>タグとは？
どのタグにも使える属性名 class
classは属性の名前になります。
classも属性になりますが、よく見ると、色々なタグにclassが使われているのが分かります
< p >、< h1 >、< div >、< span >などの、どんなタグに使えます。
では、詳しくみていきましょう！
< p >タグで宣言し、 class の属性で細かい指示をします
細かい指示を受けることで表示することができます
< img >タグの属性は、src ・alt ですが、classはどんなタグにも使えます！
・クラスについての関連記事はこちらから→HTMLのclassの使い方！を分かりやすく解説！
< a >タグの属性名は href
リンクを作るときに使うのが href属性 です。
ユーザーがクリックしたときに移動するページのURLを指定します。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
< a >タグは リンク を作るタグです。読んだ人がクリックすると、ほかのページやサイトへ飛べるようにするタグです
➡ 関連記事 → 要素とは？ブロック要素とインライン要素の違い
属性のまとめ
・属性は「タグの中に書く！」
・属性は「タグにくっつける説明書」みたいなもの！
・属性名＝” 値 ” の形で書く
・タグによって使える属性は決まっている
・代表的な属性：src・alt・class・href
属性は タグに追加して細かい指示を与える仕組み
タグと属性を正しく理解することで、HTMLの表現力は大きく広がります。初心者のうちはまず「よく使う属性」から覚えていくのがおすすめです。
コメント