自身のアウトプットも兼ねてつれづれと書き続けるブログ。
HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]
前回からの続きです。
属性[02]
<p>こちら<a href="https://html.text/">移動</a></p>
<a>タグの中にあるhref="https://html.text/"のように要素に情報を付け加える表現を属性(attribute value)といいます。
属性には名前と値があり、それぞれ属性名(attribute name)属性値(attribute value)といいます。それぞれhref(属性名)https://html.text/(属性値)となります。
属性の書き方
属性を書く場合、属性名の後ろに=(等号)を記述し、続けて属性値を書きます。下記だとabbr要素にtitleという属性名をして、属性値をcontent-titleとした例です。
<abbr title="content-title">title</abbr>
複数の属性も書くことができます。
<p>こちら<a rel="link" href="https://html.text/">移動</a></p>
また改行で区切ることも可能です。
属性値
属性値の形式は、属性ごとに決められています。ほとんどが任意のテキストを値に指定にできますが、特定の値しか取れない属性もあります。
【ブール型属性】
真偽の意味合いがある、on/offだけで表すもの。hidden属性などがあげられます。
<!-- 記述例 -->
<p hidden="hidden">この内容は非表示</p>
<!-- 省略された記述例 -->
<p hidden="">この内容は非表示</p>
<p hidden>この内容は非表示</p>
<!-- 属性自体を無効 -->
<p>この内容は表示</p>
【列挙型属性】
決められた値しか受けつかない属性。dir属性などが挙げられます。列挙型属性の属性値は大文字小文字を区別しません。
【日付と時間】
日付や時間を指定するタイプの属性。datetime属性などがあげられます。
<!-- 日付の指定 -->
<ins datetime="2023-09-21">
<!-- 日本のローカルタイムの時刻指定 日付と時間の間に T かスペースを入れる-->
<del datetime="2023-09-21T00:00+0900">
<del datetime="2023-09-21 00:00+0900">
<!-- UTCによる時刻指定-- Z 1文字での表現も可能>
<del datetime="2023-09-21T00:00+0000">
<del datetime="2023-09-21 09:00Z">