5年——。
編集チーム連絡用のSlackに初の投稿があったのが2016年12月29日ですから、正確には5年と3ヶ月。そんな長い執筆期間を経て、ようやくみなさまにお届けできることになりました。それがこの書籍、「HTML解体新書 - 仕様から紐解く本格入門」です。
ご購入、ご予約は以下からどうぞ!
ということで、こんにちは、弁護士ドットコム技術戦略室セキュリティチームの太田と申します。普段はWebのアクセシビリティ関連やセキュリティ関連の仕事をしているのですが、このたびHTMLの本を出版することになりました (もっとも、この本は入社前から書いていたもので、普段の業務と直接の関係はありません)。
この記事では、本の内容や執筆の経緯についてご紹介します。最後まで読むと、少しお得な情報があるかも……?
どんな本?
一言でいえば、
HTMLの仕様を読もう!
という本です。基本的にはHTMLについて紹介するのですが、周辺技術などにも触れつつ、仕様の読み方そのものを紹介することに重点を置いています。
HTMLについて体系的に学びたい人に、何か一冊をお薦めしたいというシチュエーションはしばしばあります。そんなときに名前をあげられる本というのが、昔は何冊かありました。
しかしその後、HTMLの仕様は大きく変わりました。HTML4とXHTMLの全盛期は終わりを告げ、過去の定番書籍は、最新のHTML仕様とは内容が合わないものになっていました。定番のHTML書籍として名前を挙げられるような本は、ありそうでない、という状況だったのです。
この本の企画が始まったのは2016年のことですが、この状況は2022年の今も大きくは変わっていないように思います。そんな状況で、新たなHTMLの定番書籍を出したい、というのがこの本のコンセプトです。
どんな人におすすめ?
基本的には、HTMLの仕様についてきちんと理解したい人が読む本、というのがこの本のコンセプトです。「HTMLを多少は知っているが、もっときちんと理解したい」という方には強くおすすめできます。
他にも、以下のようなニーズに役立つはずです。
- HTMLの仕様を読んでみたいが、読み方がよくわからない
- div要素以外の要素も使ったほうが良いと言われたが、何を使えばいいかわからない
- WAI-ARIAというものに興味があるが、使い方がよくわからない
後で触れますが、1章は基礎知識編になっていますので、新入社員研修の教科書のような使い方もできるはずです。とはいえ、まったくHTMLを知らない人にはハードルが高いかもれしません。Web系エンジニアになりたての方が社内の読書会で読んでいく、というシチュエーションには向いていると思います。
本の内容
では、この本の具体的な中身を見ていきましょう。本書は4つの章で構成されています。
- 1章 HTMLの基本概念
- 2章 HTMLマークアップのルール
- 3章 HTMLの主要な要素
- 4章 主要な属性とWAI-ARIA
1章 HTMLの基本概念
1章は、いわば基礎知識編です。以下のような話題で構成しています。
- 1-1 HTMLとは
- 1-2 HTMLの仕様
- 1-3 HTML標準化の歴史
- 1-4 ウェブアクセシビリティの基礎
- 1-5 URLの概要
- 1-6 HTTP
- 1-7 技術情報との関わり方
お気づきの方もいらっしゃると思いますが、およそ半分はHTML以外の話題になっています。この本はHTMLの本だったはずなのに……!?
Webは多くの技術によって支えられており、HTMLはそのうちの1つでしかありません。他の多くの周辺技術と相互に支えあって成立しているのです。HTMLの仕様を理解するためには、他の技術仕様の知識も必要になります。そこで、理解に必要となる前提知識をここに詰め込みました。
当初は、1章の内容はもう少し薄くなっていました。しかし、仮原稿を査読してくださったレビュアー陣からは、「周辺技術に関する専門用語が急に出てくる」「前提をもっと説明しておくべきではないか」といった意見が多く出ました。そこで急遽、さまざまな内容を盛り込むこととなったのです。
この章を読むと、Web技術を理解していく上で必要になる前提知識をざっと眺めることができるでしょう。特に、これからWeb系でやっていこうという方にはこの章の内容が生きてくるはずです。逆に、Web系の経験が十分な方には、ほとんど既知の話かもしれません。
2章 HTMLマークアップのルール
2章は、HTMLの構文ルール全般に関する内容です。以下のような話題で構成しています。
- 2-1 HTMLの要素とタグの基本
- 2-2 属性
- 2-3 URLの応用
- 2-4 要素の入れ子と内容モデル
- 2-5 HTMLで扱える文字
- 2-6 文字参照
- 2-7 コメント
- 2-8 HTMLの細かい構文ルール
個人的に最も好きな章です。HTMLの基本ルールに関する話ですので、実経験者には既知の話が多いかもしれません。
ただ、HTMLがSGMLだった時代に勉強したという方にはぜひ読んでいただきたいところです。現在のHTML仕様からは、「文書型宣言」とか「実体参照」といった概念はなくなっています (XML構文の場合はまた別ですが)。そういった用語の変化も含めて噛み締めていただくと良いでしょう。
中には、あまり実務の役には立たないトリビア的な知識もあります。その多くは2-8に寄せ集められています。「foster parenting」や「ノアの方舟」といった奇妙で面白いルールも少しだけ紹介しています。
昔、W3CのHTML5の仕様が勧告になるすこし前くらいの頃、勉強のためにHTMLパーサーを作ってみたことがあります。この章の執筆に際しては、その際の経験が色々と役に立ちました。本腰を入れてHTMLを勉強してみたいと思ったら、パーサーを作ってみると良いと思います。
3章 HTMLの主要な要素
3章ではHTMLの各要素について、その使い方やアクセシビリティ上の注意点を解説しています。リファレンス的に参照したい場合などは、この章を見ることが多くなるでしょう。以下のような構成になっています。
- 3-1 「HTMLの主要な要素」の読み方
- 3-2 ルート要素と文書のメタデータ
- 3-3 セクション
- 3-4 グルーピングコンテンツ
- 3-5 テキストレベルセマンティックス
- 3-6 リンク関連要素
- 3-7 編集
- 3-8 エンベディッドコンテンツ
- 3-9 テーブル
- 3-10 フォーム1
- 3-11 フォーム2
- 3-12 インタラクティブ要素
- 3-13 スクリプティング
冒頭はこの章の要素解説の読み方や、前提知識の紹介となっています。以降の構成は、HTML仕様の構成に合わせたものです。ただし、フォームだけは長すぎたため、2つに分割されています。「フォーム1」ではform要素、label要素、input要素を扱い、「フォーム2」ではその他のフォーム関連要素を扱っています。
それぞれのセクションの長さは極端に違いますので、輪読会を行う場合などはご注意ください。3-7などは短いのですが、3-10や3-11はかなり長くなっています。
本書の特徴の一つと言えるのが、各要素に対して「アクセシビリティ上の注意点」という記載を設けていることです。これは、仕様の"Accessibility considerations:"の"for authors"の内容に対応するものです。仕様では単に"ARIA in HTML"にリンクしているだけですが、本書ではその内容をまとめて記載しています。
また、実際にスクリーンリーダーでどのように扱われるのかを調査し、仕様の想定と異なる挙動になるものについては、分かった範囲で注意点として記載しています。この調査に関しては、実際に普段スクリーンリーダーを利用されている、ミツエーリンクスの大塚さんにご協力いただきました。
4章 主要な属性とWAI-ARIA
4章ではHTMLのグローバル属性を紹介しています。
- 4-1 グローバル属性
- 4-2 WAI-ARIA
- 4-3 ARIA利用時の注意点
- 4-4 WAI-ARIAの実践
HTML仕様で規定されている属性だけでなく、WAI-ARIAも扱っています。当初の想定ではWAI-ARIAは別の章になる予定だったのですが、WAI-ARIAも要するに属性でしょ、という乱暴な整理でここに入りました。近年ではWAI-ARIAの利用頻度も高まっており、HTMLと別のものとして扱うより、HTMLの属性の一部として扱ったほうがよいだろうという考えです。
WAI-ARIAが普及してきたのはとても良いことですが、誤用や、使いすぎと思える例も見かけるようになりました。特に、ランドマークやライブリージョンを使いすぎて、逆に伝わりにくくなっているケースを見かけます。それを受け、本書でもARIA利用時の注意点を説明することにしました。
最後の4-4は「WAI-ARIAの実践」と称しています。これは、おまけに近い内容で、本編とは毛色が異なります。
HTMLを一通り学ぶと、多数の要素や属性に触れることになります。中には、似たような機能を持つものや、同じ機能を実現するために複数の方法を選択できるものなどもあります。では、実際にどの要素を選び、どの手法を選ぶべきなのか。マークアップの実務では、この選択が問題になります。このセクションでは、こういった複数の選択肢がある問題に対し、さまざまな選択肢を並べ、メリットやデメリットを考えながら比較検討する過程を描きました。
ここでは、唯一の正解を提示することはしていません。また、あくまで私の思考に沿った内容ですので、人によっては別の考え方があるかもしれません。選択肢を挙げ、比較検討するその過程に触れていただきたい、というのがこのセクションの趣旨になっています。
まとめ - 結局、何が言いたいのか
本の内容について触れてきましたが、結局、この本で言いたいことは、一言でいえば
仕様を読もう!
ということになります。
HTML仕様は頻繁に更新されます。それに対し、本の内容は更新されず、古くなることがあります (実を言うと、出版前に既に古くなってしまっている部分もあります)。身も蓋もありませんが、これは宿命であり避けられません。
この本は、ゴールではありません。最終的な答えでもありません。答えはあくまでHTML仕様の中にあります。これが著者のスタンスです。
では、この本に意味がないのかと言うと、そうは思っていません。HTML仕様を読んで学習することは、かなりハードルが高いからです。先にも述べたように、さまざまな前提知識や、関連技術の知識があって初めて 理解できる部分も多数あります。
この本は、仕様を読むためのステップ、橋渡しとして書きました。この本を読むことをきっかけにして、HTML仕様や周辺技術の仕様に興味を持ち、実際に触れていただければと思います。
出版記念イベント
最後に、イベントのご紹介です。
4月7日木曜日の19:00から、出版記念イベントを開催します。オンラインでの開催で、YouTubeでのライブ配信を予定しています。詳細は以下のconnpassのページをご覧ください。
このイベントに最後までご参加いただいた方に、イベント参加特典として、書籍を割引で購入できるクーポンコードをお知らせします! 10%オフとなりますので、この機会に、ぜひお得な割引購入をご検討ください。
※クーポンコードの有効期限はイベントから3日紙版、PDF版どちらも割引購入可能ですが、紙版には数に限りがあり、先着150名様までとなりますのでご了承ください。
それでは、またイベントでお会いしましょう!
