セマンティックサイドノートのHTML要素は何ですか？
私は自分のブログの投稿にレスポンシブなサイドノートを追加したい。次のように応答：小さなビューポートでは非表示、広いビューポートではマージンに表示されます。
小さな画面で非表示になっている場合、表示する要素（「リンク」）が必要であり、さらに読む必要があることを示します。これまでの私の解決策は：
<p>Some sentence with
<span class="sidenote" onclick="this.classList.toggle('active');">
underlined text
<span class="sidenote__content">
Sidenote content
</span>
</span>, which is clickable on small viewports.</p>
（読みやすくするために改行を追加）
CSSを使用して、下線付きのテキストとサイドノートのコンテンツの両方にアスタリスクを追加して、大画面で視覚的に接続します。
このソリューションの問題は、sidenote__content正しい表示はCSSに依存します。これは、Pocketなどのリーダーに次のように表示されます。
- 視覚的な手がかりなしで中文を表示する傍注コンテンツ
- 下線付きのテキストと傍注コンテンツの間にスペースを入れません。
単純なスパンよりもセマンティックなソリューションがあることを願っています。 <aside>および<section>はブロック要素であるため使用できません 自動的に閉じることができます 親のp要素。
解決策は、リンクからサイドノートのコンテンツを分離することです。ただし、私はサイドノートとそのリンクのセットを1つのセットまたはペアとして保持して、ポストに挿入できるようにしたいと考えています。それらを分割すると、リンクをコンテンツと一致させるためにJavaScriptロジックが必要になり、セットの半分が欠落している場合にメンテナンスの問題が発生する可能性があります。
表示するサイドノートの種類はよくわかりませんが、セマンティックの観点からは、<dfn>要素が適切な選択肢になると思います。
HTML定義要素（<dfn>） は、定義句または文のコンテキスト内で定義されている用語を示すために使用されます。
コンテンツカテゴリフローコンテンツ、フレージングコンテンツ、触知可能なコンテンツ。
許可されるコンテンツフレージングコンテンツ。ただし、子孫であってはならない要素。
あなたの要件から、大画面では<aside>内に定義を表示することが考えられると思います
HTML <aside>要素 は、コンテンツがドキュメントのメインコンテンツに間接的にのみ関連しているドキュメントの一部を表します。サイドは、サイドバーまたはコールアウトボックスとして頻繁に表示されます。
最後に重要なことですが、小さな画面では title attribute が最適な解決策になる可能性があります。これは、要素にフォーカスがあるときにのみ開くためです。また、大画面ソリューションと並行して使用しても問題はありません。