Curso HTML 4. Texto y contenido básico

Texto y contenido básico en HTML 4

En HTML 4, la estructura de texto y los elementos básicos de contenido se clasifican en dos grandes grupos: elementos de nivel de bloque (block-level) y elementos en línea (inline). A continuación veremos cada uno en detalle, sus características, ejemplos prácticos y buenas prácticas de uso.

1. Tipos de elementos

2. Elementos de nivel de bloque

2.1 Párrafos (<p>)

El elemento <p> define un párrafo. Siempre cierra con </p>. Separa bloques de texto con márgenes automáticos.

Este es un párrafo de ejemplo en HTML 4. Se usa para contener texto independiente.

2.2 Encabezados (<h2> a <h6>)

HTML 4 define seis niveles de encabezados (<h1> a <h6>), donde h1 es el más importante. Evita saltarte niveles semánticos. No uses estilo CSS en este punto.

Encabezado de nivel 2
Encabezado de nivel 3
Encabezado de nivel 4
Encabezado de nivel 5
Encabezado de nivel 6

2.3 Listas

2.3.1 Listas no ordenadas (<ul>)

  
Elemento 1
  
Elemento 2
  
Elemento 3

2.3.2 Listas ordenadas (<ol>)

  
Primer elemento
  
Segundo elemento
  
Tercer elemento

2.3.3 Listas de definición (<dl>)

  
Término 1
  
Definición asociada al término 1.
  
Término 2
  
Definición asociada al término 2.

2.4 Bloques de cita (<blockquote>)

Sirve para citas largas. Se recomienda incluir atributo cite con la fuente.

  

    Este es un texto citado, que puede ocupar varias líneas.
    Es ideal para transcribir fragmentos largos de otra fuente.
  

2.5 Texto preformateado (<pre>)

Mantiene espacios y saltos de línea tal como se escribieron.

  Línea 1 con espacios y     tabulaciones.
  Línea 2 alineada en la columna 1.

2.6 División genérica (<div>)
Contenedor de propósito genérico. Útil para agrupar bloques. No aporta semántica propia.

  
Sección dentro de un div
  
Este contenido forma parte de la misma sección.


3. Elementos en línea
3.1 Énfasis y fuerte énfasis

  Este texto tiene énfasis (cursiva)
  y este otro tiene énfasis fuerte (negrita).


3.2 Saltos de línea (<br>)
Inserta un quiebre de línea sin iniciar nuevo párrafo.

  Primera línea.

  Segunda línea tras el br.


3.3 Regla horizontal (<hr>)
Crea una línea horizontal que sirve como separación temática.
Antes de la línea.

Después de la línea.

3.4 Enlaces (<a>)
Define hipervínculos. El atributo href es obligatorio.

  Visita 
  la especificación HTML 4
  para más información.


3.5 Imágenes (<img>)
Elemento en línea. Atributos src y alt son esenciales.

  
  Texto junto a la imagen.


3.6 Span genérico (<span>)
Contenedor en línea de propósito genérico. No aporta semántica.

  Este es un texto normal y este otro está dentro de un span sin semántica propia.


4. Entidades de caracteres y codificación
HTML 4 define entidades para caracteres reservados o especiales:

&lt;  para “<”
&gt;  para “>”
&amp; para “&”
&quot; para comillas dobles “”
&nbsp; espacio no separable

Siempre especifica la codificación en la cabecera HTTP o con <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> (fuera de este apartado de contenido).
5. Buenas prácticas

Usa elementos semánticos en lugar de <div> o <span> genéricos cuando sea posible.
Cierra siempre tus etiquetas y mantén una indentación clara.
Especifica atributos alt en imágenes y title cuando aporte información útil.
Evita superponer elementos inline dentro de block-level de forma inválida (por ejemplo, no pongas <div> dentro de <span>).
Mantén un orden lógico en los encabezados (<h2> seguido de <h3>, etc.).

Con esta base de elementos de texto y contenido básico en HTML 4, puedes construir la mayoría de las estructuras de texto en páginas web clásicas, garantizando accesibilidad, semántica y correcto renderizado en navegadores compatibles con esta versión.


  Anterior  Siguiente