目次
第1章: はじめに
この章の目的
本記事は、ホームページ制作でよく使うHTMLの「属性」について、わかりやすく説明します。タグだけでは表現できない細かな指定方法を学びたい初心者向けです。
属性とは何か
属性とは、HTMLのタグに付ける追加の情報です。たとえば、リンクの行き先を指定するhref、画像ファイルを示すsrc、画像の説明を入れるaltなどがあります。属性を付けると、要素の見た目や動き、動作先などを細かく制御できます。
日常の例でイメージ
タグは「家具」、属性はその家具に付ける「ラベル」と考えてください。椅子（タグ）に「色：青」「素材：木」などラベル（属性）を付けると、より具体的になります。ウェブでも同じで、属性を使うとブラウザが正しく表示や処理を行います。
本記事の読み方
これから、属性の基本ルール、タグごとの違い、よく使う属性の役割を順に解説します。実例を多く載せるので、手を動かしながら理解を深めてください。
HTMLの「属性」とは何か？ホームページ制作での役割
属性とは
HTMLの属性は、タグ（要素）に追加の情報を与える小さな指示です。タグだけだと「これは画像」「これはリンク」という役割しか伝えられませんが、属性を付けると「どの画像を表示するか」「リンク先はどこか」など具体的になります。例: 
。
属性が果たす主な役割
- 表示する内容の指定（srcやhrefなど）。
- 見た目や動きの制御（classやidを通じてCSS/JavaScriptと連携）。
- アクセシビリティの向上（altやaria属性）。
- 検索エンジンへの情報提供（altやtitleの適切な記述）。
具体例と実務でのポイント
- 画像: srcでファイル、altで代替説明を必ず書きます。視覚障害者や読み上げソフトに重要です。
- リンク: hrefで行き先を指定します。新しいタブで開く際は target=”_blank” と rel=”noopener” を組み合わせます。
- フォーム: nameやvalueでサーバー送信の鍵になります。
属性は小さな要素ですが、正しく使うと見た目・動作・使いやすさに大きく影響します。最初から意識して書くと、制作と保守が楽になります。
属性の基本構造と書き方ルール
基本構造
HTMLの属性は開始タグの中に書きます。基本形は「属性名=”属性値”」です。たとえばリンクなら
このように、タグ名の直後に属性を書きます。
書き方のルール
- 属性は必ず開始タグ内に書きます（終了タグやテキストの外ではありません）。
- 属性名と属性値は「=」でつなぎ、属性値はダブルクオーテーションで囲みます。ここではダブルクオーテーションを推奨します。
- 複数の属性はスペースで区切って並べられます。順序は普通は影響しません。
- 属性名は小文字で書くのが一般的です。
- 同じ属性を同じタグに二度書かないでください。上書きや動作の不整合が起きます。
よくある注意点
- boolean属性（例：checked、disabled）は値を省略して書くことが多いです。例：
- 属性値にダブルクオーテーションを含めたいときは、"に置き換えるか、運用上はシングルクオーテーションを使う方法もあります。
例：リンク
タグごとに異なる属性と「できること」の違い
HTMLでは、タグごとに使える属性が決まっています。属性はそのタグの振る舞いや見た目、外部とのつながり方を変えます。ここではよく使うタグを例に、どんなことができるかを丁寧に説明します。
（リンク）
- 主な属性: href, target, rel, title
- できること: hrefでリンク先URLを指定し、target=”_blank”で新しいタブで開きます。rel=”noopener”はセキュリティ対策です。
- 例: 例へ
![]()
（画像表示）
- 主な属性: src, alt, width, height, loading
- できること: srcで画像ファイルの場所を指定し、altで代替テキストを用意します。width/heightで表示サイズを指定できます。loading=”lazy”で遅延読み込みします。
- 例:
（入力欄）
- 主な属性: type, name, placeholder, value, required, checked, disabled
- できること: typeで入力種別を決め、nameが送信時の鍵になります。placeholderは薄い説明文、requiredで必須にできます。
- 例:
