セマンティックHTMLで、本文の構造を伝える
- 本章の論点(Question)
- 人と機械が本文の構造を読み取れるHTMLは、どう作りますか。
- 本章の命題(Assertion)
- 見出し、本文、ナビゲーションなどを意味に沿って区切ると、読者と支援技術が構造をたどりやすくなります。
更新日:
見出し、本文、ナビゲーションなどを意味に沿って区切ると、読者と支援技術が構造をたどりやすくなります。
見た目と役割を分ける
文字を大きくしただけでは見出しの役割は伝わりません。h1、h2、h3で章の関係を示し、main、article、navなどを内容の役割に沿って使います。装飾はCSSへ分けます。
本文をHTMLとして届ける
本文が最初の応答に含まれていれば、JavaScriptの実行前にも文章を読めます。静的生成もSSRも、本文をHTMLに含められます。静的生成だけの性質ではありません。
余分な要素を減らすことは保守にも役立ちます。ただし、タグを減らせばAI検索に優先されるという一般的な倍率や採用条件は確認していません。
読み取れる内容を点検する
見出しの順序、リンクの目的、表の見出し、フォームのラベルを確かめます。HTMLの構造だけで内容の正確さや検索への掲載が保証されるわけではありません。本文の品質と、実際の利用のしやすさを別に点検します。
参考資料
考え方や情報基盤の設計を組織へ導入する講演・研修も承っています。ホワイトペーパー目次・講演・研修・お問い合わせ
