私家版HTML Coding Style


e-yuuki.orgの文書を書くときに気をつけていることをまとめます。したがってHTML5の範疇を超える話題も含まれます。ベストプラクティスを集めたわけではありません。W3Cの勧告やValidatorの更新によって都度変更される可能性があります。

HTML 5

W3C Recommendationに従って書きます。最新のRecommendationはHTML 5.2HTML 5.3がWorking DraftからRecommendationになり次第ソースコードをアップデートします。

Validator

文書を書いてWebに公開する際The W3C Markup Validation Serviceを使ってHTMLコードを検査します。公開後はPageSpeed Insightsからページのスコアを確認し、速度が改善できそうな箇所を探します。不要なインデントによるスペース/タブ文字の削除はその代表例です。

一行あたりの文字数とインデント

一行あたりの文字数制限はありません。余計な空白が挿入されることを防ぐため、むしろ一段落(pタグで囲う)は一行に収めます。この方針はバージョン管理システムで差分を取ったとき、どこが変更されたのかが分かりづらいという明らかな欠点があります。この欠点を許容できないのであれば、改行は文単位でおこなうべきです。

ページサイズを抑えるために、インデントは必要ありません。HTMLのコーディングではPythonのようにインデントが義務付けられていません。複雑なリストを書くときはインデントを使って見やすくしても構いませんが、commitするときはインデントをすべて削除します。

CSS

レイアウトを整える目的でbrタグやテーブルを使ってはいけません。レイアウトに関するコードはすべてCSSとして書きます。

CSSはHTMLコードに直接書きます。別途用意して読み込むほうが効率的なほど長いCSSを書くわけではありませんし、レイアウトの美麗さが文章の質に影響するわけでもありません。この方法だとCSSを更新したときHTMLファイルひとつひとつを更新しなければならないので手間がかかりますが、CSSコードを改行せず一行にすることでfind(1)sed(1)を組み合わせて簡単に更新ができます。置換前と置換後のテキストはバージョン管理システムから取得できます(git-diff(1)など)。

$ find . -name '*.html' -exec \
sed -i 's/変更前のテキスト/変更後のテキスト/' {} \;

PageSpeed InsightsによってHTML5とCSSの分離を提案された場合はもちろんそれに従います。

JavaScript

僕のWebページではJavaScriptは使いません。TwitterやFacebook, Instagramといったユーザインタラクションが重要視されるようなWebページならともかく、テキスト中心の静的な技術文書はHTML5とCSSのみで書くことができるはずです。

必ずしもユーザがJavaScriptを有効にしているとは限らないという点に注意してください。セキュリティ意識が高いユーザはJavaScriptを標準で無効にする拡張機能をブラウザにインストールしていることもあります(NoScriptなど)。またCUI Webブラウザ(w3m, lynxなど)ではJavaScriptを実行できません。見栄え・組版・収益化などの都合でJavaScriptがどうしても欠かせないときは、JavaScriptがなくてもレイアウトの崩れが最小限になるようCSSで工夫したり、最低限テキストは読めるようにしておくと良いでしょう。

キャッシュ(cache)

キャッシュはできる限り活用しますが、運用について少し考えなければなりません。画像ファイル(png, jpeg)は滅多に上書き変更する機会はないでしょう。論文や発表資料のPDFもそうだと考えられます。つまり一度サーバに公開したらそれっきりな拡張子のファイルはキャッシュの有効期間を長めにします。一方でHTMLファイルやテキストファイルは常に変更される可能性があります。そのためキャッシュは使わないか、使うにしても有効期間を短めにします。

キャッシュの設定はWebサーバのプロバイダに依存します。もしWebサーバがレンタルサーバであれば、/etc/httpdディレクトリ以下にあるファイルを編集したりhttpdデーモンを再起動する権限は与えられていないと思われます。したがってこの場合には.htaccessを編集してキャッシュn設定をする必要があります。たとえば以下のように.htaccessに追記します。

<Files ~ ".(png|jpe?g)">
    Header set Cache-Control "public, max-age=604800"
</Files>

VPSやクラウドを契約してWebサーバを運用している場合は自由に/etcディレクトリ以下のファイルを編集できるので、NginxやApacheの設定ファイルを適宜変更してください。

gzip圧縮

転送速度向上を目的にテキストファイルをサーバ側で圧縮することができます。サーバ側でmod_deflateモジュールが有効になっている必要があります。.htaccessに以下を追記します。

<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE

    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

画像圧縮

This topic was suggested by Andrea Morrys. Thank you.

キャッシュやgzip圧縮の他に、公開している画像そのものをあらかじめ圧縮しておくことも有効な手段です。ここではhttps://commons.wikimedia.org/wiki/File:Andromeda_galaxy.jpgからアンドロメダ銀河の画像をダウンロードし、どの手法でどの程度圧縮できるか確認します。ファイルサイズは4.1MBです。

WebsitePlanet.comではPNG, JPEG形式の画像を圧縮できるツールを公開しています。ひとつ50MB以内で最大40個の画像を一度に圧縮できるようです。

結果、43%圧縮できたようです。

他にも、graphics/optipngやgraphics/jpegoptimなどpkgsrc(7)で提供されているパッケージをインストールすることで、コマンドラインから画像を圧縮することもできます。optipng(1)で上の画像を圧縮した結果、15%の圧縮ができました。

$ optipng html_001.png
** Processing: html_001.png
1350x646 pixels, 4x8 bits/pixel, RGB+alpha
Reducing image to 3x8 bits/pixel, RGB
Input IDAT size = 116635 bytes
Input file size = 116860 bytes

Trying:
  zc = 9  zm = 8  zs = 0  f = 0         IDAT size = 98513

Selecting parameters:
  zc = 9  zm = 8  zs = 0  f = 0         IDAT size = 98513

Output IDAT size = 98513 bytes (18122 bytes decrease)
Output file size = 98570 bytes (18290 bytes = 15.65% decrease)

Tips

引用の方法

引用の方法はそれが短いものか長いものかによって変わります。どの程度から長いと判断するかは曖昧ですが、文を2~3以上引用したいのであれば長い引用の方法をとります。

短い引用であれば「」で囲んで文中に書き、出典元を()の中に明記します。たとえば「出版された情報をコンピュータを使って共有しようとする読者は、 法律上は著作権に違反しているのです」(Richard Stallman, 『自由か著作権か?』)

長い引用はblockquoteタグを使います。コードのフォーマットは以下の通りです(読みやすさを考慮し整形)。

<figure>
  <blockquote>
    <p>引用文</p>
  </blockquote>
  <footer>
    &mdash; <cite>著者名</cite>, <cite>本のタイトル</cite>
  </footer>
</figure>

これは以下のように描画されます。

しかし、そこには1つの障害が立ちはだかっていました。著作権です。出版された情報をコンピュータを使って共有しようとする読者は、 法律上は著作権に違反しているのです。世界は変わり、かつては出版社にとっての産業上の規制であったものが、 本来奉仕すべき一般の人々に対しての規制となってしまいました。

Richard Stallman, 結城浩 訳, 自由か著作権か?

HTML5コーディングのための$HOME/.vimrc その1

「</」と入力した時点で、対となるタグを自動で閉じるようにします。そのためには$HOME/.vimrcに以下を追記します。

augroup CloseTag
    autocmd!
    autocmd Filetype xml inoremap <buffer> </ </<C-x><C-o>
    autocmd Filetype html inoremap <buffer> </ </<C-x><C-o>
augroup END