郵便番号と住所を <br> 要素で区切る是非

とある初心者向けの HTML 解説本を読んでいたところ、<br> 要素の活用例として次のようなコードが掲載されているのが引っ掛かりました。

<p>
	〒100-8111<br>
	東京都千代田区千代田1-1
</p>

HTML 仕様書には以下の記述がありますから、住所に使用するのは正しい使い方です。

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

4.5.27 The br element(WHATWG)

ここで「郵便番号は住所(addresses)に含まれるのか?」という疑問が出てきますが、仕様書には以下のように人名と住所をまとめて <p> 要素で囲ったうえで <br> 改行するコード例が掲載されているくらいなので、郵便番号や住所、氏名を含めて広い意味での「住所」と考えて問題なさそうです。

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>
  • ちなみにこのP. Shermanとはディズニー映画『ファインディング・ニモ』の登場人物のようです。作品を観たことはないので詳しくは知りませんが……。

ですので、冒頭に挙げた郵便番号と住所を <br> 要素で区切るマークアップが HTML 仕様に照らし合わせて適切か否かと聞かれれば適切であると言えます。

一方でそのマークアップには気持ち悪さを感じます。HTML として適切なのに気持ち悪さを感じるのには2つの理由があります。

郵便番号は機械可読でありたい

§

気持ち悪い理由の一つ目は、郵便番号が独立したデータとして扱われていない(住所と一緒くたにされている)ことです。

そもそも「郵便番号」とは何でしょうか。これは日本郵便のサイトで説明されています。

郵便番号の導入は郵便物処理の機械化の範囲を拡大し、人力に依存する割合の極めて高い郵便事業の効率化を推進することによって、将来にわたってなるべく安い料金で良質な郵便サービスを安定的に御利用いただくことを目的とします。

郵便番号・バーコードマニュアル 郵便番号制の目的(www.post.japanpost.jp)

すなわち、郵便番号とは郵便物処理の効率化(機械化の推進)を行うためのデータと理解できます。

具体的にはハガキや薄型の封筒を普通郵便で送る場合、表面に手書きされた郵便番号と住所を機械で読み取り、その情報をバーコード化して人の目には見えない透明なインクで印字し、配達に利用しているようです。実際の郵便局の現場を取材した動画があるので興味ある方は見てみると良いでしょう。

【潜入】郵便局の驚きのスピード術!“心臓部”には何が!?「立ち入り禁止のその先」『every.特集』(YouTube)

このように、郵便番号が導入された経緯と利用方法を考えると、郵便番号は機械可読が容易にできる必要性を感じます。郵便番号とはそういうものなのですから、これはハガキでも Web 画面(HTML によるマークアップ)でも同じことです。

HTML 上に書かれた郵便番号の機械可読性を上げるにはいくつか方法がありますが、<data> 要素(WHATWG)を使うのがもっとも適切だと思います。

<p>
	<data value="100-8111" class="zip">〒100-8111</data><br>
	東京都千代田区千代田1-1
</p>

このようにすればユーザーは .zip なり //*[@class="zip"] なりで郵便番号の要素を特定し、その value 値を取得することで郵便マークを除いた純粋な郵便番号データを取得することが可能になります。

とくに住所録のように大量の住所が記載されたコンテンツであれば、このような工夫が有用でしょう。

米国と日本における住所表記の文化的違い

§

もう一つは日本ならではの事情です。

日本では一般的に郵便番号と住所は続けては書かず、行を分けて書くことが多いです。

とくにハガキや封筒では行分けどころか郵便番号は上部に横書き、住所は右側に縦書きといったように、書く場所からして完全に独立しています。仮にハガキの表面を HTML と CSS で再現しろと言われたら、おそらくほとんどのマークアップエンジニアは郵便番号と住所は別の <p> 要素なり <div> 要素なりに分けるのではないでしょうか。

サムネイル画像
封筒の表面の書き方例(画像出典: 手紙の豆知識 封筒の表書き・裏書きの書き方(www.post.japanpost.jp)オリジナル画像

HTML はコンテンツを記述するものであり、レイアウトはスタイルシートで表現する原則からすれば、郵便番号・住所とも横書きで郵便番号の次の行に住所が来る単純なレイアウトだとしても、あるいはハガキのような複雑なレイアウトだとしても、マークアップで使用する要素が変わることはありません。ハガキのレイアウトで <br> 要素を使わないのなら、単純なレイアウトでも同じく <br> 要素を使わないのが順当な考え方でしょう。

一方、米国式の住所の書き方では郵便番号(ZIP Code)は住所の一部であるかのように表記されるのが一般的なようです。具体例が英語版 Wikipedia の ZIP Code(en.wikipedia.org)に掲載されています。

このような文化的な違いを考慮すると、HTML 仕様書に

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

4.5.27 The br element(WHATWG)

と書かれているのはあくまで米国その他の国における住所表記の慣例から来るものであり、日本の住所表記にそのまま適用できるとは私は思いません。狭義の意味での住所内改行、例えば

<p>
	東京都千代田区千代田1-1<br>
	○○マンション101号室
</p>

のようなケースでの使用は適切だと思いますが、郵便番号と住所を <br> 要素で区切るのは日本の住所表記においては相応しい使い方とは言えないのではないかと。

HTML 仕様書の 4.5 Text-level semantics(WHATWG)の章には文化的な慣例を元にした記述やコード例が散見されます。<i> 要素の「西洋のテキストにおける船の名前」や、<u> 要素の「中国のテキストにおける固有名詞」のように、特定の国や地域における慣例は文章をただ読むだけで理解できますが、<br> 要素における住所表記は逆に、世界的に見れば日本の慣例が特異である事実を考慮して仕様を読み解く必要があると思うのです。


以上を踏まえたうえで、日本の住所であれば私ならこのようにマークアップします。

<div class="address">
	<p><data value="100-8111" class="zip">〒100-8111</data></p>
	<p>東京都千代田区千代田1-1</p>
</div>

<data> 要素を使うかどうかはケースバイケースで、会社概要ページなどにある単一の住所表記であれば機械可読にこだわる必要性は薄いでしょうし、HTML を手書きする場合は value 属性値を書き間違えてもそのミスに気付きにくいため、むしろ避けるべきとすら思います。

ただいずれにせよ郵便番号と住所は <p> 要素で区切り、郵便番号は住所とは独立したデータとして表現したいところです。