Unidad 1.3 - Estructuración de contenidos en HTML
Índice
1 Introducción
HTML es un lenguaje estructurado. Su función es organizar los contenidos de manera jerárquica, agrupando la información relacionada en bloques que pueden anidarse unos dentro de otros para expresar jerarquía.
Posteriormente, dichos bloques pueden formatearse de distintas maneras para que tengan un aspecto visual determinado o para que aparezcan en una zona u otra de la pantalla. Esta tarea no compete a HTML, sino que es competencia de CSS. Las etiquetas de HTML que se utilizaban exclusivamente para dar formato y no estructura (como las etiquetas <font>) han sido eliminadas o marcadas como obsoletas en las versiones recientes de HTML.
En este tema estudiaremos las principales etiquetas que se utilizan para estructurar un documento HTML de manera adecuada.
2 Elementos de bloque y elementos en línea
En HTML hay dos tipos elementos: elementos de bloque (block) y elementos en línea (inline).
Los elementos de bloque ocupan por defecto todo el ancho del elemento contenedor y están separados por saltos de línea. Por tanto, si aparecen varios elementos de bloque uno a continuación del otro estos se mostrarán como cajas que se muestran una debajo de otra. A estos elementos se les aplica el modelo de caja. Los párrafos se comportan como elementos en bloque: cada párrafo nuevo aparece debajo del anterior; además, el ancho del párrafo ocupa por defecto el ancho del elemento contenedor (o la pantalla, en su defecto).
Los elementos en línea ocupan el ancho del contenido que tengan dentro y no están separados por saltos de línea. Por tanto, si aparecen varios elementos en línea uno a continuación del otro estos se mostrarán en la misma línea uno a la derecha del otro. En caso de que la línea sea más larga que el ancho del elemento contenedor (o la pantalla en su defecto), aparecerán en una línea más abajo. El texto de un párrafo se comporta como un elemento en línea: el texto aparece de izquierda a derecha hasta llegar al final de la pantalla, donde empieza una nueva línea.
3 Elementos de bloque
A continuación se muestran los elementos en bloque más utilizados.
3.1 Encabezados
Los encabezados se utilizan para mostrar los títulos de las secciones y subsecciones en que está dividido el documento. Existen varios niveles de encabezados (1 a 6). El número 1 representa el nivel más alto o importante, mientras que el nivel 6 es el nivel más bajo.
Típicamente los encabezados van seguidos de uno o más párrafos. Los párrafos que aparecen a continuación del encabezado están asociados a él, de manera que el encabezado hace referencia al título y los párrafos al contenido de la sección.
Si aparece otro encabezado del mismo nivel que el último significa que se inicia una nueva sección: el contenido que aparezca a continuación hará referencia a la sección nombrada en el encabezado nuevo.
Si por el contrario aparece un encabezado de un nivel inferior significa que se inicia una subsección dentro de la sección principal. Las subsecciones deben partir del nivel anterior: si partimos de un encabezado de nivel 1 y tenemos que abrir una subsección, utilizaremos un encabezado de nivel 2.
Los navegadores web suelen destacar los encabezados mediante unos estilos predefinidos que se pueden consultar en este enlace. Típicamente el texto de los encabezados aparece destacado en negrita, con tipo de letra más grande y con un espacio vertical que separa el texto del encabezado del contenido anterior y posterior.
Los encabezados se definen con las etiquetas <h1> a <h6>.
3.2 Párrafos
Los párrafos se utilizan para agrupar porciones de texto que expresan una idea o argumento. El texto escrito se suele agrupar en párrafos para facilitar su lectura.
Los navegadores web suelen dejar un espacio vertical mayor que el espacio entre líneas entre un párrafo y el siguiente.
La etiqueta HTML utilizada para representar párrafos es <p>.
3.3 Listas
Las listas se utilizan para escribir enumeraciones. Los navegadores suelen dejar un espacio adicional entre las listas y el contenido anterior y posterior.
Las etiquetas que engloban las listas son las etiquetas <ul> para lista desordenadas y <ol> para listas ordenadas.
3.4 Tablas
Las tablas se utilizan para representar información de manera tabular. Anteriormente se utilizaban también para organizar visualmente las secciones de las páginas, pero en la actualidad esa práctica está en desuso y es poco recomendable. Los navegadores suelen dejar un espacio adicional entre las tablas y el contenido anterior y posterior.
La etiqueta <table> es la que se utiliza en HTML para definir tablas.
3.5 Capas
Las capas son elementos que se utilizan para agrupar otros elementos de tipo bloque. De esta manera es posible hacer referencia a un conjunto de elementos para darles formato con hojas de estilo CSS.
Las capas se utilizan típicamente para dividir la página en secciones independientes y posteriormente colocarlas en algún sitio concreto de la página mediante CSS y el uso de nombres de clase e identificadores. Algunas de las secciones más utilizadas son:
- Outer (exterior) - Se utiliza para almacenar todas las demás capas.
- Menu (menú) - Se utiliza para alojar el menú de navegación.
- Header (cabecera) - Se utiliza para alojar la cabecera de la página (título, logo,…).
- Footer (pie) - Se utiliza para alojar el pie de página.
- Content (contenido) - Se utiliza para alojar el contenido principal de la página.
3.5.1 Elementos semánticos HTML5
HTML5 ha introducido algunos elementos adicionales para representar determinadas capas. Estos elementos son más descriptivos que los elementos <div> y pueden consultarse en este enlace.
4 Elementos en línea (inline)
Los elementos en línea suelen utilizarse para destacar o agrupar trozos de texto o algunos otros elementos en línea. Su única limitación radica en que no pueden rebasar los límites del elemento en bloque que los contiene. Así, por ejemplo, este código sería CORRECTO:
<p>Este texto tiene una palabra <b>destacada</b></p>
Sin embargo, este código sería INCORRECTO:
<p>Este texto tiene palabras <b>destacadas que abarcan varios párrafos.</p> <p>Por tanto, es incorrecto.</b></p>
A continuación se muestran los elementos en línea más utilizados.
4.1 Formato (cursiva, negrita,…)
Son elementos que se utilizan para destacar determinadas porciones de texto. Los navegadores web se encargan de darles el formato apropiado para que se muestren correctamente en pantalla (negrita, cursiva,…). Los más importantes pueden consultarse en este enlace.
4.2 Span
El elemento <span> es un elemento en línea genérico. No tiene asociado ningún estilo en particular, por lo que el texto marcado con esta etiqueta no mostrará un aspecto especial en la pantalla.
Se utiliza para agrupar otros elementos en línea (texto, imágenes,…) y así poder cambiar su aspecto visual mediante hojas de estilo y el uso de nombres de clase e identificadores.
