セマンティックHTML - 代々木で働く22歳大学生のブログ

セマンティック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

の部分のみが「メニュー」として提示された場合に、ユーザにとって便益がある場合→nav 他はすべて→section

セクションとアウトライン

https://gyazo.com/5f21762b891783026c2b4800c50aeb05

セクションの階層構造が文書のアウトラインを構成する。つまり、セクション要素の利用＝アウトライン操作。

と同じ感覚で利用するとか、ほんとNGで、スタイル用途でブロックを作成する場合は

を使用する。

HTML5Outlinerを使うと、HTMLからアウトラインを抽出できる。

<h1>This is a section</h1>
<section><h1>And this a subsection!</h1></section>

1.This is a section
    1.And this a subsection!

セクションに関連する要素

見出し要素（h1〜h6,hgroup）
- 見出し要素（h1〜h6）は、セクションの見出し、という意味を与られている。
- 見出しのランクはセクションごとにリセットされる。
- 基本的には、h1のみを使うべし！
- セクション要素は、常に見出しとセットだと考えるべし。
- 原則的には、1セクション1見出し

<body>
    <h1>もうすぐ絶滅するという紙の書物について</h1>
    <section>
        <h1>序文</h1>
        ...
    </section>
    <section>
        <h1>本は死なない</h1>
        …
    </section>
</body>

<body>
    <hgroup> 
        <h1>HTML5&API入門</h1> 
        <h2>キャンバス、VideoからWebSocketまで</h2>
    </hgroup>
    …
</body>

セクションルート（body/blockquote/details/fieldset/figure/td） body/blockquote/details/fieldset/figure/tdといった要素はセクションルートと呼ばれ、独立したアウトラインを構築する

<body>
    <hgroup>
        <h1>HTML5&API Start Guide</h1>
        <h2>Canvas,Video,WebSocket,etc.</h2>
    </hgroup>
    <section>
        <h1>HTML5 Overview</h1>
    </section>
</body>

ヘッダ、フッタ（header/footer）

＜header＞、＜footer＞要素は、セクションのヘッダ、フッタを表すこれらにどんな要素を含めるかは自由だが、一般的には見出し要素を＜header＞に入れる

暗黙のセクション

明示的なセクションなしに見出し要素を使用すると、暗黙セクションが生成される。
暗黙セクションは推奨されない。

<body>
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h2>H2 again</h2>
</body>

<body>
    <section>
        <hgroup>
            <h1>H1</h1>
            <h2>H2</h2>
            <h3>H3</h3>
        </hgroup>
    </section>
    <section>
        <h2>H2 again</h2>
    </section>
</body>

その他

time要素
- 日付、時刻を表す要素。
- タグのtextContent、もしくはdatetime属性で日時を表すことができる。
- 日時のフォーマットはISO8601形式
- pubdate属性がtrueの場合、親となるbody/article要素の「公開日時」を表す。

<time datetime="2011/08/24T10:13:24.123+09:00"> 
    2011年8月24日 10時13分
</time>

address要素
- 親となるbody/article要素の「問い合わせ先アドレス」を表す。

<address>
    <a href=http://twitter.com/Shumpei> Shumpei Shiraishi </a>
</address>

練習

スライドの最後の部分のdiff https://github.com/tenshotanaka/markup_excersize/pull/1