Estructura en HTML

Estructura básica de HTML

<!DOCTYPE html>

Siempre al inicio de tu documento. Declara que estás usando HTML5 y asegura que el navegador interprete correctamente la página.

<head>

Contiene metadatos y recursos de la página. Aquí va el título, enlaces a CSS, scripts, meta etiquetas, fuentes y estilos internos.

Definir la codificación de caracteres es obligatorio para que los acentos, la ñ y los símbolos se muestren correctamente.

<title>Título de la página</title>

Texto que aparece en la pestaña del navegador y en los resultados de buscadores. Siempre debe estar presente y ser descriptivo.

Enlaza tu hoja de estilos CSS externa. Úsalo siempre que quieras separar el diseño del contenido.

Enlaza tu archivo JavaScript externo. Suele ir al final del <body> para mejorar la carga, aunque también puede ir en <head>.

</head>

Cierra el head

<body>

Contiene todo el contenido visible de la página: texto, imágenes, enlaces, secciones, formularios, etc. Todo lo que el usuario ve o interactúa va aquí.

Encabezado de la página o de una sección. Normalmente incluye el logo, título y menú principal.

<nav>

Área de navegación. Contiene los enlaces principales de tu página o sección.

<main>

Contenido principal de la página. Solo debe haber un <main> por documento.

Bloque de contenido temático. Úsalo para agrupar información relacionada dentro de <main> o <article>.

Contenido independiente y autocontenido, como un post, noticia o entrada de blog.

<aside>

Contenido complementario o secundario. Por ejemplo, un sidebar con enlaces, recomendaciones o anuncios.

Pie de página. Normalmente incluye información de contacto, derechos de autor, enlaces legales o sociales.

</body>

Fin del contenido visible de la página.

</html>

Fin del documento HTML.

Etiquetas importantes dentro del<head>

<title>

Título de la página Aparece en la pestaña del navegador

<link>

Conectar recursos externos CSS, iconos, fuentes

<style>

CSS interno Definir estilos directamente en HTML

Código JavaScript Vinculado o embebido

Ejemplo:


<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Mi Página</title>
        <link rel="stylesheet" href="estilos.css">
    </head>
    <body>
        <header>
            <h1>Bienvenido</h1>
        </header>
        <nav>
            <ul>
                <li>Inicio</li>
                <li>Contacto</li>
            </ul>
        </nav>
        <main>
            <section>
                <article>
                    <p>Contenido principal aquí.</p>
                </article>
            </section>
            <aside>
                <p>Contenido complementario.</p>
            </aside>
        </main>
        <footer>
            <p>Pie de página.</p>
        </footer>
    </body>
</html>

Etiquetas importantes <meta> en HTML

Siempre debes usarla. Define la codificación de caracteres en UTF-8 (evita problemas con tildes, ñ, símbolos, emojis...). Ponla como la primera etiqueta dentro de <head>.

Obligatoria en sitios responsive. Ajusta la página al ancho del dispositivo (móvil, tablet, PC). Si no la pones, tu web se verá diminuta en móviles.

Muy recomendable para SEO. Sirve como texto que aparece en los resultados de Google debajo del título. Úsala con frases claras y atractivas.

Se usaba para SEO, hoy ya no lo toma en cuenta Google. Solo inclúyela si quieres por nostalgia o para motores de búsqueda antiguos.

Opcional. Úsala si quieres dejar claro quién creó la página. Aparece en algunos navegadores o herramientas.

Úsala para decirle a los buscadores cómo tratar tu página: “index” (pueden indexar) y “follow” (pueden seguir enlaces). Ejemplo: en páginas privadas pondrías “noindex, nofollow”.

Recarga la página cada 30 segundos. Úsala en webs donde el contenido cambia rápido (por ejemplo, monitor de datos). Ojo: no es recomendable para SEO porque genera recargas innecesarias.

Sirve para Internet Explorer (obsoleto hoy en día). Solo inclúyela si quieres máxima compatibilidad con navegadores muy antiguos.

Muy recomendable si quieres que al compartir tu web en Facebook/LinkedIn aparezca con un título bonito. Úsala en blogs, portfolios o webs que se compartan mucho.

