LoginSignup
3
3

More than 5 years have passed since last update.

htmlのバリデーション

Posted at

htmlファイルのバリデートに関してです.
htmlを書くときにW3Cで定められたいろいろなルールがあると思います.
例えば,インライン要素の中に,ブロック要素を入れてはいけないなどです.

ですが,以下の二つを実際に表示してみると,クリック可能な範囲が異なるものの,どちらも表示されます.
(h1要素はブロック要素,a要素はインライン要素です.したがって,h1要素内にa要素を入れるのがW3C的には正しい)

<h1>
    <a href="#">リンク</a>
</h1>
<a href="#">
    <h1>リンク</h1>
</a>

このようなものでも,

にバリデートをかけたいhtmlファイルをアップデートすると,書式が間違っている箇所を教えてくれます.
やってみると,「あ,この書き方だめだったんだ.知らなった!」のようなこともあるので,ぜひ試してみてください.

ちなみに,上の例(a要素内にh1要素)だと,

Error Line 22, Column 16: document type does not allow element "a" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag
<a href="#">

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

と、

Error Line 23, Column 12: document type does not allow element "h1" here; missing one of "object", "ins", "del", "map", "button" start-tag
<h1>link</h1>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

のように,インライン要素の中に、ブロック要素をいれるな!!とちゃんと注意してくれます.

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3