Copie de rédaction avec HTML sémantique

Le contrôle de la version du contenu Web repose souvent sur le suivi des modifications des traitements de texte. Cependant, HTML propose des éléments intégrés pour cela:<del></del> ,<ins></ins> , et<mark></mark> . Combinés avec d'autres éléments et CSS, ceux-ci fournissent des fonctionnalités similaires à Word ou Google Docs.

Commençons par<ins></ins> .

Le<ins></ins> L'élément désigne du texte inséré. Tout en suggérant un ajout, le texte est intrinsèquement déjà présent dans la balise. Le navigateur souligne généralement le texte inséré. Ce repère visuel, bien que potentiellement confondu avec les soulignements de<u></u> ou des liens, est utile.

Maintenant, coupons l'insertion avec<del></del> , qui marque le texte supprimé.

Style des navigateurs<del></del> avec un strikethrough, similaire à<s></s> , mais avec différentes significations sémantiques.<del></del> indique le contenu supprimé pour l'édition, tandis que<s></s> signifie des informations obsolètes ou inexactes.

Ces éléments sémantiques fournissent des indices visuels de base. Cependant, ils ont également un attribut cite pour annoter les changements avec une URL expliquant la justification de l'édition. Malheureusement, cette URL n'est pas directement visible ou cliquable. Bien que sémantiquement précieux, CSS est nécessaire pour l'affichage et même alors, la cliqueté et la copie restent des problèmes. Emballage<ins></ins> et<del></del> dans les liens ne clarifie pas si le lien fait partie de l'édition.

Un attribut plus utile partagé par<ins></ins> et<del></del> est datetime , spécifiant l'horodatage de l'édition. Bien qu'il ne soit pas immédiatement visible par l'utilisateur, il maintient la clarté sémantique.

Le format datetime de HTML exige une précision, nécessitant un jour, un mois et une année spécifiques pour<ins></ins> et<del></del> pour éviter l'ambiguïté. CSS peut améliorer la clarté, par exemple, en révélant la valeur datetime sur le plan de survol. Les cases à cocher peuvent également être utilisées pour un contrôle interactif.

Une copie efficace va au-delà de l'ajout et de la suppression. Cela implique de comprendre l'intention de l'auteur. Entrez dans<mark></mark> élément.

<mark></mark> met en évidence le texte d'un intérêt particulier, généralement avec un fond jaune.

Pour les notes de l'éditeur,<aside></aside> peut contenir des commentaires plus longs. Les commentaires en ligne pour la structure de la phrase ou le choix des mots nécessitent l'ingéniosité et le CSS.

Le<u></u> L'élément, souvent évité en raison de la confusion des liens, peut mettre en évidence les fautes d'orthographe, à condition qu'il utilise une couleur distincte (comme le rouge) pour éviter l'ambiguïté avec les liens.

Le style de navigateur par défaut pour<ins></ins> ,<del></del> , et<mark></mark> est utile mais potentiellement déroutant. Pour améliorer la clarté, considérez CSS personnalisé:

 ins {
  rembourrage: 0 0.125em;
  Décoration du texte: aucune;
  Color d'arrière-plan: LightGreen;
}
del {
  rembourrage: 0 0.125em;
  Décoration du texte: aucune;
  Color en arrière-plan: rose;
}
marque {
  rembourrage: 0 0.125em;
}
.note {
  rembourrage: 0 0.125em;
  Color d'arrière-plan: LightBlue;
}
à part Not {
  rembourrage: 0,5em 1EM;
}
u {
  Décoration du texte: aucune;
  Border-Bottom: 3px rouge en pointillés;
}

Tandis que l'animation CSS pourrait améliorer les commentaires visuels, la décoloration<del></del> Le contenu n'est pas simple en raison des limites avec display: none . L'utilisation de visibility avec une hauteur et une largeur nulles permet la décoloration plus fluide.

En conclusion, HTML fournit des outils pour le suivi des modifications. Un style soigneux et une considération de l'accessibilité (comme l'a noté Adrian Roselli dans les commentaires de l'article original) sont cruciaux pour une mise en œuvre efficace.

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!