- ウェブアクセシビリティを学んでいたPatrick Weaverは、Eleventyベースの個人サイトで100種類を超えるHTMLタグを実際のページに適用し、セマンティックHTMLを実験した
- 当初の目標は、今後記事を書くときに見慣れない要素のCSSに足を取られないようにすることだったが、この1本の記事を完成させるのに1年半かかった
- MDN Web DocsのHTML要素一覧を基準に、
, , , , , のような構造要素を見直した
, , , , , など、あまりなじみのない要素は、方向性、発音表記、プログラム出力、改行、インタラクション、Web Componentsといった具体的な用途を示している- ブラウザーサポート、静的サイト生成、Safariでの動画再生、deprecatedタグの挙動など、HTMLの意味と実際の実装のあいだには互換性の痕跡が残っている
実験の出発点と目標
- ウェブアクセシビリティをさらに学んだあと、普段あまり使わないHTML要素を調べ、個人サイトに反映し始めた
- サイトはEleventyで作られており、ブログ本文を
で囲み、レイアウトテンプレートにを追加した
- 画像キャプションのために
とのスタイルはすでに整えてあり、Recurse関連のfootnoteやsidenoteの実装にも関心があった
- MDN Web DocsのHTML要素一覧を基準に、すべての要素を1本の記事で使ってみることにした
- 目的は、今後記事を書く際に、これまで使っていなかった要素のせいでCSS更新が遅れないようにすることだった
- 実際には、この1本の記事のためにスタイルとテンプレートを修正するのに1年半かかった
- ``のように本文へ直接入れにくい要素もあるが、patrickweaver.net全体で見れば、ページのどこかで全要素が使われるように構成した
文書構造とメタデータ要素
- ``には特に変更は必要なかったが、
lang="en"のようなlang属性を常に意識できていないことを確認した
- ``はこの記事を書く前はなじみがなく、その後、相対リンクとともにレイアウトテンプレートへ追加した
- ローカル開発と相対リンクでいくつか問題は起きたが、簡単に解決できた
, , , , ``はすでになじみがあり、サイトにも存在していた要素だった
- ``のドキュメントを読み、
onbeforeprintやonblurのような属性に触れた
onbeforeprintは、以前もっと回りくどい方法で処理していた機能と関係していたonblurの主な用途は、煩わしいポップアップのように見えた
コンテンツセクションと見出し階層
- ``は郵便住所専用だと思っていたが、メールアドレスやリンクにも使えることがわかった
- ブログ記事テンプレートにはすでに``を適用していたが、ドキュメントを読んだあと、サイト内のすべてのページにも合うかを考えるようになった
- footnote領域には``を使った
- ``は文書の主要内容と間接的に関連する部分を表す
- 将来的にsidenoteのようにスタイリングする可能性を残した
- サイトデザインにはもともと``がなかったが、この記事には追加した
- ``はページ上部にだけ使っていたが、複数使ってよいことを確認し、各ブログ記事のヘッダー領域にも適用した
- 見出し階層もあわせて整理した
- 以前はサイト名を
、セクション名を、記事タイトルを``としていた
- ドキュメントとW3Cの助言を読んだあと、ページによって``の対象が変わるようにし、スタイルはクラスで処理するように変えた
- これはHTMLとCSSの関心の分離により適した方法だと判断した
- 2022年初頭に実験を始めてから2023年夏に公開するまでの間に、
とがMDNドキュメントへ追加された
はセクション見出しと副題をまとめるために使われる- ``は検索結果ではなく、検索入力を表す意味要素である
- 静的生成サイトなのでサーバー側で検索結果を生成しないため、例にはJavaScriptが必要になる
- 2023年時点では、MDNのヘッダー検索やgoogle.comでも``は見られなかった
はこの探求を始めるきっかけになった最初の好奇心のひとつで、MDN一覧を読んだあと、上部メニューにはを追加した- ``も記事に入れたが、MarkdownとHTMLを混ぜて書くと視覚的にネストを明確に保ちづらく、ほかの場所で頻繁に使うかは不明だと感じた
テキストコンテンツ要素から得た観察
- ``は以前ツイート埋め込みに使っていたが、この記事では独立した引用スタイルを追加した
- ドキュメントを詳しく読む前は、
の`cite`属性と要素を知らなかった
, , はあとから知った要素で、やに比べてが相対的に知られていないのは不思議だと感じた
とにはデフォルトのmarginがあるが、には側にmarginがある
- ``は使いすぎのせいで現代ウェブでは評判が悪いが、このサイトでは当初あまり使っていなかった
- 一緒にスタイリングしたい要素が増えるにつれて、約20個ほどまで増えた
- 一般的な“section”が多くないサイトでは、多数の``は不要かもしれないことを示している
とは、Mediumにあった記事を移行する際に画像キャプションをセマンティックに表現したくて追加した初期の要素だった
- ドキュメント上では``は画像だけでなく、イラスト、図、コードスニペットにも使える
- 現在のコードブロックの中にも``を使える場所が多いと判断した
- ``は視覚的な横線ではなく、意味論的な区切りとして定義されているという説明を見て、スタイルを見直した
hr:afterに絵文字を入れたが、スクリーンリーダーでどう動作するかは確認が必要だ
は初めて知った要素で、ブラウザーが事実上のように扱うにもかかわらず、HTML5まで残っていたのは意外だった- ``のドキュメントには期待より指針が少なく、長文でないテキストが「本当に段落なのか」という疑問が残った
- ``はコードブロック専用だと思っていたが、意味のある空白を表すのにも使えることを確認した
インラインテキスト意味要素
[link](#)はplaceholderのように使っていたが、実際にはページ最上部へ移動するリンクだった- ``はMDNドキュメントが「著者の便宜のためのもの」と説明しており、最も使う可能性が低いタグのように見えた
との違いは、HTML5でがを置き換えたという従来の理解とは異なっていた
- 実用的なルールとしては、だいたい
は単語単位、は文や句の単位で使うことにした
- これは実際の区別を単純化した経験則である
- ``は、周囲のテキストと方向が異なる可能性のあるテキストを扱う要素である
- 例としては名前が使われているが、任意のユーザー入力Unicodeテキストにも適用できると考えた
- 今後、任意入力を含みうるタグは``で囲むつもりだ
- ``はRTL言語を頻繁に扱わないので使う機会は少なそうだが、少量のRTLテキストを扱う方法を知っておくのは有用だ
は過去に``のように誤用されていた時期があったが、CSSが強力になったことで、その可能性は低くなっていると見ている
- ドキュメントの例が詩であることから、段落と独立した行の境界がどう考えられているのか気になった
- 場合によっては``のほうが適切かもしれない
とは、多くの言語で視覚的な句読点としてすでに表現されている意味を、HTMLの意味要素としてあらためて表す
のデフォルトスタイルは斜体で、はテキストにない引用符を追加する
は記事全体で多用されており、Google DocsのMarkdown対応がを使っているのか気になったが、文書HTMLを見るとGoogle Docsは現在``でレンダリングしている- ``はMDNの例が製品名に製品IDを
valueで付ける方式だったため、実際の用途を思い浮かべにくかった
- ユーザーに見せるIDなら表示したほうがよく、ユーザーに見えないIDなら誰のためのデータなのか不明だ
- ``はW3C HTML5 specificationには見当たらないことも確認した
- ``は定義そのものではなく、定義内の用語を囲む要素なので名前が奇妙だと感じた
- 正式採用されなかったHTML 2.0提案にしか含まれていないようだと整理した
ともとのように使い分けを考えさせられた
- 実用ルールとしては、だいたい
は単語、は文や句に使うことにした
- ドキュメントの例では``が、混同しやすい表現へ注意を向ける用途でよく使われていた
- ``はキーボードキー指定用だが、“Right click”のような操作にも当てはまるのか、その境界が気になると感じた
- ``は、ユーザーが本に蛍光ペンを引くような双方向的執筆ウェブの痕跡のように見えた
, , ``は東アジアのタイポグラフィにおいて、発音、翻訳、音訳情報を提供するために使われる
- ``はソースに含まれる括弧文字を隠すために使われる
- ``は、以前は正しかったが現在は正確でない、または無関係になったテキストを表す取り消し線要素である
- HTML 4.01でdeprecatedになったあと、HTML5で意味が再定義された
- 一部のスクリーンリーダーは取り消し線を通知しないため混乱を招く可能性があり、MDN推奨のCSSをサイトに追加した
はプログラム出力を示すためのもので、以前で処理していたRaspberry Piの記事を``へ更新した- ``は小さなテキストのレンダリングに使うが、ほとんどは引き続きCSSを使うことになりそうだと見ている
のドキュメントを見て、や``のような矛盾したスタイルをなぜ許しているのか、初めて疑問に思ったとは、以前CSSで実装していた可能性があるが、footnoteや数式の例に適用した- ``はセマンティックHTMLに有用そうで、ブログ記事の日付に適用した
- Google検索結果でも``は使われていないようだと観察した
- ``はMDNが「ほとんどの場合、実際には使いたくないはず」と強く案内する要素で、スペルミス表示が主要な推奨用途のように見えた
は数式やプログラミングの変数文字列を意味論的に表し、ピタゴラスの定理の例でと一緒に使った- ``は長い単語、特にURLを特定の位置で改行できるようにする問題を解決する
- 長いURLにbreak pointを入れると、画面幅ごとにより読みやすく折り返される
- ハイフン文字をURLに含めるだけでも、現代のブラウザーでは明確なbreak pointになる
- 改行されないURLは、レイアウト崩れを防ぐため別のスクロール可能な``で囲んだ
画像、マルチメディア、埋め込み
とは、昔イメージマップ系のウェブサイトを作ったことがあるにもかかわらず、なじみの薄かった要素だった
- 今ではあまり使われていないことを示すように、``境界のデバッグツールは使いにくかった
- タブフォーカス中には一度に1つの``境界しか見えず、スタイリングも機能しなかった
は形を持ったに近いと考えた
- ``はHTML5を代表するマルチメディアタグなのですでに使ったことはあったが、2020年代に思ったほど頻繁に見かけないのは意外だった
- BandcampプレイヤーはUIこそカスタムの
, , の組み合わせだが、隠れたを使っている
- ``では
srcset属性を新たに見直した
- 画面幅ごとに異なる3つの画像を提供するデモを作成した
- ブラウザーキャッシュとscaled displayが挙動に影響するため、効果を見るにはprivate windowとnon-scaledまたはnon-retina displayが必要な場合がある
とは``より広く使われておらず、オンライン動画は主にYouTubeへ集中しているように見えると感じた
- 音声はポッドキャストのように個別ファイルを提供する方式のほうが分散している
- ``にはいくつか制約があった
- self-closing tagとして作るとレンダリングされなかった
- 執筆時点のSafariは、開発サーバーが“Range” request headerをサポートしていなかったため、動画を再生できなかった可能性がある
- GitHub Pagesに上げたホスティング版ではSafari再生ができるのか気になった
- ``の問題は、Eleventyビルドで
.vttファイルを正しく設定していなかったことが原因だった
とは、多くの用途がやのような特定タグに置き換えられているにもかかわらず、deprecatedになっていないのが意外だったは“inline frame”という90年代風の名前が残り、はHTML5でdeprecatedになった
display: inlineでレンダリングされることも確認した
とは、異なる状況で画像バージョンを切り替えることを意図した要素である
- マウス/トラックパッドではコンピューターアイコン、タッチスクリーンでは携帯電話アイコン、どちらでもなければfallback画像を表示する例を作成した
- ``はiPad風のリンクプレビューやSPAのようなパフォーマンス上の利点に関連する実験的要素に見えた
- 2023年時点では、どのブラウザーでもデフォルト有効ではなかった
- 以前のChrome実験フラグはあったようだが、2023年には
chrome://flagsで利用できなかった
- HTML 5 Specにはないようで、MDNドキュメントに含まれている理由は不明だった
SVG、MathML、スクリプティング
- MDNドキュメントが
とをまとめて扱っているのは興味深かった
- ``はFigmaやSketchのようなツールのおかげで簡単にプロトタイプして書き出せるため、広く使われている
- ``はよりまれな要素に見えた
- ``は自分で円を描く例に使った
- ``はMathMLネームスペースの非HTML要素を包むwrapperに近いと見て、簡単な式だけを入れた
- ``は2020年のRecurse Centerで線をシャープに描く問題を深く調べた経験があった
- MDNドキュメントを通じて、ブラウザーごとに``の最大サイズがあることを新たに知った
- 現代ブラウザーでは各次元が約32,000ピクセル程度である
, , で偽のを再実装した
- ``は古びた要素だとは予想していなかったが、記事を書きながら実際に自分で直接使うことが少ないと気づいた
- 多くのJavaScriptはビルドツールが1つの``タグへまとめて挿入する
- そのため``はmarkupタグというよりboilerplateのように感じられる
- ``は対話的なウェブサイトで十分に入れてこなかった要素だと感じた
- 特にminified/compiledされたSPAでは、``がないとユーザーは空白ページを見ることになるかもしれない
- この記事では、すべての
タグとともにも入れた
編集表示、表、フォーム、インタラクション
とはMDNドキュメントを見て初めて知った要素で、ワープロで使われそうな要素に見えた
- Google Docsのレンダリングも連想したが、やはり``でレンダリングされることを確認した
- ``は初期ウェブでレイアウト目的に乱用されたが、データが増えた最近のウェブではむしろ珍しくなっている点を皮肉に感じた
- 理由として、無骨なデフォルトデザインと、データベースの表データをウェブUIでは別の観点で見せたいという意図を挙げている
- 記事自体は文書ベースなので実際の表データはないが、2023年Apple emoji set基準らしき絵文字データを例示テーブルとして入れた
とは以前知らず、カスタムな非``デザインよりこれらを使う場面が多いかはわからないと見ている
- ``と関連要素は、通常は送信時に新しいページへ移動する場合に使っていたが、ページ内のユーザーインタラクションにも有効である
- アクセシビリティの観点ではフォーム要素が最も重要かもしれないと考え、今後実装時にはドキュメントを参照したいとしている
とは「JavaScriptなしでもできる」例として定番である
- こうした開閉UIは以前JavaScriptやjQueryで最初に作った機能で、HTMLの数タグで簡単になったのは興味深い
- 今日のHTML specに提案されていたなら、CSS類似効果で代替されて撤回されていたかもしれないと推測した
- ``はHTMLだけで存在することを知らなかった要素である
- スタイル効果以上に有用にするにはJavaScriptが必要だ
alert()よりカスタムなインタラクションを作りつつ、CSSでスタイリングできる単純な方法である
Web Componentsとdeprecated要素
- Web Componentsは以前からもっと学ぶべき項目に入っており、MDNの該当セクションを読めたのはうれしかった
- Web ComponentsのレンダリングにJavaScriptと
Class構文が必要だという点は意外だった
- Shadow DOMをさらに読んだあと、HTMLにはスタイルのカプセル化を内蔵する方法がないため納得した
- 概念的には``とある程度似ているように見えた
とを使って記事の目次を作るためにWeb Componentsを使った
- フロントエンドフレームワークのコンポーネントのように、子テンプレート要素の属性として使われるpropertyを渡す方法をすぐには見つけられなかった
- 各子へ``要素全体を渡して`
の中で正しいhref`を設定した- deprecatedなHTML要素も記事末尾に含めた
, , , , ``は、レイアウト関連機能がCSSへ移った例であるとはWeb Components specの一部だったが、完全実装されておらず実際には実装できなかったはディレクトリ一覧用のウェブサーバー風のように見え、Eleventy静的サイトのディレクトリ一覧例に使った
とはの代わりに使われるよう設計されており、通常本文へ直接入れにくかったため、内でのみ使用した- ``は正式仕様の一部ではないというMDN説明から動かないと予想していたが、2023年には一部ブラウザーで動いているように見えた
- これは``との混同に対するfallbackかもしれないと考えた
- ``はFirefox 8〜84で部分サポートされていたというが、手元に入れた古いバージョンでも例を動かせなかった
はのようなfallbackに近いのにdeprecatedで、``はspecに残っている点が意外だったは属性の代わりになぜ別要素だったのか不明だと感じた
- 記事を書き始めた時点ではMDNの“Embedding Content”セクションにあったが、書き終えるころにはdeprecatedになっていた
- ``はdeprecated要素の中でも実際に動作する点が目立った
- そのまま使うと以降のページがソースコードとしてレンダリングされるため、``で囲んだ
とは閉じタグがあるため、source codeやteletype風のmonospaceテキスト表示として本文でも使えたとは東アジア文字の発音表示用だったが、仕様は単純化されたようだと整理した- MDN一覧になかった``も、別のHTMLタグ一覧を確認して追加した
- 2013年の古いMDN一覧には
, , , のような要素があった
- ``はアクセシビリティ上の理由で現在ほとんどのブラウザーが無視する
- ``は現代ブラウザーでは動かず、CSSで処理すべき機能である
- ``はよりマルチメディア志向のウェブ文書というビジョンを示唆している
- ``はJavaScriptのない世界から来た要素のように見える
- ``にも触れているが、試してはいない
- footnoteのためのネイティブなHTML実装は存在しないことをあとから知った
1件のコメント
Hacker Newsの意見
筆者は フレーム（frames） を覚えているには若すぎるようだ :) Wikipediaの記事（https://en.wikipedia.org/wiki/Frame_(World_Wide_Web)）だけリンクしようと思ったが、説明はあまりよくない 初期のWebが普及したころ、フレームはメニュー、サイドバー、常に表示されるヘッダーなどによく使われていて、上に固定ヘッダー、左にサイドバー、中央に本文フレームを置くような構成が多かった 各フレームは独自の戻る/進む履歴を持つなど、かなり独立して動作していたので、リンクはデフォルトでそのフレームだけを変えることもあった。そのため、戻る、進む、再読み込みが直感的ではなく、間違った内容が1つのフレームに読み込まれると、最初から入り直す以外に復旧が難しかった CSS がフレームの主な用途のほとんどを置き換えてくれたのは幸いで、ユーザーの立場ではフレームは本当に扱いが苦痛だった
framesetを使っていて、まさに上で述べた配置だったとは今では単に 非推奨 なのではなく、かなり前から 廃止された要素 である: https://html.spec.whatwg.org/dev/obsolete.html#obsolete少し触れられてはいるが、画面には隠しつつ スクリーンリーダー には残すための簡単な標準CSS宣言が、いまだに存在しないのはばかげているように感じる これまで見てきたものは、いまだに
clipを使うか、内容をページの外へ移動するか、似たような小技ばかりだ。なぜこれがdisplayの代替値や追加プロパティではないのか分からない これを解決できるspeakプロパティが理論上のCSSモジュールの1つに浮かんでいたが、実装での採用はほとんどないと認識しているaria-labelが付いた空白文字でも同じように処理できるのか気になる書き手が混乱していた
要素について言えば、**HTML 5.2** は2021年にW3Cで廃止され、WhatWG HTML Living Standardに置き換えられた WhatWG標準はHTML 5.2と違ってを廃止せず、「ユーザーが実行または有効化できるコマンドを表すli要素の順序なしリスト形式のツールバー」として再定義した Wikipediaの要素一覧とHTMLバージョン情報はこの点で古いようで、はまだ生きている。ただし、何度も非推奨扱いされた歴史や、最近のブラウザーも正確な意味付けに混乱していたことを考えると、ほとんどの場合は適切なARIAロール（`toolbar`, `menu`, `menubar`）を付けたを使うほうがよいこれらの要素の大半が広く使われていない理由は、もはや存在しない問題を解こうとした古い試みだったか、筆者も認めているように CSSでよりよく解決 できたか、ブラウザー実装に大きく依存していたからだ たとえば
とが常時アップデートされるすべてのブラウザーに入ったときは期待したが、内容を突然展開するのではなくユーザーを案内するようにスライドして開くにはJavaScriptが必要だった。私が見た最良の実装はWAAPIを使っていて、Safariは独自の疑似要素まで追加しているは以前は書式タグだったが、HTML5では **細字注記（fine print）** タグになった。[1]のような純粋な書式タグはずっと前に非推奨になり、消えた [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small/タグは入れ子にできる。以前これで 選択型アドベンチャーゲーム を作り、会社のイントラネットに載せたことがある 断片をつなぎ合わせる生成スクリプトがあり、実際のテキストは数ページ分にすぎなかったのに、HTMLは5MBになった。その日は多くのブラウザーを壊してしまい、結局削除しなければならなかったdetails/summaryの入れ子がどうやって 5MBのHTML につながり、それがどう多くのブラウザーを壊したのか、もっと聞きたい1995年ごろに初めてHTMLを学んだときのことを思い出す。Kevin WerbachのBarebones Guide to HTML を覚えている人はいるだろうか？ 事実上すべてのHTMLタグとその役割を列挙したサイトだった。その資料、テキストエディター、初期バージョンのNetscape Navigatorさえあれば、すぐに学んで実験できた
数日前、Web閲覧 AIエージェント を作ろうとして、Hacker Newsのコメントがテーブルの中のテーブルの中のテーブルで実装されているのを見て衝撃を受けた
userContent.cssを作り、本文幅を制限し、line-heightを1.5emにして、すべての段落に追加の上マージンを付けた これでもう、横幅の広いブラウザーで1行に250文字表示されるHNを苦労して読まなくて済む。各段落が読みやすくなり、段落の区切りも行間よりはっきり見えるようになったセマンティックHTML には大きな可能性がある。個人的には、本文の脚注を右余白に小さめ、または半透明のフォントで置き、必要なら
/の展開要素を付けるスタイルが好きだ しかしこうしたスタイルを実際に実装するには、毎回CSSをかなり詳しく理解していないとうまく動かないようだまず、これは本当に素晴らしい学習方法で、良い練習だと思う 昔、急に使えるようになってワクワクした古くて今では使われない要素を、筆者が見ながら用途を推測するのも面白い ただ、Mosaic 以降のあらゆるバージョンの HTML を手書きしてきた立場からすると、MDN が
description listのように後からさかのぼって名前を変えることは気に入らない。元の仕様のdefinition listのほうが良い 私にはdl、dt、ddを「定義リスト」「定義される用語」「定義」と考えるほうが自然だ。descriptionはdefinitionより広い言葉ではあるが、definition listと見れば、dlには用語（dt）と定義（dd）があると覚えやすい W3 もdefinition listと呼んでいる: https://www.w3.org/TR/html4/struct/lists.html#edef-DL実世界で**``まで到達したケース**を見たことがある？
Restaurant -> Menu -> Antipasti -> For Groups -> Fried -> Cheesyのような階層が必要な場合がある