適切なHTML5のセマンティクスを見る
HTML文書の構造を慎重に計画すると、 コンピュータがあなたのコンテンツの意味を理解するのを助ける. 適切な構文は確かに重要ですが、基本的にはパーサー、検索エンジン、および意味のない大量のデータを含む支援技術にのみ提供されます。.
セマンティクスに注意を払いながらフロントエンドのワークフローを改善すれば、より多くの訪問者を引き付ける高品質のコンテンツを作成できます。意味論は 意味の研究, より広い意味では、 論理と言語学の一分野.
Web開発の世界では、コンピュータがドキュメントの構造を理解するときのセマンティックコンテンツについて説明します。 その中の要素の役割. 適切なセマンティクスを作りたいのであれば、深く考える必要があります。 構造を理解する 私たちのコンテンツと 能力 フロントエンドテクノロジの概要.
それで、具体的なメリットは何ですか？適切な意味は、 より検索可能なコンテンツ それはにつながります より良い検索エンジンのランキング. また、次のような支援技術としてアクセシビリティも向上しています。 スクリーンリーダーは私たちのコンテンツの意味をよりよく理解することができます.
開発者がセマンティックページ構造を実現できるようにするためのさまざまなフロントエンド開発手法があります。この記事では、セマンティックHTMLタグと文書のアウトラインの概念について簡単に紹介します。.
セマンティックおよび非セマンティックHTMLタグ
セマンティクスの概念は、見かけほど新しいものではなく、HTML 5の時代のかなり前からありました。セマンティックウェブの用語は、2001年にSir Tim Berners-Leeによって早くも造られました。下 “セマンティックウェブ” 彼はマシンで処理できるデータのWebを意味していました.
これは主に 別々のHTML要素は、区別可能な構造的役割を持つ必要があります。. W3Cの定義によると “セマンティック要素は、ブラウザと開発者の両方にその意味を明確に説明します。”.
HTML5より前のセマンティック要素
セマンティック要素はHTML 5よりも前から存在していましたが、ほとんどの場合開発者はそれを意識していませんでした。 彼らが使用したタグのいくつかは実際にはセマンティックでした. ただ考える または
それらの役割は、私たちとユーザーエージェントの両方にとって明らかです。 以下のように、単純にフォームを含みます
の
順序付けられました そして 番号なしリスト, 段落, h1-h6見出しタグ HTML5に先行するすべてのセマンティック要素です。.
非意味的要素
非意味的要素は特別な意味を持たず、それらの間の階層的関係は単に幻想的です。セマンティックではないHTMLタグの最も広く使用されている例は、 そしてその タグ.
あなたのサイトがこれまでの恐ろしい病気に遭遇した場合 じんましん, 私が言っていること分かるでしょ。うん部門は必ずしも間違っているわけではありませんが、 じんましん 保守可能で、モジュール式で、意味のあるHTMLコードを書きたいのであれば、戦う必要があります。.
Smashing Magazineは、本物の問題が過度にそして不当に使用されていることが何であるかを美しく説明しています。 両者の間に関係はありません、ちょうどの場合のように あなたはまだに接続していると感じてもパニックにならない HTML 5では、簡単なコンテンツ編成を可能にする多くの新しいセマンティック要素が導入されました。これは、ドキュメント全体のレベルでコンテンツを整理するのに役立つだけではなく（次のセクションの詳細を参照）、インラインタグとしてテキストブロック内にもあります。. おそらく最も人気のあるテキストレベルのセマンティックタグは 現在使用されているすべてのテキストレベルのセマンティック要素については、このリストを参照してください。. 文書のアウトラインは、HTML文書の構造です。要素間の関係を示します。文書のアウトラインは、見出し、表のタイトル、フォームのタイトル、およびHTML4.01やXHTMLなどの以前のバージョンのHTMLのその他の要素をマッピングすることによってのみ生成されています。. HTML 5では、アウトラインアルゴリズムは新しいセクション要素、すなわち次のように強化されました。 HTML5には5つ目のsectioning要素がありますが、新しいものではありません。 うまく構造化された文書のアウトラインを作成したい場合は、次の規則に注意を払う必要があります。 1.一番外側のセクショニング要素は常に 2. HTML5のセクションはネストできます. 3.各セクションには独自の見出し階層があります。それらのそれぞれは（最も内側のネストされたセクションでさえ） 4.文書のアウトラインは主に5つのセクション要素によって定義されていますが、各セクションにも適切な見出しが必要です。. 5.指定されたセクションの見出しを定義するのは、常に最初の見出し要素（h1または下位の見出しタグとする）です。同じセクション内の次の見出しタグは、これに対して相対的である必要があります。 （最初の見出しがセクショニング要素内のh3である場合は、その後にh3を付けないでください。） 6.によって定義されたセクション 7.各セクション（本文、セクション、記事、さておき、nav）には独自のセクションがあります セマンティックドキュメントのアウトラインの例を見て、それがどのように機能するかをより明確にしましょう。このサンプルコードは次のようなドキュメント構造になります。 そして、これは適切なセマンティックセクショニングを使用したコードです。 これが私たちのロゴとスローガンです。. 最初のセクションの段落1 最初のセクションの段落2 第2節の第1項 第二節第二段落 上記のコードスニペットを見ると、ヘッダーとフッターはオプションであることがわかります。それらを使用するかどうかは自由に選択できますが、それは 各セクションの見出しを常に含めることを強くお勧めします, それ以外の場合は、セクションは “無題” ドキュメントアウトライン内. 幸いなことに、私たちがドキュメントのアウトラインをチェックすることを可能にするインターネット上のたくさんの素晴らしいツールがあります。今回はhtml5.orgのOutlinerツールを使います。. アウトライナから提供されたフォームにコードスニペットを挿入して、 “これの概要!” ボタンを押すと、次のような結果が表示されます。 これは サンプルコードの概要, これが検索エンジンの見方であり、スクリーンリーダーは視覚障害のあるユーザーにそれを読めます。それは意味論的で、よく構造化されていて、そして厄介なことはありません “無題” その中のセクション. アウトライナで無題のセクションがどのように見えるかを知りたい場合は、サンプルコードの見出しタグをいくつか削除してください。. セマンティックHTMLタグとドキュメントのアウトラインは、Webセマンティクスのほんの一部です。 WAI-ARIAアクセシビリティプロトコル、およびRDFaプロトコル、microdata、またはJSON-LDマークアップと一緒に使用できる構造化データの助けを借りて、Webページのコンテンツをさらに意味のあるものにすることができます。. インラインレベルでも同じように機能するタグ.-でも、 あなたはそれらを完全に捨てる必要はありません. スタイリング目的のためだけにコンテンツをグループ化する場合や、その他の最後の手段となるケースでは、まだ最適な選択肢です。. HTML5におけるテキストの意味
そして , しかしそれらはHTML5以前にも存在していました。新しいインラインセマンティック要素の中には、例えば、 , のタグ 人間が読める日時, そして にとって 強調表示されたテキスト.HTML5のドキュメントアウトライン
にとって 特定のテーマに基づいてグループ化されたセクション にとって 完全または自己完結型のコンポジション ブログ記事やウィジェットなど にとって ナビゲーションブロック にとって サイドバーなどの補足的なコンテンツ. タグ。の タグも新しいですが、ドキュメント内に新しいセクションを生成するのではなく、セクション内のコンテンツを分割します。この意味は すべてのセクショニング要素 （本文、記事、セクション、ナビゲーション、脇） 独自のヘッダとフッタを持つことができます.意味的に構造化されたコンテンツのためのヒント
タグ.h1 タグ., そしてその タグはHTMLドキュメントのメインアウトラインに属していません。タグは通常、最初は支援技術によってレンダリングされません。. タグ、そのセクションのヘッダ（ロゴ、作者名、日付、メタ情報など）とフッタ（著作権、メモ、リンクなど）を定義します。.例：セマンティックアウトライン
私達のウェブサイトへようこそ!
記事のタイトル
記事の字幕
最初の論理パート（例：「理論」）
最初のセクションのいくつかの他の副見出し
2番目の論理パート（例：「実務」）
Webセマンティクスの他の側面
