HTML: Sintaxis y estructura

Aprende la sintaxis y estructura básica de HTML para crear páginas web bien organizadas y accesibles con buenas prácticas.

Sintaxis y estructura de HTML

HTML (HyperText Markup Language) es el lenguaje fundamental para la creación de páginas web. Funciona como el esqueleto que da estructura a todo el contenido que vemos en internet. En este módulo, exploraremos los elementos básicos que componen la sintaxis de HTML y cómo se organizan para crear documentos web correctamente estructurados.

Fundamentos de HTML

HTML utiliza un sistema de etiquetas para definir la estructura y el contenido de una página web. Estas etiquetas son instrucciones que el navegador interpreta para mostrar correctamente los elementos en pantalla.

Las etiquetas HTML se caracterizan por:

Estar encerradas entre corchetes angulares (< y >)
Generalmente aparecer en pares: una etiqueta de apertura y una de cierre
La etiqueta de cierre incluye una barra inclinada (/) antes del nombre

Por ejemplo:

<p>Este es un párrafo de texto.</p>

En este caso, <p> es la etiqueta de apertura, </p> es la etiqueta de cierre, y el texto entre ambas es el contenido que se mostrará en la página.

Estructura básica de un documento HTML

Todo documento HTML debe seguir una estructura básica que incluye ciertos elementos fundamentales:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

Analicemos cada parte:

<!DOCTYPE html>: Esta declaración indica al navegador que el documento está escrito en HTML5, la versión más reciente del lenguaje.
<html>: Es el elemento raíz que envuelve todo el contenido de la página. El atributo lang="en" especifica que el idioma del contenido es inglés.
<head>: Contiene información sobre el documento que no se muestra directamente en la página, como metadatos, enlaces a hojas de estilo y scripts.
<meta charset="UTF-8">: Define la codificación de caracteres utilizada en el documento.
<meta name="viewport">: Optimiza la visualización en dispositivos móviles.
<title>: Define el título de la página que aparece en la pestaña del navegador.
<body>: Contiene todo el contenido visible de la página web.

Elementos HTML básicos

Encabezados

Los encabezados se utilizan para definir títulos y subtítulos en la página. HTML ofrece seis niveles de encabezados, desde <h1> (el más importante) hasta <h6> (el menos importante):

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section heading</h3>
<h4>Subsection heading</h4>
<h5>Minor heading</h5>
<h6>Smallest heading</h6>

Párrafos

Los párrafos se definen con la etiqueta <p>:

<p>This is a paragraph of text. HTML will automatically remove extra spaces and line breaks in the source code.</p>
<p>This is another paragraph.</p>

Enlaces

Los enlaces o hipervínculos se crean con la etiqueta <a> (anchor):

<a href="https://www.example.com">Visit Example.com</a>

El atributo href especifica la URL de destino del enlace.

Imágenes

Las imágenes se insertan con la etiqueta <img>:

<img src="image.jpg" alt="Description of the image">

src: Especifica la ruta de la imagen
alt: Proporciona un texto alternativo para la imagen (importante para accesibilidad)

La etiqueta <img> es un ejemplo de etiqueta vacía o de autocierre, ya que no necesita una etiqueta de cierre separada.

Listas

HTML permite crear diferentes tipos de listas:

Listas no ordenadas con <ul> y <li>:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Listas ordenadas con <ol> y <li>:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Listas de definición con <dl>, <dt> y <dd>:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Elementos semánticos

HTML5 introdujo varios elementos semánticos que proporcionan significado a la estructura de la página:

<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <h2>About Us</h2>
        <p>Information about the company.</p>
    </section>
    
    <article>
        <h2>Latest News</h2>
        <p>Content of the news article.</p>
    </article>
    
    <aside>
        <h3>Related Links</h3>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>&copy; 2023 My Website</p>
</footer>

Estos elementos ayudan a:

Mejorar la accesibilidad de la página
Facilitar el posicionamiento SEO
Hacer el código más legible y mantenible

Atributos HTML

Los atributos proporcionan información adicional sobre los elementos HTML y siempre se especifican en la etiqueta de apertura:

<element attribute="value">Content</element>

Algunos atributos comunes:

id: Proporciona un identificador único para un elemento
class: Asigna una o varias clases a un elemento (útil para CSS)
style: Aplica estilos CSS directamente al elemento
title: Muestra información adicional al pasar el cursor sobre el elemento

Ejemplo:

<p id="intro" class="highlight" style="color: blue;" title="Introduction paragraph">
    This is an important paragraph with several attributes.
</p>

Comentarios en HTML

Los comentarios permiten incluir notas en el código que no se muestran en la página:

<!-- This is a comment in HTML -->
<!-- 
    Comments can span
    multiple lines
-->

Los comentarios son útiles para:

Documentar el código
Desactivar temporalmente partes del código
Organizar secciones grandes de HTML

Entidades HTML

Las entidades HTML son códigos especiales que se utilizan para mostrar caracteres reservados o especiales:

<p>The &lt;p&gt; tag defines a paragraph.</p>
<p>I &hearts; HTML!</p>
<p>Copyright &copy; 2023</p>

Algunas entidades comunes:

< representa <
> representa >
& representa &
" representa "
© representa ©
&hearts; representa ♥

Buenas prácticas

Para escribir HTML de calidad, es recomendable:

Utilizar indentación consistente para mejorar la legibilidad
Escribir etiquetas en minúsculas
Cerrar todas las etiquetas correctamente
Usar comillas dobles para los valores de los atributos
Incluir los atributos alt en las imágenes
Utilizar elementos semánticos en lugar de divs genéricos cuando sea posible
Validar el código HTML con herramientas como el Validador W3C

Siguiendo estas prácticas, crearás documentos HTML bien estructurados que funcionarán correctamente en todos los navegadores y dispositivos.

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

Elementos Y Etiquetas

Atributos

Comentarios

Anidación De Etiquetas

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.