意味化ラベルについて考える
2391 ワード
現在htmlはますます意味化を提唱しており、開発者がドキュメントをよりよく理解するのに便利であるだけでなく、コンピュータがドキュメントに対する理解をより友好的にすることもできます.例えば人工知能の意味分析、検索エンジンの検索分析、視力読書障害者を補助するスクリーンリーダーなどのソフトウェアは、意味化ラベルの助けで、より良い仕事をすることができます.
ドキュメント構造
html 5を学ぶ過程で、いくつかの新しいラベルが知り、ドキュメントの構造をより明確に表現することができます(元はdivで、idやclassを加えて区別する可能性があります).簡単な例を挙げる html head header(ウェブサイトのタイトル、またはロゴ、SLOGANなどを含む) nav(ナビゲーションバー) main(ドキュメントの主な内容は、サイドバー、ナビゲーションバー、著作権情報、ウェブサイトロゴなどの付属情報を含まない) article(ドキュメントの中で他の部分から離れることができて、独立して完全で、甚だしきに至っては多重化することができる一部、通常は自分のタイトルがあって、articleにarticleを埋め込む時、中外層の内容は関連しているべきで、例えば微博とその評論) section(ドキュメントのテーマ的な内容で、通常は自分のタイトルもあり、articleとの違いは彼が全体の一部であるか、文章の一節である) aside(サイドバーまたは埋め込みコンテンツは、一般的には、全体の影響を受けずに独立して分割されたものと考えられるが、インデックス、見出しリスト、または広告、著者資料紹介などのページおよびサイトの付属情報など、主なコンテンツの付属情報として扱われる) . footer(フッター、通常は作者、著作権情報または関連リンクなどを含む)
html要素の意味化とレイアウトの注意
よく使われるhtml要素、特にhtmlテキスト要素の意味化の使用には、最適化や注意すべき点もあります. である.ホワイトスペース折り畳み:ブラウザが2つ以上のホワイトスペース要素(スペース、改行)に遭遇すると、1つのスペースに折り畳まれます.自分でコードするときは改行に注意して ドキュメントのいくつかの埋め込みコンテンツ、例えば引用された画像、イラスト、表、コードセグメントなどは、独立したユニットとして使用することができ、この部分が付録や他のページに移行したときに本体に影響を与えることはなく、このような要素は を行うことができる. img要素にはalt情報が付随することが望ましい.すなわち、画像が表示できない場合、このテキスト記述 が表示される. table要素は現在もより良い意味化構造要素があります captionテーブルのタイトル thead表のヘッダー行 を配置するのに適しています. tbodyテーブルの本体部 tfootテーブルの脚注部 formフォーム要素、 labelラベルinput要素の寸法を定義し、フォームコントロールの可用性を改善しました.labelラベルをクリックすると、対応するコントロールに自動的にフォーカスします.labelラベルには一般的に2つの使い方があります. labelのfor属性は、 などのコントロールのidに対応する.
以上、今回のミッション1で使われる可能性のある情報ですが、漏れや間違いがある可能性がありますので、ご指摘ください.参考資料:『HTML&CSS設計と構築サイト』
意味化ラベルについて考える
ドキュメント構造
html 5を学ぶ過程で、いくつかの新しいラベルが知り、ドキュメントの構造をより明確に表現することができます(元はdivで、idやclassを加えて区別する可能性があります).簡単な例を挙げる
html要素の意味化とレイアウトの注意
よく使われるhtml要素、特にhtmlテキスト要素の意味化の使用には、最適化や注意すべき点もあります.
と
と
は、その効果の差は多くなく同じであるが、前者の意味化はより友好的である
を使うべきです.
要素内に配置することができ、また、そのサブエレメント
を組み合わせて、良好なエレメント説明または注釈情報
2. label ,
* placeholder , ,
* radio checkbox select , radio, checkbox checked option selected
以上、今回のミッション1で使われる可能性のある情報ですが、漏れや間違いがある可能性がありますので、ご指摘ください.参考資料:『HTML&CSS設計と構築サイト』
意味化ラベルについて考える