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