Code Cats Studio

Formato y Texto en HTML

Formato básico de texto

El formato de texto en HTML permite resaltar, enfatizar o modificar la apariencia de palabras y frases dentro de un documento.

• <b> → Aplica negrita sin valor semántico.
• <i> → Aplica cursiva.
• <u> → Subraya el texto.
• <strong> → Texto semánticamente importante.
• <em> → Énfasis semántico (cursiva).
• <small> → Texto más pequeño.
• <mark> → Texto resaltado como con un marcador.
• <del> → Texto tachado.
• <ins> → Texto insertado (subrayado).

<p>Esto es un <b>texto en negrita</b>.</p>
<p>Ejemplo en <i>cursiva</i>.</p>
<p><u>Texto subrayado</u></p>
<p><strong>Atención:</strong> revise los datos.</p>
<p>Esto es <em>muy importante</em>.</p>
<p>Texto normal <small>(nota aclaratoria)</small></p>
<p>Esto es <mark>texto destacado</mark></p>
<p><del>Texto eliminado</del></p>
<p><ins>Texto añadido</ins></p>

Etiquetas semánticas de texto

• <abbr> → Abreviaturas: <abbr title="HyperText Markup Language">HTML</abbr>
• <address> → Información de contacto.
• <cite> → Obras citadas.
• <code> → Fragmentos de código.
• <q> → Citas cortas.
• <dfn> → Define un término.
• <var> → Variables en ejemplos o fórmulas.

Listas en HTML

Tipos de listas:

1. Listas desordenadas (<ul>).
2. Listas ordenadas (<ol>).
3. Listas de definición (<dl>).

<ul>
  <li>Pan</li>
  <li>Leche</li>
  <li>Huevos</li>
</ul>

Tablas y sus componentes

<table border="1">
  <caption>Tabla de estudiantes</caption>
  <thead>
    <tr><th>Nombre</th><th>Edad</th></tr>
  </thead>
  <tbody>
    <tr><td>Ana</td><td>20</td></tr>
    <tr><td>Diego</td><td>22</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>2</td></tr>
  </tfoot>
</table>

Resumen

• Dar formato y énfasis al texto.
• Utilizar etiquetas semánticas.
• Crear listas ordenadas, desordenadas y de definición.
• Construir tablas simples y estructuradas.
• Representar símbolos, entidades y emojis.