表現力豊かなHTML5タグ

ウェブサイトのデザインにおいて意味のある要素とは、ブラウザと開発者の両方に効果的に意味を伝える固有の意味を持つ要素です。HTML5では、ウェブサイト上の要素の目的を明確にする表現力豊かなタグが導入されました。たとえば、 ナビ 要素はナビゲーションリンクを定義しますが、 主要 要素はウェブページの主要なコンテンツ（「document」と呼ばれることが多い）を識別します。一方、 部門 要素には固有の意味がないため、Div ブロックは意味のある要素とは見なされません。

Webflow を利用すると、これらのタグをサイト デザインに組み込んで、アクセシビリティと整理を向上させることができます。

このチュートリアルでは、次のことを学びます。

1. 表現力豊かなタグを活用するための手順
2. 表現力豊かなタグを活用する利点

表現力豊かなタグを活用するためのヒント

Webflowでは、さまざまな表現力豊かなHTML5タグを要素に割り当てることができます。 要素設定パネル特定の目的を果たし、固有の意味を持つ要素 (ヘッダー、フッター、ナビゲーションなど) には、表現力豊かなタグを使用するのが賢明です。

‍最高のアドバイス: 各表現要素をその目的に応じて適切に使用することで、ブラウザはその要素のアクセシビリティを向上させる作業の大部分を自動化できます。

Webflow で使用できる表現力豊かな HTML5 タグには、次のものがあります。

• ヘッダ — 通常はページの上部に配置される、ページのヘッダーまたはセクションを確立し、見出し要素、ロゴ、検索フォームなどを含む導入機能を果たします。
• フッター — document またはセクションのフッターを指定します。これには、著者情報、関連ページへのリンクなどが含まれる場合があります。
• ナビ — document内のナビゲーションリンクのセットを示します。メニュー、目次、索引によく使用されます。
• 主要 — documentの主な内容を定義します。 主要 要素には、ナビゲーション リンク、サイト ロゴ、検索フォームなどの繰り返しコンテンツを含めないでください。
• セクション — 同様のテーマのコンテンツをグループ化する document のセクションを区切ります。Webflow の セクション 要素には セクション デフォルトでは HTML5 タグです。
• 記事 — フォーラム投稿、新聞記事、ブログ投稿など、ページ上の自己完結型の構成を特徴づけます
• 余談 — サイドバーやコールアウトなど、メインページのコンテンツとは別のコンテンツを指定します
• 住所 — 論文または記事の著者/所有者の連絡先情報を指定します‍
• 形 — 自己完結型のコンテンツ（イラスト、図、写真、コードブロックなど）を区別します。

表現力豊かなタグをサイト上の要素に統合するには:

1. Webflowキャンバス上の要素を選択する
2. アクセス 要素設定パネル
3. 選択した要素に適したHTML5タグを以下から選択します。 鬼ごっこ落ちる

不可欠： ナビゲーション バーなどの特定の要素には定義済みの HTML5 タグが備わっており、H1 ～ H6 要素やリストなどの要素には意味的な意味が事前に割り当てられているため、それらに対して HTML5 タグを定義することはできません。

表現力豊かなタグの利点 

表現タグは、サイトの視覚的なデザインに影響を与えることなく、表現目的のみに実装されます。ただし、デザイナー、開発者、サイト訪問者にとって、多くの重要なメリットがあります。 

デザイナーと開発者向け

表現力豊かな HTML5 タグは、意味のある要素とデザイン専用に使用される要素を区別し、コードの可読性と保守性を高めます。デザイナーや開発者がサイトのコンテンツと見出しの階層を論理的に構造化するのに役立ちます。さらに、セマンティック HTML は非セマンティック コードに比べてファイル サイズが小さくなることが多いため、HTML5 タグはサイトのパフォーマンスと SEO の向上にも貢献します。検索エンジンは、Div 要素などの非セマンティック要素に含まれるキーワードよりも、セマンティック要素内のキーワードを優先します。

アクセシビリティについて 

目の見えるユーザーは、視覚的なデザインに基づいてさまざまな Web ページのコンポーネントを直感的に認識できますが、視覚障害のあるユーザーや Web クローラーは、Web サイトのコンポーネントを視覚的に識別して理解することが困難です。表現力豊かな HTML5 タグを使用して要素を意味的に定義することにより、Web クローラーや支援技術 (スクリーン リーダーなど) に Web サイトのさまざまな部分を通知し、サイト訪問者に対して要素をより正確にレンダリングして伝達できるようにします。

もっと詳しく知る：

• HTML5 セマンティック要素と Webflow: 必須ガイド
• HTML: アクセシビリティの優れた基礎
• セマンティック HTML5 要素の説明