Estructura de un documento HTML

Todo documento HTML comienza con una estructura basica que el navegador necesita interpretar correctamente. Esta estructura incluye el tipo de documento (DOCTYPE), el elemento raiz <html>, y dos secciones principales: <head> para metadatos y <body> para el contenido visible.

El <!DOCTYPE html> le indica al navegador que el documento usa HTML5, el estandar moderno. Sin esta declaracion, el navegador podria entrar en "modo quirks" y renderizar la pagina de forma inconsistente. Es el primer elemento que debe aparecer en cualquier archivo HTML y no tiene etiqueta de cierre.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Descripcion de tu pagina">
    <title>Mi Pagina Web</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Tu contenido visible va aqui -->
    <h1>Hola Mundo</h1>
    <p>Mi primera pagina web.</p>

    <script src="app.js"></script>
</body>
</html>

Tip

El atributo lang="es" en la etiqueta <html> es importante para la accesibilidad y el SEO. Permite a los lectores de pantalla seleccionar el idioma correcto y ayuda a los motores de busqueda a entender el idioma de tu contenido.

Etiquetas esenciales

HTML proporciona una serie de etiquetas fundamentales que estructuran el contenido de cualquier pagina web. Estas etiquetas definen como se presenta y se organiza la informacion, desde titulos y parrafos hasta links e imagenes. Conocer estas etiquetas es el primer paso para escribir HTML correctamente.

Las etiquetas de texto son las mas utilizadas en cualquier documento. Los encabezados <h1> a <h6> establecen la jerarquia del contenido, donde <h1> es el mas importante (generalmente uno por pagina) y <h6> el menos importante. Los parrafos <p> contienen bloques de texto, mientras que <strong> y <em> agregan enfasis semantico (no solo visual).

HTML

<!-- Encabezados -->
<h1>Titulo principal</h1>
<h2>Subtitulo</h2>
<h3>Seccion terciaria</h3>

<!-- Texto -->
<p>Un parrafo de texto normal.</p>
<p>Texto con <strong>enfasis fuerte</strong>
   y <em>enfasis italica</em>.</p>

<!-- Linea horizontal -->
<hr>

<!-- Salto de linea -->
<p>Linea uno.<br>Linea dos.</p>

Visual

<h1>

Heading 1

<h2>

Heading 2

<h3>

Heading 3

<h4>

Heading 4

Nota

La etiqueta <strong> indica que el texto es importante (semantica), mientras que <b> solo lo pone en negrita visualmente. En la practica moderna, se prefiere <strong> y <em> por su significado semantico.

Formato de texto

HTML ofrece una variedad de etiquetas inline para dar formato y significado al texto dentro de los parrafos. Es importante entender la diferencia entre etiquetas semanticas (que agregan significado al contenido) y las puramente visuales (que solo cambian la apariencia). Los lectores de pantalla y los motores de busqueda interpretan las etiquetas semanticas, por lo que siempre se deben preferir sobre las visuales cuando el contexto lo permita.

Las mas comunes son <strong> para indicar importancia fuerte (se renderiza como negrita) y <em> para indicar enfasis (se renderiza como cursiva). Estas dos son semanticas: un lector de pantalla cambia la entonacion al leerlas. Sus equivalentes visuales sin significado son <b> (negrita) y <i> (cursiva), que hoy en dia solo se usan cuando el formato se necesita por razones puramente esteticas, como nombres propios en otro idioma o terminos tecnicos.

HTML

<!-- Enfasis semantico (preferidos) -->
<p>Este texto es <strong>muy importante</strong>.</p>
<p>Debes <em>prestar atencion</em> a esto.</p>

<!-- Formato visual sin semantica -->
<p>Texto en <b>negrita</b> sin significado especial.</p>
<p>Un termino en <i>cursiva</i> por estilo.</p>

Para indicar contenido que fue borrado o agregado, se usan <del> (tachado) y <ins> (subrayado). Son especialmente utiles en revisiones de contenido, precios anteriores o changelogs. La etiqueta <s> es similar a <del> visualmente (tachado), pero semanticamente indica que el contenido ya no es relevante o es incorrecto, sin implicar una edicion. El navegador suele tachar <del> y subrayar <ins> por defecto.

HTML

<!-- Borrado e insertado -->
<p>Precio: <del>$500</del> <ins>$350</ins></p>

<!-- Contenido no relevante -->
<p><s>Oferta terminada</s> Mirá las nuevas promos.</p>

Otras etiquetas utiles son <mark> para resaltar texto (como con un marcador fosforescente), <small> para texto secundario como letras chicas o copyright, <u> para subrayado (que hoy se usa para resaltar errores ortograficos o nombres propios en chino, no para simular links), y <abbr> para abreviaturas con su expansion en el atributo title, que los lectores de pantalla pueden leer al pasar el mouse o enfocar.

HTML

<!-- Resaltado -->
<p>Busca la palabra <mark>importante</mark> en el texto.</p>

<!-- Texto pequeno -->
<p><small>Copyright 2025 Mi Empresa</small></p>

<!-- Subrayado -->
<p>Se escribió <u>hola</u> en vez de <u>hola</u>.</p>

<!-- Abreviatura -->
<p>La <abbr title="Organizacion de las Naciones Unidas">ONU</abbr>
   fue fundada en 1945.</p>

