HTML の記述で謎に思ったこと 8 選

HTML を始めて書いた頃には、なぜどんなときに必要なのか、どうしてそう書いてるのかがわからないような記述がたくさんありました。今でもありますが。

基本的なことばかりですが、ざっとまとめてみたので軽く読み流してください。

<!doctype html>

HTML ファイルの一番上に来る記述ですが、これ必要ないでしょう。なくても HTML ちゃんと表示されてるし。

と思ってましたが、これがないと HTML とみなさないブラウザがあるらしいですね。なくてもいい記述があるわけないんですね。

<html lang=”ja”>

lang 属性で言語コードを指定すれば、複数言語に対応していることを示すことができるんだろう。という程度の認識。Google はこれ使ってないから、入れなくていいよ、とすら公式発言してるらしいです。

複数言語に対応するのであれば、下のようなコードを入れて対応するのが望ましいとされています。

<link rel="alternate" hreflang="en" href="その言語ページのリンク">

ちなみに hreflang の設定は言語コードだけでなく、en-us のように国コードと併用することで、より地域を絞ることができます。

で、これこそ要らないじゃないかと思ったんですけれども。

Android デバイスにとっては必要らしい。

たまに中華フォントと日本語フォントが混じったような文章になることがあるが、lang 属性で指定することでこれを回避できるという…。

Google さん、さっき要らないと言ってなかった！？

Web 周りと Android 周りはあまり交流がないのかな…。

<meta charset=”utf-8″>

英語とかで作ってると意識しないで済みますが、日本語を入力した途端に文字化けの嵐になることがあります。Windows のエディタで ASCII で打ってて、HTML が UTF-8 だったりすると。

両方とも UTF-8 が吉です。

<br> と <br />

この最後のスラッシュなに、って感じでしたが、終了タグがないタグの書き方です。

スラッシュありは XHTML の書き方で、HTML4 までは非推奨だったらしいですが、HTML5 からはどちらでも良くなりました。

XML で終了タグを省略するときに同じ書き方をしますが、HTML で使うときはそもそも終了タグがないタグに使うものなので、スラッシュを入れずに終了タグを書くと逆にエラーになります。紛らわしい…。

アイコンの設定

<link rel="shortcut icon" href="favicon.ico">

ファビコンはブラウザで開いたとき、タブのサイト名の横に出るイメージのことを指しますが、これがなぜ .ico という形式なのか。

実は .ico はマルチアイコンが可能になっており、複数サイズのアイコンを一つのファイルにして読み込むことで、それぞれのブラウザに最適なサイズを提供することができるようになっています。

しかし、この方法はもう古くなったようです。

<link rel="icon" sizes="192x192" href="icon.png">

.ico から .png になりました。マルチアイコンは無理なので、複数のサイズのアイコンをアップロードする必要があります。

また、Android デバイスでホーム画面に追加するときにも、このイメージがアイコンとして使われます。iOS では次のような記述が別途必要です。

<link rel="apple-touch-icon" sizes="192x192" href="icon.png">

  などのスペースの記述

普通にキーボードのスペースで何度入力しても、HTML 上ではスペース一つとしてみなされるため、スペースの記述には文字実体参照を使います。

スペースの入力には &ensp;, &emsp; などがあります。ちなみに non-breaking space の意である   は少し特殊で、  によるスペースでは改行しないというルールがあります。日本語ではあまり出番がなさそうです。

Copyright 周り

フッターによくあるやつです。サイトによって実に色々な書き方がされていて、何が正しいのやら。

一番見かけるのはこれです。

調べたところによると、これはかなり不必要な記述が多いらしく、それを削って必要な要素を足すとこうなります。

Simple is best.

とりあえずコピーライトと西暦、著作権保持者が書かれてればあとは自由って感じでした。なくてもいい記述もあるんですね。

Android の font-family が指定できない問題

最後、HTML ではなく CSS の設定なんですが。

Android デバイス上でどのフォントを使ってサイトを表示するか指定できないという問題があります。

Android デバイスには、メーカー独自で追加されていることもあるが、日本語フォントを基本一種類しか搭載していないらしいです。5.1 まではモトヤフォント (マルベリとか) で、6 以降は Noto Sans CJK JP (Adobe の源ノ角ゴシックの Google 仕様版) です。

で、困ったことにこれらを font-family で指定することができません。メーカー独自のフォントが入ってない端末では仮に指定できたとしても意味ないんですけど。

だから、スマホで確認したときに想定していたフォントの感じじゃなくて微妙な気持ちになることがありますが、諦めるしかないです。

一応、Web フォントを読み込めば対応できます。その代わりにサイトの表示速度が犠牲になるので、うーん…。

最後に

Android のフォント設定は本当に理解に苦しむのですが、どうしようもないので大体デフォルトのフォントで頑張ってもらうことにしてます。

フォントが丸すぎるんですよねー…。