Complementa el og:title mostrando un resumen atractivo al compartir la página en redes sociales.

Recomendadísima. Es la imagen que aparece en la vista previa al compartir tu web en redes sociales. Sin esto, Facebook/Twitter mostrarán cualquier imagen al azar.

Indica la URL canónica para compartir. Úsala en páginas con varias rutas (ejemplo: blogs con filtros). Así evitas duplicidad.

Úsala si quieres controlar cómo se ve tu web en Twitter/X. “summary_large_image” es la más usada porque muestra una vista previa con imagen grande.

TEXTO Y PÁRRAFOS

Formato de texto dentro de párrafos

<strong>Negrita Semántica</strong>

Negrita Semántica

<b>Negrita visual</b>

Negrita Visual

<em>Énfasis semántico</em>

Cursiva Semántica

<i>Cursiva visual</i>

Cursiva Visual

<mark>Resaltado</mark>

Resaltado

<small>Texto pequeño</small>

Texto Pequeño

<del>Tachado</del>

~~Tachado~~

<ins>Subrayado</ins>

Subrayado Semántico

<u>Subrayado visual</u>

Subrayado Visual

H<sub>2</sub>O

H₂O

X<sup>2</sup>

X²

<code>Texto de código</code>

Texto de código

ENCABEZADOS

<h1>nivel 1</h1>

Encabezado nivel 1

<h2>nivel 2</h2>

Encabezado nivel 2

<h3>nivel 3</h3>

Encabezado nivel 3

<h4>nivel 4</h4>

Encabezado nivel 4

<h5>nivel 5</h5>

Encabezado nivel 5

<h6>nivel 6</h6>

Encabezado nivel 6

CONTACTO EN HTML

<address> Empresa Chuletas Yisus Calle Falsa 123, Madrid Tel: <a href="tel:+34123456789">+34 123 456 789 Email: <a href="mailto:info@chuletas.com">
info@chuletas.com</a> </address>

Empresa Chuletas Yisus Calle Falsa 123, Madrid Tel: +34 123 456 789 Email: info@chuletas.com

CITAS

Citas largas

<blockquote>
La paciencia es la madre de la ciencia.
</blockquote>

La paciencia es la madre de la ciencia.

Citas cortas

<p>Einstein dijo: <q>La imaginación es más importante que el conocimiento.</q></p>

Einstein dijo: La imaginación es más importante que el conocimiento.

Abreviaturas

<p>Trabajo en <abbr title="HyperText Markup Language">HTML</abbr>.</p>

Trabajo en HTML.

Citas con fuente

<p>El libro <cite>Don Quijote de la Mancha</cite> fue escrito por Cervantes.</p>

El libro Don Quijote de la Mancha fue escrito por Cervantes.

Formularios - Listas - Tablas

Formularios

<form> – Contenedor del formulario

<label> – Etiqueta del input

<textarea> – Área de texto multi-línea

<select> – Lista desplegable

<input type="checkbox">
Acepto términos

Ejemplo de un Formulario


<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Formulario Ejemplo</title>
    </head>
    <body>

        <!-- FORMULARIO COMPLETO -->
        <form action="#" method="post">

            <label for="nombre">Nombre:</label>
            <input type="text" id="nombre" name="nombre"
            placeholder="Tu nombre">

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" 
            placeholder="tu@email.com">

            <label for="mensaje">Mensaje:</label>
            <textarea id="mensaje" name="mensaje" 
            rows="4"></textarea>

            <label for="pais">País:</label>
            <select id="pais" name="pais">
                <option value="es">España</option>
                <option value="mx">México</option>
                <option value="ar">Argentina</option>
            </select>

            <fieldset>
                <legend>Preferencias</legend>
                <label>
                    <input type="checkbox" name="noticias"> 
                    Recibir noticias
                </label>
                <label>
                    <input type="radio" name="genero"
                    value="masculino"> Masculino
                </label>
                <label>
                    <input type="radio" name="genero" 
                    value="femenino"> Femenino
                </label>
            </fieldset>

            <button type="submit">Enviar</button>
            <button type="reset">Limpiar</button>

        </form>

    </body>
</html>

Nombre:
Email:
Mensaje:
País:

Preferencias Recibir noticias Masculino Femenino

