当サイトがHTML Living Standardに正しく準拠しているかどうか、ValidatorであるNu Html Checkerで検証しました。
概要
- Joomla!はHTMLのコーディングに関するガイドラインをGoogle HTML/CSS Style Guide等の複数のガイドラインを調査の上、最新のWeb標準仕様であるHTML Living Standardに準拠することを目指しています
- Joomla! Developer Network | Joomla! Coding Standards | HTML
- 次は2010年の記事ですが、当時はW3C準拠のJoomla!Webサイトを推奨していました
- ただし、Joomla! Coreがガイドラインを遵守しても、選択したテンプレートやそれをカスタマイズする管理者(わたくし)がWeb標準を意識しなければ、Web標準仕様の準拠から簡単に逸脱してしまいます
- そこで、サイトのカスタマイズ(多くはchild_templateのカスタマイズ)の都度、Web標準に準拠しているかどうか検証(Validation)することが望まれます
- 検証したところ、初歩的なミスを指摘されてしまいました
Nu Html Checker
- Nu Html CheckerはかつてWeb標準化の担い手だったW3Cが提供しているValidator(検証ツール)です
- Nu Html Checker
- 全くの余談ですが、バス乗降時にSUICAやPASMOなどのICカードをかざす端末をValidatorと呼称するようです
- 現在のWeb標準仕様であるHTML Living Standardを策定しているWHATWGもNu Html Checkerによる検証を紹介しています
- つまりは、Nu Html Checkerで検証しておけば、取り合えずは安心できそうです
- ただし、次のページによれば、HTML Living Standardの仕様変更がNu Html Checkerに反映されるまでタイムラグがあるようです
- HTML 20Living Standardに対応した構文チェッカーと更新内容の確認方法 | webico blog
検証手順
- 次の手順は、URLを指定する[Check by address]の手順です
- Nu Html Checkerへアクセスします
- 必要に応じて[Show]オプションを選択します(複数選択可)
- source: 指定したURLのソースコードを表示します．チェックされた箇所はハイライトされます
- outline: 見出しを階層表示します
- image report: img要素のalt属性確認に役立ちます
- 上記をいずれも選択しない場合、チェックレポートのみ表示されます
- [Check by]オプションに[address]が指定されている(デフォルト)ことを確認します
- テキストボックスにチェックしたいページのURLを指定します
- [Check]ボタンをクリックして検証を実行します
初歩的なミスの修正
- Nu Html Checkerの検証結果、初歩的なミスを複数個所指摘されました
- 次のとおり、修正しております
Void要素(空要素)
Nu Html Checkerの指摘
Info Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.- HTML Living Standardにおいて、子要素を持たないVoid element(空要素)は終了タグで閉じてはいけません
- これは、終了タグ</要素名>によるものと開始タグをスペース+/>で閉じるものいずれも該当します
- No Good: <img src="//images/logo.png" alt="" ></img>
- No Good: <img src="//images/logo.png" alt="" />
- No Good: <br />
Self-closing (void) elements should not be closed. Trailing forward slashes and spaces should be omitted.
自己終了（void）要素は閉じないでください。末尾のスラッシュとスペースは省略してください。(Google翻訳) Joomla! Coding Standards | HTML
head要素内のlink要素
- head要素内に配置したlink要素は、Void elementであり、バックスラッシュで閉じてはいけません
- Cassiopeia child_templateにてindex.phpをOverrideする際、link要素をバックスラッシュで閉じた箇所が相当数ありました
- わたくしの知識不足で、HTML 4.0/4.0.1, XHTML 1.0/1.1, HTML 5.0/5.1, HTML Living Standardが整理できていませんでした
- Qiita | @toraguitar | HTMLの歴史をまとめる
- Templates: Customise (Cassiopeia child) > Editor > /templates/cassiopeia_child/index.phpの当該箇所を修正し、スペースとバックスラッシュを削除しました
Article内のimg要素
- わたくしはエディターにJCEを使用し、基本的にEditorモードで入力し、必要に応じてCodeモードで編集しております
- img要素は[Insert Image]ボタンから、br要素は[Shift+Enter}で挿入しておりました
- JCEには、Doctypeに応じてコードをクリーンナップしてくれる機能があり、デフォルト設定では次のとおりとなっていました
- Editor Global Configuration > Doctype: Mixed
- Editor Profile > Editor Parameters tab > Cleanup & Output blk > Doctype: Inherit
- Doctype: MixはHTML 4とHTML 5の仕様を組み合わせて検証するモードになります
- Editor Global Configuration > Doctype: Mixed
- その結果、Void elementであるimg要素やbr要素にはすべてスペースとバックスラッシュで閉じられるようになっていました
- マニュアルでCodeモードからスペースとバックスラッシュを削除しても、Save後元に戻ります(クリーンナップされます)
- 上記のとおり、DoctypeはProfileにてEditor毎に設定できるのですが、当サイトでは、Global ConfigurationでHTML 5を指定し、ProfileではGlobal ConfigurationのDoctype: HTML 5を継承することとしました
- Editor Global Configuration > Doctype: HTML 5
- Editor Profile > Editor Parameters tab > Cleanup & Output blk > Doctype: Inherit
- Editor Global Configuration > Doctype: HTML 5
- この設定変更により、新規に入力した場合、バックスラッシュなしで閉じられるようになり、既存のArticleもSaveし直すことで、バックスラッシュなしに修正してくれるようになりました
Img要素のalt属性
Nu Html Checkerの指摘
Error An img element must have an alt attribute, except under certain conditions.- HTML Living Standardにおいて、Img要素にはalt属性が必須となっています
- alt属性は画像の内容を補完し、また音声読み上げ機能により視覚障害者の補助となります
- なお、title属性はマウスポインタのhover時にツールチップとして視覚的補助効果があります
- わたくしは理解しているつもりでしたが、作業ミスで指定を失念してしまうことも時折ありました
- 更に、問題意識はあるのですが、JCEが自動的にファイル名をalt指定してくれるのですが、わたくしの画像のファイル名は数字のみで構成しているため、本来のalt(代替)の役をなしておりません
- 作業効率を優先して、数字のままとしておりました
- 今後は、意味のあるaltの値を指定してまいります
Cassiopeia Templateに関連するエラー
Nu Html Checkerの指摘
Error The itemprop attribute was specified, but the element is not a property of any item.
<meta itemprop="inLanguage" content="en-GB">
- この指摘については、構造化データのSchema.orgを学ぶ切っ掛けとなりました
- 次の別稿を作成し、解決策を説明しております
- Joomla!における構造化データ(Schema.org)