フォーム向けの鍵ペア生成要素
<keygen>は、かつてHTML5仕様に含まれていたフォーム制御要素です。送信時にクライアント側で秘密鍵を保持し、公開鍵をサーバーへ送る仕組みを提供していました。ただし、セキュリティモデルの複雑化と標準化の都合により現在は廃止（Obsolete）となっており、現代の開発ではWeb Crypto APIなどの代替手段が推奨されます。
テキスト表示方向の強制上書き
<bdo>（Bi-Directional Override）要素は、ブラウザのデフォルト文字方向を上書きするために使用します。dir属性にrtlまたはltrを指定することで、言語設定に関わらず表示方向を固定できます。
<bdo dir="rtl">
このテキストは右から左へ強制的に流れます
</bdo>独立したメディアコンテンツとキャプション
以下の構造はHTML標準に完全に準拠しています。
<figure>
<img src="architecture_diagram.png" alt="システム構成図">
<figcaption>
<p>図1：マイクロサービス間の通信フロー</p>
</figcaption>
</figure><figure>は本文から参照されるものの、削除してもドキュメントの論理的な流れを損なわない独立コンテンツ（図表、コード、写真など）を定義します。<figcaption>はその見出しや説明を紐付けるために使われます。
<small>要素のセマンティックな用途
見出しのサブタイトルや装飾目的での使用は誤りです。本来は免責事項、著作権表記、利用規約などの「細目（fine print）」や補足的な法的テキストに適用するのが正しいセマンティクスです。CSSフレームワークで見出し内の補助文字に使われるケースもありますが、意味付けとしては小規模な注釈向けです。
複数<h1>配置と検索エンジン最適化
HTML5のセクショニングモデルでは、<article>や<section>などのセクショニングルートごとに<h1>を配置することが仕様上認められています。クローラーもこの階層構造を正しく解釈するため、適切に区切られていればSEO上の不利益にはなりません。
検索クエリのハイライト表現
検索結果ページで一致キーワードを視覚的に目立たせる場合、<mark>要素が最適です。<strong>（重要性）や<em>（強調）とは異なり、文脈上の「参照・ハイライト対象」であることを示すために設計されています。
スタイルスコープの限定属性
scoped属性が<style>に付与されていた場合、そのスタイル定義は親要素とその子孫要素のみに適用される仕様でした。
<section>
<h2>スコープ限定スタイル</h2>
<style scoped>
.highlight { color: #09f; }
</style>
<p class="highlight">この段落のみスタイルが適用されます</p>
</section>ただし、この属性は標準から削除済みです。現在のカプセル化はShadow DOM、CSS Modules、または設計規約（BEMなど）で実現します。
ブロックレベル要素を内包するアンカーリンク
HTML5以降、<a>要素はトランスペアレントコンテンツモデルを採用しており、<div>、<h2>、<p>などのブロックレベル要素を直接ラップすることが正式に許可されています。カード型コンポーネント全体をクリッカブルにする際などに有効です。
CSS非表示状態における画像リソースのフェッチ
visibility: hiddenやdisplay: noneが適用されていても、DOMツリー上に<img>が存在する限りブラウザはsrcを検知しHTTPリクエストを発行します。レンダリングパイプラインの初期段階でリソース取得がスケジュールされるため、ネットワーク帯域は消費されます。
<!-- 両パターンともリクエストが発生する -->
<img src="asset_alpha.webp" style="visibility: hidden" alt="Alpha">
<div style="display: none;">
<img src="asset_beta.webp" alt="Beta">
</div>CSSOM構築とスクリプト実行の依存関係
スタイルシートの読み込み直後に同期スクリプトが配置されている場合、ブラウザはCSSのダウンロードと解析が完了するまでJavaScriptの実行を待機します。スクリプトがgetComputedStyleなどでスタイル情報を参照する可能性があるため、レンダリングエンジンの整合性を保証する仕組みです。
<head>
<link rel="stylesheet" href="base_theme.css">
<script>
console.log('CSS解析完了後に実行される処理');
</script>
</head>複数スタイルシートの並列ダウンロードと解析順序
複数の<link>が連続する場合、ブラウザはネットワークレベルで並列ダウンロードを行いますが、解析と適用は記述順序に依存します。後続のCSSが取得できるまでスタイル計算が保留される場合があり、ダウンロード自体はブロックされなくてもレンダリングへの反映は順序通りになります。
<head>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="grid_layout.css">
</head><body>内でのCSS読み込みとJSのブロッキング特性
本文途中で<link>を読み込むと、その時点ですでに描画された要素に対してスタイル再計算（リフロー）が発生する可能性があります。ブラウザは上から順に処理を行うため、後続コンテンツの描画前にスタイルシートの取得・解析を完了させようとします。
<body>
<p>初期描画ブロック</p>
<link rel="stylesheet" href="late_styles.css">
<p>スタイル適用後に再描画されるブロック</p>
</body>一方、JavaScriptはDOM構造を直接変更する可能性があるため、デフォルトでダウンロードと実行がレンダリングをブロックします。これを回避するには、スクリプトを閉じタグ直前に配置するか、defer・async属性を活用して非同期読み込みを行うのが現代の標準的なアプローチです。