自作したWordPressのテーマで出力されるHTMLがHTML5標準に準拠してるか確認したい！
PHPやJavaScriptが混在してると目視やエディタで確認するのが難しかったりします。そんな時にこのサービスが便利です。
概要
WEB技術の標準化を行う非営利団体であるW3C（World Wide Web Consortium）が公開してる「W3C Markup Validation Service」というサービスを使うことで、指定のURL、アップロードしたファイル、または、直接WEBページにコピペなどで入力したHTML、CSSがHTML5標準に準拠してるか確認することができる。
「W3C Markup Validation Service」は下記より使用できる。
出力例
「W3C Markup Validation Service」の出力例とその対応策をいくつか挙げる。
Error: CSS: code Parse Error.
パースエラー。
入力したCSSの構文が間違ってる。
対応策
構文をチェックして間違いを修正する。
Error: Unclosed element tag.
タグが閉じられてない。
ありがち。
対応策
タグを閉じる。または、不要なタグであれば消す。
Error: No tag element in scope but a tag end tag seen.
開いてないタグを閉じようしてる。
続いてありがち。
対応策
タグを開く。または、不要なタグであれば消す。
Warning: The type attribute is unnecessary for JavaScript resources.
HTML5では、scriptタグの中の属性type='text/javascriptは不要ということなんだけども、プラグインやWordPressの関数wp_head()の中で使われちゃったりしてる。
対応策
function.phpに下記のアクションフックを追記して対応する
add_action('template_redirect', function () {
ob_start(function ($buf) {
$buf = str_replace(array(' type="text/javascript"'," type='text/javascript'"),'',$buf);
return $buf;
});
});Warning: The type attribute for the style element is not needed and should be omitted.
HTML5では、styleタグの中の属性type='text/cssは不要ということなんだけども、こちらもscriptタグと同じでプラグインやWordPressの関数wp_head()の中で使われちゃったりしてる。
対応策
function.phpに下記のアクションフックを追記して対応する。
add_action('template_redirect', function () {
ob_start(function ($buf) {
$buf = str_replace(array(' type="text/css"'," type='text/css'"),'',$buf);
return $buf;
});
});scriptタグへの対応と合わせて、下記の方が良いかもしれない。
add_action('template_redirect', function () {
ob_start(function ($buf) {
$buf = str_replace(array(' type="text/javascript"'," type='text/javascript'", ' type="text/css"'," type='text/css'"),'',$buf);
return $buf;
});
});Error: The text content of element script was not in the required format: Expected space, tab, newline, or slash but found * instead.
本来、スペース、タブ、改行、または、スラッシュがあるべきところに * がある。
文法エラーみたいなもの？？
対応策
私の経験談ですが、MathJax.jsを読み込んでる箇所でエラーが出てて、下記のように直したらエラーが消えた。
修正前
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML"></script>
<script>
MathJax.Hub.Config({
displayAlign: "left",
});
</script>修正後
<script>
MathJax.Hub.Config({
displayAlign: "left",
});
</script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML"></script>Warning: Consider using the h1 element as a top-level heading only
h1タグをトップレベルの見出しとしてのみ使用するべし！
対応策
h1タグは1つだけ使う。
h1タグを1つしか使ってないのにも関わらずこの警告がでる場合、後述するsectionタグ、aricleタグの警告を解決すれば、この警告も一緒に消えてくれることがある。（経験談）
Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
sectionタグの中に見出しがないぞ！h2-h6タグで見出しを作るべし！
対応策
階層に合わせてh2-h6タグで見出しを作る。
Warning: Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles.
articleタグの中に見出しがないぞ！h2-h6タグで見出しを作るべし！
対応策
階層に合わせてh2-h6タグで見出しを作る。
Error: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
imgタグにalt属性が無いぞ！！！
対応策
imgタグにalt属性を追加する。
下記のように属性に値を設定しなくてもいい。
<img src="/thumbnail.png" alt="" />まとめ（感想文）
せこせこテーマを直してます。
section、articleまわりがだいぶ怪しかったんだけど、なんとかエラー、警告共に消してやった！
