Open8

「HTML解体新書」を読んでメモする

KeitaUenishiKeitaUenishi

ユーザーエージェントとウェブブラウザー

人がWebを利用するためには、ソフトウェアを利用する必要がある。
Webにアクセスするためのソフトウェアを「ユーザーエージェント」と呼ぶ。

ユーザーエージェントの代表例はWebコンテンツを閲覧するWebブラウザーであり、単にブラウザーと呼ぶこともある。

閲覧や表示の機能を持たないものもある。

  • Webコンテンツをダウンロードして保存する「ダウンローダー」
  • Webコンテンツの情報を期待的に収集する「クローラー」
KeitaUenishiKeitaUenishi

Webでは、プログラムがHTMLを読み取る

  • 解析することを「パース (parse)」
  • 解析するプログラムを「パーサー (parser)」

という
パーサーは与えられたデータを1文字ずつ読み、その文字がデータか、マーク (どんな意味のマークなのか) を解析する。この解析を行うプログラムを「字句解析機 (tokenizer) 」という

KeitaUenishiKeitaUenishi

WAI-ARIAとは

  • WAI
    • 1997年に、W3Cの内部組織として発足した「Web Accessibility Initiative (WAI)」の略称
    • Webコンテンツで起こるアクセシビリティの問題をまとめ、その問題に対応する為のガイドラインを「WebContent Accessibiliry Guidelines(WCAG)」として発行している

WAIが発行している文書はWCAGだけではない。
ARIAはAccessible Rich Internet Applicationsの略称。

現代のリッチインターネットアプリケーションでは、独自に作られたインターフェースが支援技術に十分な情報を提供できなかったり、動的なインタラクションがユーザーに伝わらない場面などが多くみられるようになった。

WAI-ARIAはこの問題を解決する技術仕様。
HTMLの要素に対して、支援技術に伝えるべき情報を追加することができる。
role属性を追加して、要素の役割をaria- で始まる属性を追加して要素の状態に関する情報を伝える。

roleについて

既定では、 HTML の多くの意味づけ要素はロールを持っています。例えば、 <input type="radio"> は "radio" ロールを持ちます。 HTML の意味づけがない要素はロールを持ちません。意味を追加していない <div> と <span> は null を返します。 role 属性で意味づけを提供することができます。

ARIA ロールは role="role type" を使用して HTML 要素に追加します。ロールの中には、 ARIA の検証状態やプロパティを含めることを要求されるものもあります。

https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles

KeitaUenishiKeitaUenishi

終了タグの省略

仕様として、終了タグが省略できる要素に以下のようなものがある

  • p
  • li
  • dt
  • dd
  • tr
  • th
  • td
  • caption
  • thead
  • tbody
  • tfoot
  • option
  • rp
  • rt

など

たとえば

<p>この<mark>キーワード</mark>はこの文章で重要なものを表します。

とした場合、パーサーは

<p>この<mark>キーワード</mark>はこの文章で重要なものを表します。</p>

上記のように解釈する

Tag omission in text/html:
A p element's end tag can be omitted if the p element is immediately followed by an address, article, aside, blockquote, details, dialog, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, search, section, table, or ul element, or if there is no more content in the parent element and the parent element is an HTML element that is not an a, audio, del, ins, map, noscript, or video element, or an autonomous custom element.

text/htmlのタグ省略：
p要素の終了タグは、p要素の直後に address、article、aside、blockquote、details、dialog、div、dl、fieldset、figcaption、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hgroup、hr、main、menu、nav、 ol, p, pre, search, section, table, ul要素、あるいは親要素にもう内容がなく、親要素がa, audio, del, ins, map, noscript, video要素でないHTML要素、あるいは自律カスタム要素である場合。

https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element

KeitaUenishiKeitaUenishi

HTML文書の先頭に<!DOCTYPE html>を書く理由

歴史的な理由により、ブラウザはDOCTYPEがないHTML文書を古いものとみなし、特殊な扱いをする。
DOCTYPEを記述するのはその処理を防ぐ為で、それ以上の意味はない。

DOCTYPEがなかった場合の特殊な扱いはquirks modeと呼ばれる。互換モード、奇癖モードなどとよばれることも。

