Aprendiendo HTML: Estructura y Elementos Básicos

¿Qué es HTML? y su Estructura Básica

HTML (HyperText Markup Language) es el lenguaje estándar utilizado para crear y diseñar páginas web. Proporciona la estructura básica para organizar el contenido en la web. En su esencia, HTML se compone de una serie de elementos que definen la estructura de una página.

Estructura Básica de un Documento HTML

Un documento HTML básico consta de los siguientes elementos:

            <!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>
                <!-- El contenido de la página va aquí -->
            </body>
            </html>

<!DOCTYPE html>: Declara la versión de HTML que se está utilizando (en este caso, HTML5).
<html>: Encierra todo el contenido de la página.
<head>: Contiene metadatos y enlaces a recursos externos.
<meta charset="UTF-8">: Define el conjunto de caracteres utilizado en la página (UTF-8 para admitir caracteres especiales).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura la escala de la página para dispositivos móviles.
<title>: Define el título de la página que se muestra en la pestaña del navegador.
<body>: Contiene todo el contenido visible de la página.

Anatomía de un Elemento HTML

Los elementos HTML están formados por etiquetas que encierran contenido y proporcionan información sobre ese contenido. La estructura básica de un elemento HTML es la siguiente:

            <etiqueta atributo="valor">Contenido</etiqueta>

<etiqueta>: Es el nombre de la etiqueta que define el tipo de elemento.
atributo="valor": Los atributos proporcionan información adicional sobre el elemento. Pueden ser opcionales.
Contenido: Es el contenido dentro del elemento, que puede ser texto, otros elementos, o ambos.

Ejemplo de un elemento HTML:

            <p class="introduccion">Este es un párrafo de ejemplo.</p>

<p>: Es la etiqueta de párrafo.
class="introduccion": Es un atributo de clase que proporciona información adicional sobre el párrafo.
Este es un párrafo de ejemplo.: Es el contenido del párrafo.

Atributos HTML

Los atributos HTML proporcionan información adicional sobre un elemento y se definen dentro de la etiqueta de apertura del elemento. Algunos atributos comunes incluyen:

id: Identifica de forma única un elemento en la página.
class: Define una o más clases que se aplican al elemento, permitiendo su estilo a través de CSS.
src: Especifica la ubicación de un recurso, como una imagen o un archivo de audio.
href: Define la URL de destino de un enlace (<a>).

Ejemplo de uso de atributos:

            <a href="https://www.ejemplo.com" id="enlacePrincipal" class="enlace-externo">Visitar Ejemplo</a>

href="https://www.ejemplo.com": Especifica la URL de destino del enlace.
id="enlacePrincipal": Identifica de manera única este enlace.
class="enlace-externo": Aplica una clase para estilizar el enlace.

Elementos Vacíos

Algunos elementos en HTML no tienen contenido y se llaman elementos vacíos. Se cierran inmediatamente después de la etiqueta de apertura.

Ejemplo de un elemento vacío:

            <img src="imagen.jpg" alt="Descripción de la imagen">

<img>: Es la etiqueta de imagen.
src="imagen.jpg": Especifica la ubicación de la imagen.
alt="Descripción de la imagen": Proporciona un texto alternativo que se muestra si la imagen no se puede cargar.

Elementos Anidados

Los elementos HTML pueden estar contenidos dentro de otros elementos, formando una jerarquía de elementos anidados.

Ejemplo de elementos anidados:

           
            <div class="contenedor">
                <h1>Título de la Página</h1>
                <p>Este es un párrafo de ejemplo dentro de un contenedor.</p>
            </div>

<div>: Es la etiqueta de división que actúa como contenedor.
<h1>: Es la etiqueta de encabezado de nivel 1.
<p>: Es la etiqueta de párrafo.