HTML: Sintaxis y estructura
Aprende la sintaxis y estructura de HTML 5. Guía detallada para desarrolladores de software sobre el uso correcto y actualizado de HTML 5 en 2024.
HTML 5 es la última versión del lenguaje de marcado para la creación de páginas web. Este módulo aborda la sintaxis y estructura de HTML 5, proporcionando una comprensión detallada y actualizada sobre cómo escribir y estructurar código HTML de manera eficiente.
estructura básica de un documento HTML 5
Un documento HTML 5 comienza con la declaración de tipo de documento <!DOCTYPE html>, que informa al navegador que se está utilizando HTML 5. A continuación, se presenta una estructura básica de un documento HTML 5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la página</title>
</head>
<body>
<header>
<h1>Encabezado principal</h1>
</header>
<main>
<section>
<h2>Subencabezado</h2>
<p>Contenido del primer párrafo.</p>
</section>
</main>
<footer>
<p>Pie de página</p>
</footer>
</body>
</html>
elementos semánticos
HTML 5 introduce una serie de elementos semánticos que mejoran la estructura y la accesibilidad del contenido web. Algunos de los elementos más importantes son:
<header>: Define el encabezado de un documento o una sección.<nav>: Representa una sección de navegación.<main>: Contiene el contenido principal del documento.<article>: Representa un contenido independiente que se puede distribuir de manera independiente.<section>: Define una sección genérica en un documento.<aside>: Contiene contenido relacionado de manera tangencial.<footer>: Define el pie de página de un documento o una sección.
atributos globales
Los atributos globales pueden ser utilizados con cualquier elemento HTML. Algunos de los atributos globales más relevantes son:
class: Define una o más clases para el elemento.id: Define un identificador único para el elemento.style: Contiene declaraciones CSS en línea.title: Proporciona información adicional sobre el elemento.data-*: Permite el almacenamiento de datos personalizados en el elemento.
estructura de contenido
La estructura de contenido en HTML 5 debe ser clara y lógica, facilitando tanto la lectura del código como la accesibilidad del contenido. Utilizar correctamente los elementos semánticos y seguir una jerarquía coherente de encabezados (<h1> a <h6>) es fundamental.
ejemplo de estructura de contenido
<main>
<article>
<header>
<h1>Título del artículo</h1>
<p>Publicado el 1 de enero de 2024</p>
</header>
<section>
<h2>Subtítulo</h2>
<p>Texto del primer párrafo del artículo.</p>
</section>
<footer>
<p>Autor: Nombre del autor</p>
</footer>
</article>
</main>
En este ejemplo, se utiliza <article> para encapsular un artículo independiente, <header> y <footer> para definir el encabezado y pie de página del artículo, y <section> para dividir el contenido en secciones lógicas.
elementos multimedia
HTML 5 también soporta de manera nativa elementos multimedia como <audio> y <video>, facilitando la inclusión de contenido multimedia sin necesidad de plugins adicionales.
ejemplo de elemento video
<video controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta el elemento de video.
</video>
En este ejemplo, el elemento <video> permite la reproducción de un archivo de video con controles nativos del navegador.
Lecciones de este módulo de HTML
Lecciones de programación del módulo Sintaxis y estructura del curso de HTML.
Ejercicios de programación en este módulo de HTML
Evalúa tus conocimientos en Sintaxis y estructura con ejercicios de programación Sintaxis y estructura de tipo Test, Puzzle, Código y Proyecto con VSCode.