Curso de HTML y XHTML para CSS - Cuarta semana
Texto en los documentos HTML
En nuestros documentos siempre usaremos elementos estructurales, o sea, aquellos elementos que describen la naturaleza del contenido. No usaremos elementos que describan la apariencia del contenido.
Cabeceras y párrafos
Son los bloques básicos en la estructura de un documento HTML.
Cabeceras
Hay 6 niveles de cabeceras, desde h1 hasta h6. Se recomienda que las cabeceras mantengan una progresión lógica. Son muy útiles para dar una estructura jerárquica al documento, lo que mejora su accesibilidad.
Espacios en blanco en el código HTML
Los espacios en blanco en el código hacen referencia a espacios, tabuladores, retornos de carro, etc. Con HTML se pueden usar para mejorar la legibilidad del código. El navegador muestra siempre la suma de todos ellos juntos como un único espacio.
Es por ello que no se puede usar HTML para crear espacios en blanco en una página. Ha de hacerse mediante hojas de estilos.
Párrafos
Se definen usando el elemento <p>, y no sirven para separar bloques de texto como se han usado muchas veces. Son contenedores de texto, imágenes y otro contenido.
Una página estructurada con estos elementos y sin ningún estilo asociado, se muestra según el estilo por defecto del navegador (suele ser fondo blanco, texto negro, Times New Roman, etc.), o por las preferencias del usuario.
Hojas de estilo
Si hemos dicho que el HTML sólo debe tener información acerca del contenido, las hojas de estilo son los documentos que mantienen la información sobre su apariencia.
La manera de indicar a un documento HTML qué estilo/s debe usar, es mediante un enlace dentro del documento HTML, dentro de la cabecera (head) de dicho documento.
<html><head><title>Mi página</title><link rel="stylesheet" type="text/css" href="css/estilos.css" /></head>
Elementos de bloque y en línea
Los párrafos, cabeceras, y otros elementos que veremos más adelante, son elementos de bloque. Esto implica que están separados unos de otros por un salto de línea cuando son renderizados en el navegador.
Por otro lado, hay elementos que no saltan de línea, como los enlaces, las imágenes, elementos enfatizados (em y strong), etc. Son elementos en línea.
Generalmente, los elementos de bloque pueden contener otros elementos de bloque y elementos en línea, mientras que los elementos en línea sólo pueden contener otros elementos en línea. Con los párrafos se da una importante excepción, ya que no pueden contener otros párrafos, cabeceras, o cualquier otro elemento de bloque. Los párrafos sólo pueden contener elementos en línea.
El otro punto clave es que un elemento en línea siempre debe estar contenido en un elemento de bloque.
Otros tipos de texto estructurado
- Énfasis, con el elemento <em>. Muestra el texto en cursiva
- Énfasis fuerte, con el elemento <strong>. Muestra el texto en negrita
- Cita a otro trabajo, con el elemento <cite>
- Citando un texto, con el elemento <q> (en línea, que añade las comillas iniciales y finales automáticamente) o con el elemento <blockquote> (de bloque, que añade una indentación a la izquierda)
Estructura genérica de un documento
HTML es, realmente, un pequeño juego de elementos, con lo que no tiene elementos para cualquier tipo de información (como sí puede hacerse con XML).
Es por ello que existen dos elementos genéricos sin significado: div y span. div es un elemento de bloque y span es un elemento en línea.
Su uso habitual es junto con su primer atributo, para crear nuestros propios elementos, y añadir significado cuando el HTML se nos queda pequeño.
<span>Texto sin significado</span><span class="aviso">Cuidado</span><span class="instrucciones">Haga esto o aquello</span>
Realmente, no sólo dota de significado a partes del documento, sino que los prepara para añadirles un estilo propio desde la hoja de estilos, gracias a esos atributos.
Nota personal: No habla en ningún momento de identificadores, sólo de clases. Sin embargo pueden usarse ambos, teniendo en cuenta que un identificador es único, y una clase se puede aplicar a tantos elementos como se desee.
