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.

Empezar curso de HTML

Lecciones de este módulo de HTML

Lecciones de programación del módulo Sintaxis y estructura del curso de HTML.

Doctype

Anidación De Etiquetas

Elementos Y Etiquetas

Atributos

Comentarios

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.