ウェブブラウザーのレイアウトエンジンが利用するモードは、後方互換 (Quirks) モード、準標準 (Almost Standards) モード、完全標準準拠 (Full Standards) モードの 3 種類になりました。後方互換モードでは、レイアウトは Navigator 4 や Internet Explorer 5 のような非標準の動作をエミュレートします。これは、ウェブ標準が広く採用される前に作られたウェブサイトをサポートするために必要です。完全標準準拠モードでは、HTML や CSS の仕様書で書かれている通りに動作します (そのように期待されています)。準標準モードでは、準標準モードのトリガーとなる DOCTYPE を利用している実際のページについて表示を損なう可能性を考慮した、ごく少数の互換動作が実装されています。

DOCTYPE は HTML 文書の先頭に置くようにしてください。Internet Explorer 9 以前ではコメントや XML 宣言などが DOCTYPE の前に存在すると、後方互換モードが適用されます。

https://developer.mozilla.org/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

KeitaUenishiKeitaUenishi

属性

HTMLではタグを使って要素の種類を範囲を明示できるが、要素に「属性」という情報を付け加えることも出来る。

たとえば、以下のaタグにあるhrefも属性のひとつ

<p>詳しくは<a href="https://hogehuga.com">こちら</a>をご覧ください。</p>

属性には名前と値があり、それぞれ「属性名 (attribute name)」、「属性値 (attribute value)」という。

列挙型属性

属性の中には、決められた値しか受け取れないものもある。

たとえば、dir属性は属性値として "ltr", "rtl", "auto" のいずれかを指定する必要があり、それ以外は指定できない。
列挙型属性のキーワードは、大文字小文字を区別しない。

※ dir属性とは？

dir グローバル属性は列挙型属性で、要素のテキストの書字方向を示します。

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/dir

KeitaUenishiKeitaUenishi

要素の入れ子と内容モデル

カテゴリーによって、以下のようにモデルが定義されている

  • Metadata content
  • Flow content
  • Sectioning content
  • Heading content
  • Phrasing content
  • Embedded content
  • Interactive content

上記のカテゴリーのいずれにも属さない要素もあれば、ある要素が複数のカテゴリーに属することもある。
内容モデルの定義によく出てくるのは、Metadata, Flow, Phragingの3つ。

KeitaUenishiKeitaUenishi

Metadata

原則としてhead要素内で使用され、画面上に表示されることはない。
link, meta, title要素などが属している。

Flow

HTML文書のコンテンツ内で使える要素のほとんどはFlowに属している。要素の内容モデルがFlowと定義されている場合、ほぼ任意の要素を子要素にできる。
ただし、前述のMetadataや、tr要素、li要素など、特定の要素を親に持つ必要があるものを除く。

Flowはテキストにも属している。
内容モデルがFlowと定義されている場合、要素の内容にテキストを直接入れることもできる。

例えばdiv要素はFlow contentのため、テキストを子要素として入れることができる。

<div>こんにちわ</div>

https://momdo.github.io/html/grouping-content.html#the-div-element

Fowコンテンツに属する要素は以下の通り

<a>
<abbr>
<address>
<article>
<aside>
<audio>
<b>
<bdo>
<bdi>
<blockquote>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<details>
<dfn>
<dialog>
<div>
<dl>
<em>
<embed>
<fieldset>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hgroup>
<hr>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<main>
<map>
<mark>
<math>
<menu>
<meter>
<nav>
<noscript>
<object>
<ol>
<output>
<p>
<picture>
<pre>
<progress>
<q>
<ruby>
<s>
<samp>
<search>
<script>
<section>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<table>
<template>
<textarea>
<time>
<u>
<ul>
<var>
<video>
<wbr>
プレーンテキスト

https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#フローコンテンツ

Phrasing

Flowに属する要素のうち、特に段落内のテキストに使用される要素がPhradingに属する。

Phrasingに含まれる要素はすべてFlowにも属している。 ただし逆は真ではなく、p, div, h1要素はFlowに属しているが、Phrasingには属していない。

Phradingに含まれている要素は以下の通り

<abbr>
<audio>
<b>
<bdi>
<bdo>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<dfn>
<em>
<embed>
<i>
<iframe>
<img>
<input>
<kbd>
<label>
<mark>
<math>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<template>
<textarea>
<time>
<u>
<var>
<video>
<wbr>
プレーンテキスト（ホワイトスペースだけのものを除く）