私のHTML学習法は、あたってくだけて、立て直す…

私のHTML学習法は、あたってくだけて、立て直す…

いや、短絡的なだけですが…

新しい知識を取り入れたら、ついやってみて、テンプレートが崩れて、復旧して、の繰り返しです。
テンプレートが崩れていないからと言って、うまく行っているかというと、そうでもないみたいです。

本日、終日パソコンに向かっていろいろ試す中で「W3Cのバリデータ」から指摘されたことを記録してみました。

End tag "section" seen, but there were open elements.

=閉めタグがあったけど、中に空いたままの要素(タグ)があるよ。

section、article、footerなどのセクショニングタグは、中にopen element (閉まっていないタグ)があると教えてくれます。

The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.

=border属性は廃止されましたよ。かわりにCSSの中でimgのborderを指定するよう検討してみて。

このエラーが当ブログでは最も多いです。
FC2の画像挿入ボタンは、ポチットするだけで必要な要素や属性を自動で追記してくれるとても便利な機能なのですが、この廃止されたborder="0"を必ずいれているので、画像を使うたびに注意されます。あはは。

Bad value 100% for attribute width on element img: Expected a digit but saw % instead.

⇔imgタグの中に100%という値を入れるのはよろしくないよ。数字(桁)が入るべきなのに、かわりに%が入っているよ。

画像の幅の調整が少々面倒で、width="100%"でheightを削除した状態で保存してみたら、エラーになりました。100%の代わりに1と入れるとプチくて見えませんし、100と入れると100px程度の大きさになってしまいます。それでも面倒くささに耐えられず、エラーを出したままにしちゃっています。pixel指定だとたまにはみ出ちゃっていたりするし、プロはどうやっているのかしら…

Text not allowed in element ul in this context.

⇔ulタグの中にテキストは入れられないよ。

ulタグにしても、dlタグにしても、リストの「題名」を入れてみたくなりませんか??、それで、ulタグとliタグの間に表の題名を入れてみたらエラーとなりました。そりゃそうか…

No space between attributes.

=属性間のスペースがないよ。

attributesというのは属性のことです。上記のとおり、FC2の画像挿入ボタンを使うとborder=0という枠線属性が入ってしまいます。エラーになるので取り除くのですが、勢い余って残すべき空白まで削除しちゃって、前と次のwidth属性間の空白がなくなっている時があって、こういうエラーがでます。

Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier.

属性名のダブルクォーテーションマークがあったよ。たぶんだけど、もう片方のダブルクォーテーションマークが前の方で一個抜けているんじゃない?

大抵の場合、片方のクォーテーションマークが日本語フォントになっていて、英数字で書き直します。

Bad value http://laggy2015.blog.fc2.com/?template=03-profile&index title= for attribute href on element a: Illegal character in query: space is not allowed.

aタグの中に属性タイトルとして適しない値があったよ。禁止された文字が入っているか、空白が入っているかのどっちかじゃない?

これは『&』がダメだったような気がします。

Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles.

Articleタグの中にヘッディングタグがないよ。全てのArticleにh2~h6要素のいずれかを使って(タイトルがどれかを)特定できるヘッディングタグを加えることを検討してね。

これは、「コメント」をArticleに仕立て直したときのことです。 当ブログでは、本記事と同じh2を使用することにいたしました。

Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

Articleタグの中にヘッディングタグがないよ。全てのArticleにh2~h6要素のいずれかを使って(タイトルがどれかを)特定できるヘッディングタグを加えることを検討してね。

記事本文を「section」に指定してみたのですが、hタグを一切使わない短編を書くのが好きだったりします。記事のいくつかにはhタグを投入してみたのですが、最終的には記事本文はdivタグでCSS指定することにしました。ほんのり残念ですが、そういうユルイ記事を捨てたくなかったので仕方がありません。

Empty heading.

ヘッディングタグの中身が空だよ。

↑でヘッディングタグがないよと言われたので、書き加えたら、過去コメントでタイトルが空白の場合こんなメッセージがでます。自動でNo titleが入るようにしましたが、過去記事は変わらないのでタグの中に必ず★★が入るようにしました。コメントを入れる時にタイトルを書いてくれた場合は二つの★の間にタイトルが入ります。

Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).

h1タグは最高位のヘッディングだけに使うことを検討してね。(全てのh1タグは多くのスクリーンリーダーや他のツールから最高位のヘッディングとして扱われるからね。)

ネット上には、「THML5になってからは、h1タグをセクションごとに入れてもよし!」みたいなことが書いていました。しかし、実際のところh1タグを一つ増やしてみたら、こんなエラーが…

Stray start tag script

Scriptの開始タグがはぐれているよ。

これはタグの閉め忘れです。はぐれ開始タグ… はぐれメタルみたいで、テンションが上がります。

