普段意識しないで書いている属性ですが

<p class="hoge">ほげ</p>

のclass名「hoge」が「属性名」で、「ほげ」が「属性値」です。aタグの「href」も属性名。「http://hogehoge.net」は属性値になります。

すぐ忘れちゃうので健忘メモ。

便利な属性いろいろ

画像の読み込み遅延「loading=”lazy”」がChromeでもサポートされ、html living standard では正式に採用。htmlだけで指定できるようになりました。よかったね。
loading=”lazy” と併記できる decoding=”async” は画像のデコード処理を非同期化して、タイミングを調整してくれます◎

それから動画。動画も属性がたくさんありますね。
知ってると便利な属性いろいろです。

ダウンロードする

<a href="PDF" download>PDFダウンロード</a>

入力するデータの種類でキーボード出し分け

<input type="text" inputmode="url">
<input type="text" inputmode="email">
<input type="text" inputmode="numeric">

それぞれに適した種類のソフトウェアキーボードを表示します。スマホ向けです。

ブラウザによる自動補完機能

<input name="hoge" id="hoge" autocomplete="off">

メールアドレスや電話番号などを入力する際のやつ。これ邪魔なのですけどみなさんどうでしょうか・・。offにしてほしい。

記事の公開日・更新日で使えるtimeタグの属性

たとえば・・

を

<p>今日。</p>

とpで書くとただの「今日。」というテキスト。ですが、

<time datetime="2022-12-1">今日。</time>

datatime属性を使うと「今日」は「2022年12月1日」になります。
人間が読むとpで書いてもtimeで書いても同じ「今日」ですが、検索エンジンが読むと、これは時間だ、と認識してくれます。検索結果のスニペットで日時が出てくるメリットも。

datetimeは「YYYY-MM-DDの順で書く」というのが万国共通のルールで、ブログの公開日・更新日も

公開した日

<time datetime="2022-6-5" itemprop="datepublished">2022年6月5日</time>

編集した日

<time datetime="2022-9-10" itemprop="modified">2022年9月10日</time>

属性でこんなふうに書き分けることができて、timeタグの属性を変えれば、公開した日も加筆した日もそれぞれ認識されます。

自分のサイトはうっかりpタグでコーディングしてました。
構造の部分で正しく伝えるのはマストです。

自分のサイトなのでまあいいか。

data-〇〇というカスタムデータ属性

自分でつくれちゃうやつです。どう使うのか、というと・・

CSSでも使えるよ

<div class="bg" data-bg-color="bg-green">
背景グリーンにしたい
</div>

data-bg-colorは全部グリーンにしたい

.bg[data-bg-color] {
 background: green;
}

data-bg-colorの「bg-green」をグリーンにしたい

.bg[data-bg-color="bg-green"] {
 background: green;
}

CSSでもこのように指定ができるのですが、JavaScriptと組み合わせることが多いです。

このページで使っていて、「関東」「九州」など地方名で「data-group」という属性をつくりました。タブをクリックしたとき、該当の地方名だけアクティブに。そうじゃないものは隠してます。
このページではhtmlをJSONデータにしてしまったので、ソースコード見れないですが、こんなことをしてます。

クリックしたら中身をソートしたい

See the Pen クリックしたら中身をソート by kaori yamazaki (@kaori-yamazaki) on CodePen.

これは便利なのでぜひ。