HTMLの書き方を見直し

W3CのMarkup Validation Service(マークアップバリデーションサービス)でウェブページを確認する機会がありました。
これって警告・エラーなんだ!という新しい発見がありましたのでメモします。

※2020年7月現在の内容です。

コメントの中にハイフン2つが出てくると警告

<!-- --←これがよくない -->

です。
BEMで書いているとクラス名に「--」がでてきて、その要素をコメントアウトしていたので警告を受けていました。

正しいコメントを書こう

見出しタグ(h2など)はsectionタグ内では孫要素とかでも良い

<!-- NG -->
<section>
  <div>
    <p>見出しテキスト</p>
  </div>
</section>

<!-- OK -->
<section>
  <h2>見出しテキスト</h2>
  <div>
    <p>テキスト</p>
  </div>
</section>

<!-- これもOK -->
<section>
  <div>
    <h2>見出しテキスト</h2>
  </div>
</section>

section要素のすぐの子要素でなければならないと思っていました。divを使いたいことがよくあるので一安心です。

iframe要素の廃止された属性をつかうとエラー

  • frameborder
  • scrolling
  • marginheight
  • marginwidth

これらは代わりにcssで設定するように、と書かれていました。

しかし、エラーを受けている該当のコード、yahooの!タグマネージャーの部分なんですよね...。

<noscript>
<iframe src="//b.yjtag.jp/iframe?c=XXXXXXX" width="1" height="1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</noscript>

公式に配布されているコードって弄りづらいのでこのままにしています。

ところでjavascripが無効のときに表示する <noscript>
どういう動きをするのか確認されている記事がありました。

HTML、noscriptタグの挙動について。(非表示なのか未解釈なのか)|マコトのおもちゃ箱 ~ぼへぼへ自営業者の技術メモ~

Unicode正規化フォームCでないとエラー

Unicodeユニコード)とは「符号化文字集合」というもので、UTF-8などの「文字符号化方式」とは別ものです。

分かりやすい記事です!
https://wa3.i-3-i.info/word11422.html

上記を踏まえて「正規化形式C」とは合成済み文字(例:が)のことをいいます。
結合文字列は文字列を結合したもの(例:か゛←「か」+「゛」)です。

「Text run is not in Unicode Normalization Form C.」というHTML Validation Serviceの警告について: 小粋空間

「正規化フォーム(形式)C」を使わないとエラーになるんですね。
これはどこでそう決定されるのでしょうか...。

ユーザーが画面拡大できないビューポートの設定だと警告

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

これで

Consider avoiding viewport values that prevent users from resizing documents.

という警告が出ました。
content属性の値から、 maximum-scale=1.0user-scalable=no を削除すると、ユーザーが画面サイズを変更することができます。

ビューポートもコピペで済ませている部分があるので、ちゃんと理解しないとと思います。

番外:CSSの警告・エラー

cssもチェックしたので少し載せます。

background-color と border-color は同じ色です

警告です。
同じ色だと同化してしまって背景と枠線がわからないですよ、と教えてくれているそうです。
ありがた迷惑のような気もしますが、優しさと受け取ってスルーします。

-webkit-animation is an unknown vendor extension

「-webkit-animationは不明なベンダー拡張です(Google翻訳)」という警告です。
ベンダープレフィックス関連の警告は多い印象です。
ブラウザのバージョンアップとともに -webkit- がいらなくなったりなど、刻々と変化しそうな部分なので、Autoprefixerを使っていきたいです。

CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入 - Qiita

異なる環境でも同じ表示(クロスブラウザ)と正しいcss、どちらを取るか天秤にかけたら、前者かなぁと思います。

最後に

なかなかちゃんとhtml、cssの文法と向き合うことはないのでよかったです。
でもエラーチェック・対応はたまにがいいですね。