Stray end tag cite

cite終了タグがはぐれているよ

これは逆にタグの開け忘れ。もしくは、中に別のタグや改行タグを入れられないタグの中にタグを入れてしまった時に出てきます。

No p element in scope but a p end tag seen.

pタグが見当たらないのに、qタグの終了タグがあるよ

↑の"Stray start tag"の違いは何なんでしょうね??

Unclosed element div

divタグを閉め忘れているよ。

これもタグの閉め忘れです。もしかすると抜けているタグのタイプによって言い方が違うのかも?それにしても何パターンにもわたってタグの開け閉めを忘れている私って…

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="○○○"の様に説明を入れなければなりません。テンプレートに手書きする時に、忘れてしまいます。

The type attribute on the ul element is obsolete. Use CSS instead.

ulタグの中にtype属性を入れることは廃止されたよ。かわりにCSSを使ってね。

なかなか手厳しいですね。<ul type="square">とHTMLにてスタイルを変更した際に出てきたエラーです。私の個人的な好みで、丸ポチよりも角ポチが好きなんです。でも世の中のデフォルトが丸ポチなので、単にulを選ぶと丸ポチになるんですよね。これをCSSでわざわざ書き換えるか??というと、結論としては、書き換えました。好みですから…

Element p not allowed as child of element cite in this context. (Suppressing further errors from this subtree.)

citeタグの中にpタグは内包できないよ。(このサブツリー内の更なるエラーが抑制されているよ)

引用文献・出典を囲んでいるciteタグの中にはpタグは内包できないそうです。わからなかったのは括弧内。このエラーがあることで、他のエラーが抑制されている??、このエラーがあることによって他のエラーがわからない状態になっているよと言われいると理解しました。

The summary attribute on the table element is obsolete. Consider describing the structure of the table in a caption element or in a figure element containing the table; or, simplify the structure of the table so that no description is needed.

tableタグの中でのsummery属性は、廃止されたよ。tableタグのの中ではcaptionタグかfigureタグに内包したテーブルを使うか、もしくは説明(description)が不要になるように単なるtableを使うことで、テーブル構造を表現することを検討してみてね。

しえ~。tableタグはあまり使ったことがないので、何を言っているのかさっぱり。です。確かに単なるtableに変えることですべてが解決したので、元々あったsummery属性はなんだったのか謎のままです。

Element p not allowed as child of element strong in this context. (Suppressing further errors from this subtree.)

strongタグの中にpタグは内包できないよ。(このサブツリー内の更なるエラーが抑制されているよ)

私はこういう不注意が多いみたいです。範囲を指定するdivタグもそうですが、段落を指定するpタグが強調語を囲むタグの中に入れようとする方がおかしな話なのに、たまにやっちゃっています。

Element p not allowed as child of element span in this context. (Suppressing further errors from this subtree.)

spanタグの中にpタグは内包できないよ。(このサブツリー内の更なるエラーが抑制されているよ)

pタグ大好きシリーズその3、divタグはブロック要素の範囲指定、spanタグはインライン要素の範囲指定、HTML5ではブロック要素やインライン要素という概念がなくなったと書いていたのですが、段落用のpタグとインラインでの範囲指定では、段落の方が大きいみたいですね。指摘されると、そりゃそうか…っとなるのですが、書いている時には気づかないという残念な人間です。

Duplicate ID subject. The first occurrence of ID subject was here.

ID名が重複しているよ。ID名が最初に出てきたのはここね。

ID属性はページに一つだけしか使えませんから、当ブログの例では複数ページのリストページでも一つになるように調整しないとなりませんでした。

The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.

name属性は廃止されたよ。代わりに最も近くの入れ子にid属性を入れることを検討してね。

時代というほど長くない歴史の中で、語彙がかなり変遷しているんですね。HTMLとしては機能しているものの、今は使われていませんよ。といわれるエラーは多いです。いきなり今日から禁止なんて言われても、全ての人が書き換えるわけではないので、ブラウザー上はちゃんと表現されているのでしょうね。

Attribute pubdate not allowed on element time at this point.

pubdate属性は現在time属性に許可されていないよ。

HTML5で新規導入されたといわれるtimeタグですが、pubdate属性とdatetime属性がありますが、片方は既に廃れた??模様です。本当に流れが速いですね~。

それにしてもよく間違えていますね~。あはは。

Attribute webkitallowfullscreen not allowed on element iframe at this point. Attribute mozallowfullscreen not allowed on element iframe at this point. The frameborder attribute on the iframe element is obsolete. Use CSS instead. The month input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.
スポンサーサイト

Comment

コメントを投稿する
記事: 私のHTML学習法は、あたってくだけて、立て直す…

お気軽にコメントをどうぞ~。

  非公開 (管理人のみ閲覧可能)
 

Trackback