HTMLの属性について

前回までであらかたタグの説明を行いました。

今回はタグに付けられる属性についてです。

HTML属性とは

HTMLの属性とは
HTMLのタグに対して何かしらの設定要素を付加するものです。

特定のタグでしか使えないものと
全てのタグ共通で使えるもの(グローバル属性)があります。

HTML属性の書き方

<タグ名属性名="属性値" 属性名="属性値">

タグを書いたら、その後ろにスペースを開けて
属性名を書き、属性値はイコール記号(=)を付けて書きます。

属性値は引用符で囲み、引用符はダブルクォート"を用います。

主なグローバル属性

id
固有の名前を指定する属性(一般的に英数文字,先頭は数字以外同じidを使わない)

class
分類名を指定する属性(一般的に英数文字,先頭は数字以外,スペースで区切りも有り)

title
捕捉情報を指定する属性

lang
言語を指定する属性

style
スタイルを直接指定する属性(一般的にスタイルはCSSを用いるのが推奨)

hidden
隠し属性 , コンテンツを隠す

全てのタグで共通ですが、タグによっては効かないものもあります。

classやidなどはタグを管理するために使用するもので
id名(属性値)はHTMLの中では一意、class名は複数存在します。

<div id="contentmain">
  <div class="c1">
    <div class="c1">
      <p>コンテンツ</p>
    </div>
  </div>
</div>

cssではidやclassでデザインの適応箇所を決めたり
出し分けたりしています。

スクレイピングではこの属性値を使って情報を取得するため
HTMLのタグと属性の構造を把握しておきましょう。

タグ固有の属性

name
要素の名前,formやmetaタグなどでフィールドを識別のために使用する

autoplay
audia,videoタグ,動画や音声が再生可能な時点で再生を開始する

alt
imgタグなどの代替テキスト

disabled
button , input , optionなどでコントロールを無効にする

required
inputタグなどで必須よそを現す

href
a タグなどでリンク先を現す

maxlength
inputタグなどでの最大文字数

minlength
inputタグなどでの最小文字数

placeholder
inputタグなどでの入力ヒント

selected
optionタグでの初期選択を現す

size
inputタグなどでのサイズ , 文字数に該当

src
imgタグなどでのファイルなどのパス(URL)を指定する

type
inputタグなどでの要素の型を指定する

value
inputタグなどでのデフォルト値を指定する

※下記は指定できるがCSSでの対応が望ましい属性
width
imgタグなどで要素の幅

height
imgタグなどで要素の高さ

color
fontタグなどでの色合いを指定

border
imgタグなどでの境界線の幅

bgcolor
bodyタグなどでの要素の背景色を指定する

デザインに大きく関わる部分はHTMLでは直接指定をせずに
CSSファイル側でデザインを書いて適応させることがほとんどのため
HTML属性では指定しない方が良いかと思います。

のちにCSSの方もやっていきますので
併せて覚えてください。

まとめ

タグによって指定できる属性名、属性値が変わってくる。
ここに乗っていないものもあるので、あとは
自分で調べてみよう。

君がエンジニアになるまであと91日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython