La chose à double emphase

Mon ancien patron avait une habitude particulière: un accent excessif sur les mots. Ce fut un véritable défi dans l'ère avant la wysiwyg, nécessitant un codage manuel 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>

(Ne discutons même pas du codage couleur qu'il a utilisé pour plus d'importance!)

Cette marque laborieuse a soulevé des questions. Au-delà de l'effort, est un accent excessif - double ou même triple - une bonne idée?

sémantique vs accent visuel: une distinction clé

Les balises <strong></strong> et <em></em> servent des objectifs distincts dans html5:

• <strong></strong>: indique "une forte importance, une gravité ou une urgence". "
• <em></em>: représente "l'accent mis au stress". "

<strong></strong> ajoute du poids, suggérant de l'importance ou de l'urgence. Considérez un avertissement:

AVERTISSEMENT: Ce contenu est exceptionnellement génial.

Bien que <em></em> puisse sembler similaire en raison de son italicité qui attire l'attention, son rôle est de déplacer subtilement l'accent dans une phrase. Comparez:

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

tous deux mettent l'accent, mais différemment, modifiant la signification de la phrase et la lecture orale. <em></em> excelle à transmettre le ton nuancé.

Imphase visuel au-delà de la sémantique

Parfois, les italiques sont nécessaires uniquement pour un effet visuel, sans changement sémantique. Plusieurs balises y parviennent:

• <em></em>: Bien que sa fonction principale soit sémantique, elle est souvent utilisée visuellement.
• <cite></cite>: pour les citations ("Source: CSS-Tricks ").
• <address></address>: Pour les coordonnées (par exemple, [Protégé par e-mail]).

De même, <strong></strong> ne devrait pas être uniquement pour l'audace visuelle. Utilisez-le pour un véritable poids sémantique, en évitant l'accent inutile. Les titres, déjà audacieux par défaut, ne nécessitent pas de renforcement supplémentaire.

Imphase imbriqué: une approche prudente

Il existe des scénarios légitimes où l'accent imbriqué est nécessaire. Par exemple, un Blockquote stylé:

blockquote {
  font-style: italic;
}

Si un titre de film a besoin d'italique dans ce blockquote, <em></em> est approprié, même si le conteneur est déjà en italique:

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

Idéalement, dans de tels cas, l'italicité imbriquée doit être supprimée:

blockquote i {
  font-style: normal;
}

Les requêtes de style conteneur simplifient ceci:

blockquote {
  container-name: quote;
  font-style: italic;
}

@container quote (font-style: italic) {
  em, i, cite, address {
    font-style: normal;
  }
}

Cela vérifie si le Blockquote est en italique et, dans l'affirmative, supprime les italiques des éléments imbriqués tout en préservant la signification sémantique.

éviter l'accent imbriqué

imbriqué <strong></strong> dans <em></em> (ou vice-versa) n'est généralement pas nécessaire:

<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>

Les navigateurs modernes gèrent le rendu, mais il est sémantiquement redondant. Un type d'accent suffit généralement. Choisissez celui qui transmet le mieux votre intention (visuel, poids ou accent annoncé). Les lecteurs d'écran n'interpréter pas le balisage imbriqué avec une importance supplémentaire.

Gérer un accent excessif

Si votre boss exige "tout l'accent", hiérarchisez les balises HTML correctes pour chaque type d'accent. Utilisez CSS pour les styles visuels qui n'affectent pas la sémantique:

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

mettant en évidence l'accent sémantique imbriqué pour la détection des erreurs:

blockquote {
  font-style: italic;
}

N'oubliez pas l'extrait pour retirer le style italique par défaut des éléments imbriqués.

Considérations supplémentaires

• Assurez-vous que votre webfont comprend des variations audacieuses et italiques.
• Envisagez de réécrire du contenu pour l'accent naturel.
• Tester sur divers navigateurs utilisés par votre public.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!