適切な「マークアップ」をする為に必要なHTML知識
HTML 標準
Living Standard(Since 2019)
Web Hypertext Application Technology Working Group
※W3C HTML５ は廃止になった（Superseded Recommendation）。
日本語訳
各ブラウザの対応状況確認
Implemented Standard
Can I use
HTML Content Model
HTML要素は、要素のコンテンツモデルで説明される要求に一致するコンテンツを持たなければならない。要素のコンテンツは、DOMにおけるその子である。
コンテンツの種類
HTMLにおいて各要素は、0個以上の、類似の特性を持つグループ要素であるカテゴリーに分類される。次の大まかなカテゴリーがこの仕様で使用されている
- フローコンテンツ(Flow Content)
文書およびアプリケーションのbodyで使用される多くの要素は、フローコンテンツとして分類される。
- メタデータコンテンツ(Metadata content)
メタデータコンテンツは、見栄えまたは後のコンテンツの振る舞いを設定する、または他の文書との関係を設定する、または他の"帯域外の"情報を運搬するコンテンツである。⭐️display:none;
- 見出しコンテンツ(Heading content)
ヘディングコンテンツはセクションの見出しを定義する（明示的にセクショニングコンテンツ要素を用いてマークアップされようとなかろうと、またはヘディングコンテンツ自体によって暗黙であろうとなかろうと）。
- 区分コンテンツ(Sectioning content)
セクショニングコンテンツは、headerおよびfooter要素の範囲を定義するコンテンツである。
⭐️display:block;
- 記述コンテンツ (Phrasing content)
フレージングコンテンツは、文書のテキストおよび段落内レベルでそのテキストをマークアップする要素である。段落からフレージングコンテンツが続く。⭐️display:inline|inline-block|none;
- 埋め込みコンテンツ(Embedded content)
エンベディッドコンテンツは、他のリソースから文書に取り込むコンテンツであるか、文書へ挿入される他の語彙由来のコンテンツである。⭐️display:inline|inline-block;
- 対話型コンテンツ (Interactive content)
インタラクティブコンテンツは、特にユーザーとの交流を意図するコンテンツである。⭐️display:inline|inline-block;
- その他
知覚可能コンテンツ(Palpable content)
一般的な規則として、コンテンツモデルが任意のフローコンテンツまたはフレージングコンテンツを許可する要素は、コンテンツ内に少なくとも1つのノードを持つべきである。これがパルパブルコンテンツであり、hidden属性が指定されていない。
スクリプト対応要素 (Script-supporting elements)
スクリプトサポート要素は、自分自身で何も表さない（つまりこれらはレンダリングされない）が、たとえばユーザーに機能を提供するために、スクリプトをサポートするために使用される。
<script><template>
透過的コンテンツモデル(transparent content model)
いくつかの要素は透過的といわれる。コンテンツモデルの説明でそれらの要素は"透過的"とされる。透過的な要素のコンテンツモデルは、その親要素のコンテンツモデルを受け継ぐ。"透過的"であるコンテンツモデルの役割で要求される要素は、透過的な要素がある、透過的な親要素のコンテンツモデルの役割で要求されるものと同じ要素である。
透過的なコンテンツが親を持たない場合、"透過的"であるそのコンテンツモデルの役割は、代わりに任意のフローコンテンツを受け入れるものとして扱われなければならない。
<a>,<ins>,<del>,<object>,<video>,<audio>,<map>,<noscript>,<canvas>
Quiz : 下記は適切な「マークアップ」？
<p>
<a>
<div>Is it valid?</div>
</a>
</p>
答え：適切ではない。
<p> <!-- content model: phrasing -->
<a><!-- Category :flow,phrasing,interactive,palpable
Content model:transparent == phrasing-->
<div>Is it valid?</div>
<!-- Category :flow, palpable
Div element is not phrasing content
Only phrasing content is allowed here-->
</a>
</p>
<a>が透過的コンテンツのため子が何がきても問題ない。しかし、透過的コンテンツは親のContent Modelに従う。上記コードで<a>の親がphrasingコンテンツの為、<a>もphrasingコンテンツになる。phrasingコンテンツはflowコンテンツ<p>を子として持てない。
※<a> に hrefがないのは有効。HTML5から
SEO（Search Engine Optimization）対策について
Chrome LighthouseでSEO対策を点数で見ることができる!!
検索エンジンに影響を与える要素はたくさんあるけど、
最重要項目はページタイトル！！
SEOに効果的な html lang属性
<html lang="ja">
lang属性は検索エンジンが特定言語のコンテンツを探すとき役立つ情報。
特に、視覚障害を持つユーザーやスクリーンリーダーユーザーにとって、言語指定は重要なヒントになる。
スクリーンリーダーは、指定された言語に基づいて適切な音声エンジンを選択し、ユーザーがコンテンツを理解できるようする。言語の指定がない場合、スクリーンリーダーは適切な読み上げを行うのに困難を抱えることがある。言語の指定はアクセシビリティを向上させるために重要な要素！！
SEOに効果的な title
１. 本文内容を最もよく説明するキーワード重心に
2. 短くする（PCブラウザでは30文字程度が目安）
3. ページごとに具体的で固有のキーワードを使用
※タイトルはBrowser tabに表示される為、ページことに同じタイトルだとUXが悪い
※Accesiblity：スクリーンリーダーを使用する人がウェブページにアクセスすると、最初にページタイトルを音声で流すため、ユーザーは自分がアクセスしようとしたページに確実に入ったかをすぐに認識することができる。
4. ページごとに繰り返すキーワードは最小限
5. 具体的なキーワードを前に配置する
下記のように具体的なキーワードを後置するとTabが小さくなる場合キーワードが隠れてします。
SEOに効果的な meta
<meta charset="utf-8" />
:utf-8にすると全世界の言語を文字化け無しに表示ができる
<meta name="description" content="A description of the page" />
:name="description"検索結果画面に表示されるテキスト
<meta name="viewport" content="width=device-width,initial-scale=1">
：このWebPageがモバイルでも見れるように最適化されているかを検索エンジに伝える
<meta property="og:site_name" content="サイト名" />
：OGP
OGP とは Open Graph Protocol (オープン・グラフ・プロトコル)の略称です。
Facebook、TwitterなどのSNS上でシェアされた時やシェアされたい時に、ページのタイトル、URL、概要、画像（サムネイル）を正しく伝えるためにHTMLソースに記述するタグ情報です。
OGP設定方法などは下記リングを参考に
https://seopack.jp/seo_articles/ogp.php#:~:text=のSEO対策-,OGPの記述方法,-設定したい
HTML概要・輪郭 ：Outline
Chrome HeadingsMap extention でそのページのOutlineが見れる。
Title vs Heading
<title> ページのタイトル。ページ内で一つのタイトルだけ存在する。
<h*> sectionのタイトル。ページ内で複数存在しても問題ない。Googleがどう判断するかば別だけど、、、
Heading タグ
概要を形成する基本(=必須)アイテム
BrowserやScreen Readerが概要把握する手掛かりになる。
他のSectioning content、例え<article>,<aside>,<nav>,<section>は省略しても構わない。
しかし、<h*>は省略してはいけない！！絶対！！
Why?<h*>はdocumentの骨格を説明する大事なタグだから
Discussion