株式会社オンサイト クリエイト事業部

HTML Living Standardで追加されたタグを実務的な視点からまとめてみよう

著者:mumumu

HTML5が正式リリースされてから約10年
なんやかんやあってHTMLの標準はHTML Living Standardとなりましたが、イマイチ何ができるようになったかわかっていないので色々とまとめてみることにしました

システム関連がAIの台頭によって無人化されていく未来において、マークアップに意味を持たせるという作業は意外と人間味が出る部分であり機械に代替されない部分かもしれませんので、しっかりと覚えておきましょう!

※ 項目名は https://seolaboratory.jp/49735/ こちらのサイトからお借りしました

追加された要素

<hgroup>見出しのグループ化
<slot>スロット

HTMLのタグとして上記2種類が追加されました
<hgroup>は以前廃止されたものの、この度復活しております

<hgroup>

<hgroup> は HTML の要素で、見出しとそれに関連する内容を表します。これは 1 つの <h1>–<h6> 要素と、1 つ以上の <p> 要素をグループ化します。

サイトの左上に ロゴ + [小さいテキスト] のようなデザインがある時や、最近多い タイトル部分が日本語 + 英語のデザインをそのままテキスト入力すると、検索画面で「会社情報Company」と表示されていたりしてしまうものを以下の様に変更しても良いかも

<h2><span class="jp">会社情報</span><span class="en">Company</span></h2>
Code language: HTML, XML (xml)

<hgroup>
  <h2>会社情報</h2>
  <p>Company</p>
</hgroup>
Code language: HTML, XML (xml)

<slot>

<slot> は HTML の要素――一連のウェブコンポーネント技術の一部――で、ウェブコンポーネント内で別な DOM ツリーを構築し、一緒に表示することができる独自のマークアップを入れることができるプレイスホルダーです。

…よくわからないのでコードで見てみましょう

  1. <template>タグにID [dl-template]を付与し<slot></slot>にnameをつけておく
<template id="dl-template">
    <dl>
      <dt><slot name="dt">dt</slot></dt>
      <dt><slot name="dd">dd</slot></dt>
    </dl>
  </template>
Code language: HTML, XML (xml)

2. dl-element のような独自タグで囲んだ中に代入したいコンテンツを登録する

<dl-element><span slot="dt">質問1が入ります</span> <span slot="dd">答え1が入ります</span></dl-element>
<dl-element><span slot="dt">質問2が入ります</span> <span slot="dd">答え2が入ります</span></dl-element>Code language: HTML, XML (xml)

3. javascriptで以下の様な感じのものを書く

<script>
   customElements.define('dl-element',
      class extends HTMLElement {
         constructor() {
            super();
            var template = document.getElementById('dl-template').content;
            var shadowRoot = this.attachShadow({mode: 'open'})
                             .appendChild(template.cloneNode(true));
         }
      }
   );
</script>Code language: HTML, XML (xml)

4, そうすると何故か下の様な表示になっている

<dl>
  <dt>質問1が入ります<dt>
  <dd>答え1が入ります</dd>
</dl>
<dl>
  <dt>質問2が入ります<dt>
  <dd>答え2が入ります</dd>
</dl>
Code language: HTML, XML (xml)

…つまり

templateタグ内に登録したコードを使い回し、かつslotタグに都度テキストを代入することができるということですね
javascriptやphpで記述していたテンプレートやループの一部をHTMLで肩代わりできるということなのでしょうか

しかし結局script書いているので、そこを省略できるようになってくれた時に使いたいなという気持ち

変更された要素

<cite>創作物のタイトル以外を含むことはできず、作者名を含むことができなくなりました。
<link>“rel”属性の値が“body-ok”な値のみの際、または“itemprop”属性が指定されている際、“body”の要素内に配置することができます。
<meta>“itemprop”属性を指定した場合は“body”要素内に配置できます。
<style>“body”要素内には配置できません。

<cite>

作者名を含むことができなくなってことで、使用頻度がさらに減りそうなタグ
作者名を指定したいときは構造化マークアップでのauthorを使うということでしょうか

<link>

cssファイルへのリンクとして使うイメージが強いタグ
body要素内に書く事で得られるメリットがいまいちわからないためしばらく様子見

<meta>

こちらも構造化データの際に使える様になったみたいですが、今のところ使い所がわからないので放置

<style>

“body要素内には配置できません。” とのことなので<head></head>内に書くことにしましょう
pタグなどに直接 style=”” と書き込むのは元々嫌われていたので極力やめたい

廃止された要素

<rb>ルビベース文字の区間を区切るために使用されます。
<rtc>ルビテキスト(ふりがなの文字列)のコンテナを表します

<rb>

ルビを振りたい時は以下の様に書くようです。<rp>(</rp> <rp>)</rp>を使いましょう

<ruby> 漢字 <rp>(</rp><rt>かんじ</rt><rp>)</rp> </ruby>
Code language: HTML, XML (xml)

<rtc>

<rt></rt>を囲むためだけにあったタグですが、無くても問題ないことに気づかれた様です

