HTML 5 Outlineを使ってhtmlを発想!

8563 ワード
html テキストリンク
HTML 5には、より明確な意味構造を表す記号タグが登場する.
1.パソコンはラベルを識別しやすい機能です.
2.スクリーンリーダー環境でのWebアクセスと可用性を向上させる.
3.情報の重要度に基づいて構造をリストし、検索エンジンの暴露に重要な役割を果たす.
+)業務上重要なのはh 1を書くこと(h 1は一度だけ書くことを勧める)→マーケティング思考が必要(企画者と相談すればgood!)

Outlineとは?


Webサイトのhtmlタグをディレクトリ方式で構造化することは,情報の重要度の尺度とすることができる.
(サイトとクロム拡張子をクリックすると確認できます!)
意味構造化に影響を与えるかどうかによって、次の2つに分類できます.
頭/主/足=>意味構造に影響しません
section/artice/aside/nav=>レイアウトラベルとして意味構造に影響

このような構造を構想する際、
[無意味合成]html 5の前に
<div>
    <h1>네이버 캐스트</h1>
    <h2>오픈 캐스트</h2>
    <p>이것은 오픈 캐스트의 내용입니다.</p>
    <h3>게임 캐스트</h3>
    <p>이것은 오픈캐스트의 내용입니다.</p>
    <h3>자동차 캐스트</h3>
    <p>이것은 자동차캐스트의 내용입니다.</p>
    <h3>인테리어 캐스트</h3>
    <p>이것은 자동차캐스트의 내용입니다.</p>
  </div>
[シンボルタグを使用して作成]html 5
<div>
    <h1>네이버 캐스트</h1>
    <section>
    <h2>오픈 캐스트</h2>
    <p>이것은 오픈 캐스트의 내용입니다.</p>
    <section>
    <h3>게임 캐스트</h3>
    <p>이것은 오픈캐스트의 내용입니다.</p>
    <h3>자동차 캐스트</h3>
    <p>이것은 자동차캐스트의 내용입니다.</p>
    <h3>인테리어 캐스트</h3>
    <p>이것은 자동차캐스트의 내용입니다.</p>
    </section>
    </div>

  • sectionの最初のhタグは、数字に関係なくmaintitleになります.(自動インデント)

  • sectionは、アクセス性の面でタイトルを持つことが望ましい.(見出しがuntitled sectionより大きい)
    すべてのページをこのように整理することはできませんが、重要なホームページは注意してください.
    結果は同じですが、意味構造の使用に注意したほうがいいです.
    これは、各ラベルがその機能を明確に示すことができ、私が実施したページでビジネス上最も重要な部分を強調し、構造化することができるからです.
    • 追加受講の内容
  • ヘッダー、フッターは複数回書き込み可能(一部のヘッダーとしてもよい)
  • mainは1回しか使えません.
  • セクションには、他のラベル(article,aside...)が含まれています.それに比べて、意味構造が明確ではありません.
    したがって、page storyには何の関連もありません.他の役割を果たす場合は、ツールセクションでパーティション化する場合に使用することが望ましいです.
    例)ピーク移動ツール部
    • JavaScript MapとSet、WeakMapとWeakSet
    HTMLタグの帝王