HTML
Semántica de texto en línea
Elementos HTML para expresar importancia, énfasis, citas, código, abreviaturas, fechas y otros significados dentro del texto en línea.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
HTML
Elementos HTML para expresar importancia, énfasis, citas, código, abreviaturas, fechas y otros significados dentro del texto en línea.
<p><strong>No compartas tu contraseña.</strong></p>Representa importancia, seriedad o urgencia.
Puede anidarse para aumentar el grado de importancia:
<strong>
Importante:
<strong>el pago vence hoy.</strong>
</strong><p>Necesito el informe <em>hoy</em>.</p>Representa énfasis que puede cambiar el sentido de la oración.
Mover el em cambia qué palabra recibe énfasis.
<p>
Resultado: <b class="keyword">Aprobado</b>
</p>Llama la atención sin añadir importancia especial, por ejemplo keywords, nombres de producto o leads tipográficos.
No debe usarse solo porque quieres negrilla; CSS puede estilizar un span cuando no existe significado.
<p>
La expresión <i lang="la">carpe diem</i> proviene del latín.
</p>Representa texto en voz o modo alternativo: términos técnicos, expresiones extranjeras, pensamientos o nombres taxonómicos.
strong → importancia
em → énfasis
b → atención sin importancia extra
i → voz, término o modo alternativoLa representación visual puede coincidir, pero la intención no.
<p>Resultado para: <mark>TypeScript</mark></p>Marca texto relevante dentro del contexto actual, como coincidencias de búsqueda o fragmentos destacados para análisis.
No significa importancia permanente.
<small>Aplican términos y condiciones.</small>Representa comentarios secundarios, letra pequeña, disclaimers o atribuciones.
No debe utilizarse únicamente para reducir cualquier texto.
<p><s>$120</s> $90</p>Indica contenido que ya no es preciso o relevante.
Para una edición del documento utiliza del, que comunica eliminación editorial.
<p><u class="spelling-error">recivir</u></p>Representa una anotación no textual, como un error ortográfico en ciertos contextos.
No lo uses como decoración general; el subrayado puede confundirse con enlaces.
<p>H<sub>2</sub>O</p>
<p>x<sup>2</sup></p>Representan subíndices y superíndices tipográficos con significado.
No deben usarse para reducir y mover texto decorativamente.
<span class="price">$100</span>Es un contenedor en línea sin semántica propia. Aporta cuando necesitas estilos, idioma, datos o selección sin un elemento más específico.
Pueden aparecer dentro de texto, pero representan saltos o oportunidades de salto, no estilos.
<p>
<strong>Error:</strong>
el campo <code>email</code> es <em>obligatorio</em>.
</p>Cada elemento expresa un matiz distinto.
Un navegador puede mostrar strong y b en bold, o em e i en italic. Esos defaults no definen el significado.
strong { font-weight: 600; }
em { font-style: normal; text-decoration: underline; }La semántica permanece aunque cambie el estilo.
No todos anuncian cada matiz de forma audible por defecto. La semántica sigue beneficiando otras herramientas y configuraciones, pero no debes depender únicamente de énfasis tipográfico para comunicar estados críticos.
<p><strong>Error:</strong> El correo es obligatorio.</p>El texto “Error” hace explícita la información.
<p>
DomiSys se encuentra <strong>en desarrollo activo</strong>
y actualmente migra hacia un modelo
<i lang="en">multi-tenant</i>.
</p>¿Cuál es la diferencia entre <s> y <del>?
S indica que el contenido ya no es preciso o relevante; del registra que el contenido fue eliminado como parte de una edición del documento.
Listas y descripciones organiza secuencias, conjuntos y asociaciones entre términos y detalles.