<Input> Importantes

<input type="password"> – Campo para contraseña

<input type="email"> – Campo para correo electrónico

<input type="number"> – Solo números, con min, max y step

<input type="url"> – Validación de URL

<input type="tel"> – Número de teléfono

<input type="date"> – Selector de fecha

<input type="time"> – Selector de hora

<input type=" datetime-local"> – Fecha y hora local

<input type="range"> – Barra deslizante

<input type="color"> – Selector de color

<input type="file"> – Subir archivos

<input type="hidden"> – Valor oculto

<input type="submit"> – Botón para enviar

<input type="reset"> – Botón para limpiar formulario

Listas

<ul> – Lista desordenada con viñetas

Elemento 1
Elemento 2
Elemento 3

<ol> – Lista ordenada con números

Primer paso
Segundo paso
Tercer paso

<ol style="list-style-type: upper-roman;"> – Lista ordenada con números romanos

Primer punto
Segundo punto
Tercer punto

<dl> – Lista de definiciones

HTML: Lenguaje de marcado para páginas web
CSS: Lenguaje de estilos para la web

Tablas

<table> – Contenedor de la tabla

<tr> – Fila de la tabla

<th> – Celda de encabezado

<td> – Celda de datos

<thead> – Encabezado de la tabla

<tbody> – Cuerpo de la tabla

<tfoot> – Pie de la tabla

<caption> – Título de la tabla

Otras etiquetas útiles en tablas

<col>

→ Define una columna individual (usado junto a <colgroup>)

→ Agrupa columnas para aplicar estilos o atributos de forma conjunta.

→ Ya los tienes, pero recuerda que permiten separar estructura de contenido.

→ Atributo para indicar si el encabezado aplica a una columna o a una fila.

→ Una celda que ocupa varias columnas.
<td colspan="3">Esta celda ocupa 3 columnas

→ Una celda que ocupa varias filas.<td rowspan="2">Celda vertical, ocupa 2 filas

Ejemplo completo de una Tabla


<table border="1">
    <caption>Ejemplo de tabla</caption>
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Edad</th>
            <th>Ciudad</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ana</td>
            <td>25</td>
            <td>Madrid</td>
        </tr>
        <tr>
            <td>Carlos</td>
            <td>30</td>
            <td>Barcelona</td>
        </tr>
        <tr>
            <td>Lucía</td>
            <td>28</td>
            <td>Valencia</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Tabla de ejemplo</td>
        </tr>
    </tfoot>
</table>

EJEMPLO TABLA

Nombre	Edad	Ciudad
Anna	25	Madrid
Carlos	49	Barcelona
Lucia	42	Valencia
Tabla de Ejemplos

MEDIA: IMG + VIDEO + AUDIO

Imágenes

Inserta imágenes

Inserta una imagen. src indica la ruta y alt es el texto alternativo (muy importante para accesibilidad y SEO). Se recomienda siempre definir ancho y alto con CSS, no con atributos.

Atributos Útiles

srcset → para imágenes responsive.

loading="lazy" → carga diferida (mejora rendimiento).

title → texto emergente al pasar el ratón.

Video

Inserta un video

Inserta un video. Con controls aparecen los botones de play/pausa. Se pueden poner varias fuentes con <source> para distintos formatos.

Atributos Útiles

autoplay → inicia solo (ojo que muchos navegadores lo bloquean si no tiene muted).

muted → silencia por defecto.

loop → el video se repite.

poster="imagen.jpg" → imagen previa antes de darle play.

Audio

Inserte Audio y Gif

Inserta un audio con controles. Igual que video, puede llevar varias <source>.

Atributos Útiles

autoplay

loop

muted

Gif

Un GIF no tiene etiqueta especial, se maneja como una img. El navegador lo reproduce solo.

Links

Crear un enlace

<a href="url">Texto del enlace</a>

Crea un enlace a otra página, archivo, correo o sección interna. Atributos útiles: href (destino), target="_blank" (abrir en nueva pestaña), download (descargar archivo en lugar de abrirlo).

Etiqueta <nav> </nav>

Sección semántica que agrupa enlaces de navegación principales (menús, barras de navegación, índices de la página). Mejora la accesibilidad y la estructura del documento.