Para indices y superindices, <sub> y <sup> son fundamentales en formulas quimicas, matematicas y notas al pie. Para citas, <blockquote> representa una cita en bloque (separada del texto principal), mientras que <q> es para citas cortas en linea. Ambas aceptan el atributo cite con la URL de fuente. Finalmente, <code> muestra fragmentos de codigo en linea, <pre> conserva el formato exacto del texto (espacios, saltos de linea), y <span> es el contenedor inline generico para aplicar estilos o agrupar texto sin significado semantico propio.

HTML

<!-- Subindice y superindice -->
<p>La fórmula del agua es H<sub>2</sub>O.</p>
<p>E = mc<sup>2</sup></p>

<!-- Citas -->
<blockquote cite="https://ejemplo.com/fuente">
    <p>"La creatividad es la inteligencia divirtiéndose."</p>
</blockquote>
<p>Einstein dijo <q>La imaginación es más importante que el conocimiento</q>.</p>

<!-- Codigo -->
<p>Usa la función <code>console.log()</code> para depurar.</p>
<pre>function saludar() {
    return "Hola Mundo";
}</pre>

<!-- Span generico -->
<p>Texto con <span style="color: red">parte roja</span>.</p>

Resumen rapido: semantico vs. visual

Usa <strong> / <em> cuando el texto tenga importancia o enfasis real. Usá <b> / <i> solo si necesitás el formato visual sin agregar significado. Para tachado por edición usá <del> / <ins>; para contenido obsoleto usá <s>. Evitá <u> para simular links y <span style="..."> cuando exista una etiqueta semántica que haga lo mismo.

Links e imagenes

Los enlaces (<a>) son lo que convierte a la web en una "red" de documentos interconectados. La etiqueta <a> usa el atributo href para definir la URL de destino. El atributo target="_blank" abre el link en una nueva pestana, y rel="noopener noreferrer" es una practica de seguridad obligatoria cuando se usa target="_blank".

HTML

<!-- Link basico -->
<a href="https://ejemplo.com">Visitar sitio</a>

<!-- Link en nueva pestana (seguro) -->
<a href="https://ejemplo.com"
   target="_blank"
   rel="noopener noreferrer">
   Abrir en nueva pestana
</a>

<!-- Link a email -->
<a href="mailto:contacto@ejemplo.com">
   Enviar email
</a>

<!-- Imagen con texto alternativo -->
<img src="foto.jpg"
     alt="Descripcion de la imagen"
     loading="lazy"
     width="800"
     height="600">

<!-- Imagen con figure y caption -->
<figure>
    <img src="diagrama.png" alt="Diagrama de flujo">
    <figcaption>Figura 1: Diagrama de flujo del proceso</figcaption>
</figure>

Importante

El atributo alt en las imagenes es obligatorio por razones de accesibilidad. Si la imagen es decorativa, usa alt="" (vacio) para que los lectores de pantalla la ignoren. Siempre incluye loading="lazy" en imagenes que no estan en el primer viewport para mejorar la carga de la pagina.

Listas

HTML ofrece tres tipos principales de listas: las no ordenadas (<ul>) que usan viñetas, las ordenadas (<ol>) que usan numeros, y las de definicion (<dl>) que asocian terminos con sus descripciones. Las listas son fundamentales para organizar contenido de manera legible y accesible, especialmente en navegacion, menus y contenido estructurado.

HTML

<!-- Lista no ordenada -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<!-- Lista ordenada -->
<ol>
    <li>Aprender HTML</li>
    <li>Aprender CSS</li>
    <li>Aprender JavaScript</li>
</ol>

<!-- Lista de definicion -->
<dl>
    <dt>HTML</dt>
    <dd>Lenguaje de marcado para estructurar contenido web.</dd>
    <dt>CSS</dt>
    <dd>Lenguaje de estilos para dar formato visual.</dd>
</dl>

Visual

<ul>

HTML
CSS
JavaScript

<ol>

Aprender HTML
Aprender CSS
Aprender JavaScript

<dl>

HTML: Estructura del contenido
CSS: Presentación visual
JS: Interactividad

Tablas

Las tablas HTML se usan para presentar datos tabulados (filas y columnas). La estructura correcta incluye <table> como contenedor, <thead> para la cabecera, <tbody> para el cuerpo, y <tfoot> opcional para el pie. Cada fila usa <tr>, las celdas de cabecera <th>, y las celdas de datos <td>. Es importante no usar tablas para maquetacion de layouts, para eso se usan Flexbox o Grid.

HTML

<table>
    <thead>
        <tr>
            <th scope="col">Tecnologia</th>
            <th scope="col">Tipo</th>
            <th scope="col">Uso</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML</td>
            <td>Marcado</td>
            <td>Estructura</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td>Estilos</td>
            <td>Presentacion</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>Programacion</td>
            <td>Interactividad</td>
        </tr>
    </tbody>
</table>

Visual

Tecnología	Tipo	Uso principal
HTML	Marcado	Estructura
CSS	Estilos	Presentación
JavaScript	Programación	Interactividad

Evita esto

Nunca uses tablas para maquetar el layout de una pagina. Es una practica obsoleta que causa problemas de accesibilidad y mantenimiento. Para layouts usa display: flex o display: grid en CSS.

HTML Basico

Estructura de un documento HTML

Etiquetas esenciales

Heading 1

Heading 2

Heading 3

Heading 4

Formato de texto

Links e imagenes

Listas

Tablas