二重の強調

私の前のボスには独特の習慣がありました。言葉に過度に強調されています。 これは、WysiWyg以前の時代の本当の課題であり、手動のHTMLコーディングが必要です。

<p>
  I used to have this boss who <em>loved</em>, <strong>loved</strong>, 
  <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> 
  to emphasize words.
</p>

（彼が特に強調するために採用したカラーコーディングについても議論しないでください！）

この面倒なマークアップは疑問を投げかけました。 努力を超えて、過度の強調 - 二重またはトリプルでさえ - 良いアイデアですか？

セマンティックと視覚的強調：重要な区別

および<strong></strong>タグは、html5：<em></em>で明確な目的を果たします。

• ：「強い重要性、深刻さ、または緊急性」を示します <strong></strong>
：「ストレスの強調」を表します
• <em></em>
重量を追加し、重要性や緊急性を示唆します。 警告を検討してください：

<strong></strong>

警告：

このコンテンツは非常に素晴らしいです。

は、その注意を引く斜体化のために似ているように見えるかもしれませんが、その役割は文の中で強調を微妙に変えることです。 比較：

<em></em>両方とも強調しますが、異なる方法で、文の意味と口頭読みを変更します。

微妙なトーンを伝えることに優れています

<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>

セマンティクスを超えた視覚的強調

<em></em>時々、イタリックは純粋に視覚効果のために、セマンティックな変化なしに必要です。 いくつかのタグがこれを達成します：

：その主な機能はセマンティックですが、視覚的によく使用されます。

：citations（ "source：
• css-tricks<em></em>"）。
• <cite></cite>：連絡先の詳細（たとえば、[電子メール保護]）。
同様に、
• は視覚的な大胆さだけのためであってはなりません。 不必要な強調を避けて、本物のセマンティック重量に使用してください。 デフォルトではすでに大胆に見ている見出しは、さらに強化する必要はありません <address></address>ネストされた強調：慎重なアプローチ

ネストされた強調が必要な正当なシナリオがあります。 たとえば、スタイルのあるブロッククオート：

<strong></strong>

映画のタイトルがこのブロッククオート内で斜体化を必要とする場合、

が適切です。

理想的には、そのような場合、ネストされた斜体化を削除する必要があります。

blockquote {
  font-style: italic;
}

コンテナスタイルのクエリこれを簡素化します：

<em></em> これは、ブロッククオートがイタリック化されているかどうかをチェックし、もしそうなら、セマンティックな意味を保持しながら、ネストされた要素から斜体を削除します。 ネストされた強調を避ける

<blockquote>
  This movie's opening weekend performance... In its first weekend, <i>Avatar: The Way of Water</i> made...
</blockquote>

nested

内部（またはその逆）は一般に不要です：

blockquote i {
  font-style: normal;
}

<p>
  I used to have this boss who <em>loved</em>, <strong>loved</strong>, 
  <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> 
  to emphasize words.
</p>

最新のブラウザはレンダリングを処理しますが、意味的に冗長です。通常、1つの強調タイプで十分です。あなたの意図を最もよく伝えるもの（視覚、重量、または発表された強調）を選択してください。 スクリーンリーダーは、ネストされたマークアップをさらに重要に解釈しません

過度の強調の管理

上司が「すべての強調」を要求する場合、各強調タイプの正しいHTMLタグに優先順位を付けます。 セマンティクスに影響を与えない視覚スタイルにはCSSを使用してください：

エラー検出のためのネストされたセマンティックの強調を強調表示：

<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>

ネストされた要素からデフォルトの斜体スタイリングを削除するためのスニペットを覚えておいてください。

blockquote {
  font-style: italic;
}

追加の考慮事項

WebFontに大胆なバリエーションと斜体のバリエーションが含まれていることを確認してください

自然な強調のためにコンテンツを書き換えることを検討してください

視聴者が使用するさまざまなブラウザでテストします。

以上が二重の強調の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。