新宿(近々代々木に移転)で働く18歳エンジニアのブログ

思ったこととか、技術的なこと書きます。

セマンティックHTML

セマンティックHTMLとは

セマンティックHTMLとは、作成者がたくさんの労力を払って、マークアップによってコンテンツの編成と構成を実現するHTMLのことで、働きに合わせた正しい要素やタグを使用する。

例)<p>タグや<h1>タグがコンテンツに関する追加的な情報を伝える。これらのタグはそれぞれ、「これは段落」、「これは第1レベルの見出し」という情報を持つ。

議論に上がること

コードの軽量化

CSSでスタイル設定するセマンティックHTMLは、一般的に、テーブルでフォーマット設定するHTMLよりも、必要とするコードが少なくなります。ただし、テーブルを利用しない非セマンティックHTMLを記述できる点は注目に値します。これでもコードのサイズが小さくなる可能性はありますが、簡単に理解できるコードにはならないでしょう。

ここの記述があまり理解できなかったです。

アクセシビリティ

障害を持つユーザーがサイトを実行しやすくなる。ページの部分を、タイトル、見出し、段落、およびリストとして適切にラベル付けすると、スクリーンリーダーなどの補助的なテクノロジーによって解析し、障害を持つユーザーが理解できる形態でコンテンツを表示することが簡単になる。 ただしアクセシビリティ対応サイトの構築が少し簡単になる程度。

検索エンジン最適化

セマンティックHTMLは、ソフトウェアによるサイトのコンテンツの解析を簡易化することによって、検索エンジン最適化(SEO)を向上させる傾向がある。検索エンジンは、HTMLファイルに含まれるHTMLテキストをスキャンするが、CSSレンダリングは行わず、JavaScriptも実行しない。したがってHTMLに重要なコンテンツを含めない場合、検索エンジンがそのコンテンツに触れることはないため、ランキングされることはない。また、ページからHTMLのゴミが取り除かれ、コンテンツを説明するマークアップのみが残ることで、検索エンジンがより簡単にサイトの本来の内容に近づけるようになる。

ホワイトハットSEO

Google検索エンジンが推奨する検索ルール(アルゴリズム)に従い、自分のホームページやブログを検索エンジンのランキング上位に表示させるために行うさまざまな検索エンジン最適化手法や技術

ブラックハットSEO

Googleが定めるガイドラインに反し、アルゴリズムの穴を突いて不正に検索順位を上昇させるための手法

セマンティックHTMLがSEOに適しているという保証はない。Web開発者は、検索エンジンがセマンティックHTMLを支持すると考えています。Googleが進めるHTML5への投入量は、その考えを示唆しているが、検索エンジンは、そのアルゴリズムを厳密に保護しているため、非セマンティックHTMLに関連性の高いコンテンツを持たせる可能性も残しておく必要がある。

再利用

意味付けがされているので再利用できる

開発者の理解力

セマンティックHTMLを使用することで、ほかの開発者やHTML作成者にとっては、コードで実行される内容を理解しやすくなる

HTML5におけるセマンティックの実際

  • 現在の要素数108
  • 30種類の新要素
  • 14種類の既存要素の変化
  • マイクロデータ
  • WAI-ARIAとの統合

具体的な要素の解説、使い方

セクション

セクションとは、文書を"論理的に"分割した単位のこと ex)

  • 章、節、項…
  • メニュー、本文、サイドバー…
  • ページ、ダイアログ…

具体的には以下の四つ

<section>
汎用的なセクションを表す要素
<article>/<aside>/<nav>以外のセクションは全て<section>

<article>
独立した「本文」として取り扱うことが可能なセクション。
そのセクションをRSSリーダーで全文配信しても意味が通るならばarticle

<aside>
ページの他の部分と「あまり関連がない」(=重要度が低い)セクション。
ex) 広告やサイドバーガジェット
そのセクションをざっくり削ってしまっても、ページの意味内容がほとんど損なわれないなら、aside

<nav>
サイト内の「主要な」ナビゲーションメニューを表す。
内部に<ul>と<a>を用いてリンク一覧を作るのが基本。
<nav>の部分のみが「メニュー」として提示された場合に、ユーザにとって便益があるかどうかで考える。

そのセクションをRSSリーダーで全文配信しても意味が通るならば→article そのセクションをざっくり削ってしまっても、ページの意味内容がほとんど損なわれないなら→aside