Esta guía te ayudará a repasar las etiquetas HTML fundamentales para añadir y dar significado semántico al texto de tu página web.
Aprender a jerarquizar la información usando las etiquetas de encabezado (<h1> – <h6>).
Utilizar la etiqueta de párrafo (<p>) para estructurar bloques de texto.
Diferenciar y aplicar las etiquetas de formato en línea <strong> y <em> para dar importancia o énfasis al texto.
Comprender el concepto de semántica: decirle al navegador el significado del contenido, no solo su apariencia.
Los encabezados se usan para definir los títulos y subtítulos de tu contenido. Son cruciales para que tanto los usuarios como los motores de búsqueda (como Google) entiendan la estructura de tu página.
Etiquetas: Van desde <h1> hasta <h6>.
Jerarquía:
<h1>: El más importante. Debe ser el título principal de la página. Por buena práctica, solo debe haber un <h1> por página.
<h2>: Subtítulo principal, para secciones importantes.
<h3> a <h6>: Subtítulos de menor nivel para sub-secciones.
Visualmente, los navegadores muestran los encabezados con tamaños de fuente y grosores decrecientes.
Ejemplo de código:
HTML
<body>
<h1>El Título Principal de Mi Página</h1>
<h2>Este es un Subtítulo Importante</h2>
<h3>Otro subtítulo con menor importancia</h3>
<h6>Y el nivel 6, el menos importante</h6>
</body>
Para cualquier bloque de texto que no sea un título, se utiliza la etiqueta de párrafo.
Etiqueta: <p>
Función: Envuelve un bloque de texto, como una oración o un conjunto de oraciones. El navegador añade automáticamente un espacio vertical entre párrafos consecutivos para separarlos visualmente.
Ejemplo de código:
HTML
<body>
<h1>El Título Principal de Mi Página</h1>
<p>Este es un párrafo de texto. Aquí puedo escribir una descripción larga sobre el tema de mi página. El navegador lo mostrará como un bloque de texto estándar.</p>
<p>Si quiero empezar un nuevo párrafo, simplemente abro una nueva etiqueta p. Cada etiqueta crea un nuevo bloque.</p>
</body>
A veces, necesitas resaltar palabras o frases específicas dentro de un párrafo. Para esto, usamos etiquetas en línea que tienen un significado semántico.
Propósito: Se usa para indicar que un texto es de gran importancia, seriedad o urgencia. Le dice al navegador “esto es crucial”.
Apariencia por defecto: Negrita.
Propósito: Se usa para dar énfasis a una palabra o frase, similar a cómo cambiarías el tono de tu voz al hablar para destacar algo.
Apariencia por defecto: Cursiva.
La Clave es la Semántica: Aunque visualmente se vean como negrita y cursiva, usar <strong> y <em> le da más contexto al navegador y a tecnologías de asistencia (como lectores de pantalla para personas con discapacidad visual) sobre el significado de tu texto.
Ejemplo de código:
HTML
<p>Este es un párrafo de texto. Es <strong>muy importante</strong> que entiendas que la etiqueta strong se usa para destacar la importancia. Por otro lado, la etiqueta em se usa para poner <em>énfasis</em> en una palabra, como lo harías al hablar.</p>
|
Etiqueta |
Nombre |
Uso Principal |
|
<h1> – <h6> |
Encabezados |
Títulos y subtítulos, organizan el contenido jerárquicamente. |
|
<p> |
Párrafo |
Bloques de texto estándar. |
|
<strong> |
Importancia Fuerte |
Resaltar contenido crucial (visualmente en negrita). |
|
<em> |
Énfasis |
Enfatizar texto (visualmente en cursiva). |
Exportar a Hojas de cálculo
¡Perfecto! Ahora tienes las herramientas para construir una página web con texto bien estructurado y con significado.
