HTMLの属性とは？わかりやすく解説【よく使う属性一覧も】

HTMLについて勉強し始めると、属性という言葉が出てきます。属性とは一体どのような意味合いを持ち、HTMLの中でどのような役割を担っているのでしょうか。ここではHTMLの属性について、意味や役割、書き方や種類などを初心者の方にも分かりやすく解説。また、HTMLの属性に使用されている英語の意味も一緒に覚えて、効率よく学べるよう紹介しています。

HTML属性とは？

HTML言語を構成する要素の一つ

HTML属性とは、Web上にあるサイトなど、HTMLで構築されたWebページに含まれる要素の一つ。ホームページ・Web制作には欠かせないものです。

未経験からWeb制作やWebデザインを習得するなら、プログラミングスクールを活用して短期間でマスターしてしまうのもおすすめです。中でもTechAcademyは、現役エンジニアがマンツーマンで、オンライン上いつでもどこでも質問を受け付けてくれるのでとても親切。一週間の無料体験があるので、どんなものか試してみるのも良いですね。

HTML属性の役割

ネット上に表示したい内容に仕掛けや飾り付けを行う

私たち人間が、コンピューターが理解できるHTML言語を書くことにより、インターネット上で様々な表現が可能です。HTMLはコンピューター言語の中でも、人間が書いた文章構造の内容をコンピューターへ伝えることに特化。そして、HTML言語に属性を与えることで、文章内に画像を表示したり、他サイトへのリンクを貼ることができます。

HTML属性の書き方

属性名に設定したい内容をイコールで結んで閉じるだけ

他のサイトへ飛ぶリンクを設定

属性にはそれぞれ名前があります。属性名はHTMLタグの後ろに、半角スペースを入れて記述。あとは等号で属性値を結び、同じタグで閉じるだけです。属性値の部分では、設定したい内容をダブルクォーテーション( ” )で囲みます。今回の例では、「href属性」という名前の属性を使用し、属性値にはリンク先のURLが入力されていますね。

属性を複数追加することも可能

画像を表示させる設定

先程と同じ要領で属性を追加します。使用するのは「src属性」です。あとは属性値に画像のアドレス（保存先）を入力することで、Web上に画像が表示されるようになりますよ。「src」は情報源を意味する「source（ソース）」の略。属性と属性値の関連性については、属性名に使用されている英語の意味を覚えることで、より理解が深まりますよ。

画像のサイズを細かく設定

属性を複数入れる場合は、半角スペースで区切って記述します。今回の例では、表示する画像の幅と高さを指定しています。追加した属性名の意味は「width」が幅、「height」が高さです。このように、属性にはたくさんの種類があり、組み合わせて使用することもできますよ。属性値には設定したい画像サイズの値が入力されていますね。

HTML属性の種類

要素固有の属性（使用できる場面が限定）

よく使う要素固有の属性一覧

属性を指定する際には一定のルールが存在します。一例として、「src属性」は「img（イメージ）」タグや「video（ビデオ）」タグなど、一部のHTMLタグ要素と併用が可能です。画像や動画を表示したい場合、source（ソース）が必ず必要になるため、「src属性」と相性が良いのだと考えると分かりやすいでしょう。

グローバル属性（全ての場面で使用できる）

よく使うグローバル属性一覧

HTML属性の中には、あらゆる場面で柔軟に使用できる属性もあります。グローバル属性の種類に振り分けられる属性の場合、どのHTMLタグの要素にも付け加えることが可能です。

まとめ

よく使われるHTML属性に的を絞って効率よく学習しよう

HTMLの属性は無数にあり、使い方も含めて全て暗記するのは一苦労です。一例として、Web制作を行いたい方は、WebページのHTML上で頻繁に使用されている属性から覚えていくのがおすすめ。英語学習と同じように、自分のやりたいこと・専門分野に限定して勉強することで、挫折せずにモチベーションを維持したままプログラミングをマスターできます。