Tabla de contenido:
Video: Cómo crear una cabecera fija responsive con HTML y CSS 2025
Quizás el elemento de estructura de contenido más significativo en HTML5 sea la etiqueta del artículo. Los devotos de encabezados, pies de página e incluso la etiqueta de tiempo relativamente oscuro estarán furiosos ante la sugerencia de que la etiqueta del artículo sea la gran atracción en HTML5, pero puede emplear la etiqueta de artículo para organizar el contenido de la página en "fragmentos" básicos, por falta de una mejor palabra.
La necesidad de estructurar el contenido de la página en artículos es un factor positivo que obliga a los desarrolladores de contenido a organizar las ideas de forma coherente. Y la etiqueta del artículo proporciona el marco para secciones (dentro del artículo) y apartados (barras laterales del artículo).
Divida los artículos en varias secciones
El siguiente código define un artículo y dos elementos de sección. También incluye algunos textos de marcador de posición y encabezados insertados después de la etiqueta de cierre.
Nota: Aunque técnicamente puede insertar una sola sección dentro de un artículo, el concepto de artículos divididos en secciones es más efectivo si eso se evita.
Una regla básica de edición (y puedes pedirle a cualquiera que edite texto para ganarse la vida, y así lo harán) es que si vas a dividir un artículo para hacerlo más fácil de digerir, no ayuda al lector a organizar su pensamiento para tener solo una subsección dentro de una sección de contenido. Entonces, cuando se utilizan secciones, es mejor tener al menos dos secciones dentro de las etiquetas.
El título del artículo va aquí
El primer contenido del artículo va aquí
más contenido del artículo va aquí
El primer título de la sección va aquí
El contenido de la primera sección va aquí
Más 1ro el contenido de la sección va aquí
El título de la segunda sección va aquí
El contenido de la segunda sección va aquí
Más contenido de la segunda sección va aquí
Este código crea una página como la que se muestra aquí.
Agregar un elemento aparte
Como con todos los elementos de estructura de página HTML5, el elemento aparte está destinado a ser asociado con un cierto tipo de contenido. El contenido como imágenes, texto o videos en un elemento aparte debe depender de, es decir, estar relacionado con el contenido y contribuir a él, con un artículo o sección de un artículo.
¿Debería usar un elemento a un lado para encerrar una barra de navegación? En general, no. En cambio, el contenido de navegación debe codificarse con el elemento de navegación, que discutiremos un poco antes en este capítulo.
Algunos atributos de estilo CSS que normalmente se aplican a los elementos de HTML5 aparte. Como es probable que intuya, los elementos a un lado generalmente se presentan como barras laterales. Por lo tanto, cuando define un estilo CSS para el elemento nav, usa la propiedad float CSS para permitir que el elemento a un lado se muestre como un cuadro alineado a la derecha o a la izquierda alrededor del cual puede fluir el contenido del artículo.
El siguiente código proporciona un ejemplo de un elemento aparte dentro de un artículo:
El título del artículo va aquí
El contenido del artículo va aquí
El contenido de la barra lateral, relacionado con el artículo, va aquíMás contenido del artículo va aquí
Deberá combinar elementos de estructura HTML5 con estilos que formateen la ubicación, la fuente, el color y otros atributos de estilo aplicados a estos elementos. La siguiente figura, por ejemplo, muestra cómo un lado (KUDOS) podría verse al lado del artículo con el que está asociado (Experiencia).