追加された属性

<a>ping=””pingの送信先を指定します。
<area>ping=””pingの送信先を指定します。
<body>onmessageerror=””文書がAPIから解読できないメッセージ受信した際に実行するスクリプト。
<form>rel=””現在の文書から見たリンク先との関係。
<iframe>allow=””利用できるブラウザの機能を指定します。
<img>decoding=””画像のデコード方式を指定します。
<img>loading=””画像の読み込みのタイミングを指定します。
<link>as=””先行して読み込む外部リソースの利用先を指定します。
<link>color=””Safariのページピンアイコンの色を指定します。
<link>disabled=””外部スタイルシートへのリンクを無効化します。
<link>imagesrcset=””使用可能な画像ファイルのセット。
<link>imagesizes=””画像の表示するサイズ。
<link>integrity=””外部リソースの整合性を確認します。
<script>integrity=””外部スクリプトの整合性を確認します。
<script>nomodule=””モジュールスクリプトへの対応環境でスクリプトを無効化します。
<script>referrerpolicy=””リファラーポリシーを指定します。
<video>playsinline=””インラインで再生します。

<a ping=””>

リンクをクリックした時にping(POSTリクエスト)を送信することができるようになりました
リンクがクリックされた回数の計測を他サービスなどに頼らずできるのはありがたいですが、送信先が異なるオリジンの場合リンク元のURLは計測できないので万能ではなさそう

<area ping=””>

マップリンクの時に使用するareaタグでもpingを送信できるようになったようです
JavaScriptでできていたことを少しずつhtml側でもできるようにしていく流れなのでしょうか

<body onmessageerror=””>

何らかのエラーを感知した時に何らかのアクションを実行したい時用

<form rel=””>

aタグでtarget=”_blank”を付けるときは、rel=”noreferrer”を付けることが安定となっていますが
formでも同じ様につけた方が良いみたいですね

<iframe allow=””>

fullscreenを設定しているのを良く見るやつ。よくわからん
細かくまとめているサイト様はこちら→ https://web.havincoffee.com/html/tag/iframe/allow.html

<img decoding=””>

decoding=”async”を設定すると、キャッシュが残っているサイトで画像を後から表示するようにできますが、キャッシュが残っているため軽くなった画像をわざわざ非同期で読み込んでもそれほどメリットは無い気がします

<img loading=””>

loading=”lazy”を設定すると画像を遅延読み込みすることが可能
昔は遅延読み込み用のスクリプトを導入していたりしたのに、今はチョチョイとできてしまうのがありがたい
PageSpeed Insights ではページ後半の画像にloading=”lazy”をつけることで改善されることがありますね

<link as=””>

rel=”preload” を設定した際には as=””でファイルの属性を指定することが必須となるようです

<link rel="preload" as="script" href="test.js">
Code language: HTML, XML (xml)

このように記述することで安全にプリロードができるようになるとかなんとか

<link color=””>

多分必要無い

<link disabled=””>

rel=”stylesheet” を設定した時にのみ使える
サイト上のボタンを押すとデザインが変更されるスクリプトを組む時に使えそう

<link imagesrcset=””>

使用可能な画像ファイルをセットすることでレスポンシブイメージとして使用することが可能になります
これより<picture>タグの方がスマートな感じがするので好き

<link imagesizes=””>

上記画像の表示サイズを指定できます

<link integrity=””>

CDNなどで外部リソースを読み込む際に、第三者によって意図しない改竄が加えられていないかを検証できる とても大切
integrityのハッシュ値を調べたいときは https://www.srihash.org/ このサイトが便利!

<script integrity=””>

上記linkのscriptバージョン
jqueryが改ざんされたなどといったニュースも良く聞きますので、少しでもセキュリティを高める対策はしておいた方が吉

<script nomodule=””>

古いブラウザではこのスクリプトを読み込まない様にするための記述
2024年7月時点ではほぼ全てのブラウザでES Modulesが使用できるためもういらないかも
(もちろんIEではES Modulesを使用できません)

<script referrerpolicy=””>

この機能を使うことで、リファラー(参照元URL)の送信を制御できるようになります。
外部サイトに対してはとりあえず “no-referrer”にしておけば安定?

<video playsinline=””>

スマホで動画を再生する際、勝手に全画面になろうとする奴がいるのでとりあえずつけておいて良い気がする

まとめ

さらに 全てのHTML要素に対して追加されたグローバル属性やイベントハンドラ属性、変更された属性などありますが、とりあえず本記事ではここまでとさせていただきます

これまでの追加・変更を見ていると、JavaScriptで完全に制御していた所をHTML側にも負担させる変更が目立ちます
しかしこれらに加えて構造化マークアップであったり、ページの読み込み速度の改善であったり、使い回ししやすい構築だったりを考えながら書く必要があるため、結構HTMLを極めるというのは大変な気がします

高度なプログラムを必要とする仕事が外国人プログラマーやAIに奪われていく未来において、わざわざ日本人でコードを書く人は何をすべきかを考え続けなくてはいけませんね