Aprende a construir una página web en HTML con estructura profesional. En este ejercicio intermedio explicamos paso a paso cada etiqueta clave (<!DOCTYPE>, <head>, <title>, <body>, <p>, <br>, <hr>, <b>, <i>, <center>, y más), incluyendo buenas prácticas, comentarios HTML y consejos técnicos para mejorar tu código. Ideal para quienes ya conocen HTML básico y quieren profundizar.
Introducción
En este artículo desarrollaremos paso a paso un ejercicio práctico de HTML a nivel intermedio. Partiremos de la estructura básica de un documento HTML e iremos incorporando cada elemento solicitado: la declaración de tipo de documento, la cabecera con metadatos (como la codificación de caracteres), el título de la página, elementos de contenido semántico (encabezados, párrafos), saltos de línea, líneas horizontales, formato de texto (negrita, cursiva, subrayado), centrado de contenido y comentarios. A lo largo del artículo explicaremos cómo y por qué usar cada elemento, con detalle técnico pero un lenguaje accesible. También abordaremos buenas prácticas de desarrollo web en HTML, como el cierre adecuado de etiquetas, la indentación del código y consideraciones sobre caracteres especiales. Al finalizar, el lector estará en capacidad de crear una página HTML básica bien estructurada y estará motivado a practicar estos fundamentos para construir sitios más complejos en el futuro.
Estructura básica de un documento HTML
Todo documento HTML comienza definiendo su tipo y estructura fundamental. Lo primero es la declaración de tipo de documento o DOCTYPE, que indica al navegador la versión de HTML que utilizamos. En HTML5, esta declaración es simplemente <!DOCTYPE html> (Doctype – Glosario de MDN Web Docs: Definiciones de términos relacionados con la Web | MDN). Colocar esta línea al inicio del archivo asegura que el navegador interprete nuestro código en el modo estándar actual (HTML5), evitando modos de compatibilidad antiguos.
A continuación, el documento se organiza en la etiqueta raíz <html> (que usualmente incluye el atributo de idioma, por ejemplo <html lang="es">). Dentro de <html> se definen dos secciones principales: la cabecera <head> y el cuerpo <body>. La sección <head> contiene metadatos e información no visible directamente en la página, como la codificación de caracteres, el título del documento, hojas de estilo, etc. Por su parte, la sección <body> contiene el contenido visible de la página: texto, imágenes, enlaces, etc. En resumen, la estructura base se ve así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Página de Ejemplo</title>
</head>
<body>
<!-- Contenido visible va aquí -->
</body>
</html>
En el fragmento anterior, observamos la jerarquía fundamental. Tras el <!DOCTYPE html>, la etiqueta <html> abre el documento. Dentro de <head> declaramos un elemento meta de charset y un título (explicados más abajo). Luego cerramos </head> y abrimos <body>, donde irá todo el contenido que el usuario verá en la página web, para finalmente cerrar </body> y </html>. Es importante respetar esta estructura y el cierre correcto de cada etiqueta, ya que un anidamiento incorrecto puede producir errores de renderizado. En HTML5 muchos navegadores son tolerantes a errores, pero es buena práctica mantener un código bien formado.
Declaración de metadatos: <meta charset="UTF-8">
En la cabecera del documento, es muy recomendable declarar la codificación de caracteres que usará la página mediante un tag <meta>. En nuestro ejemplo usamos:
<meta charset="UTF-8">
Esta línea le indica al navegador que el documento está codificado en UTF-8, un estándar que soporta caracteres de prácticamente todos los idiomas (incluyendo letras acentuadas, eñes, símbolos, etc.) ( 10 Prácticas Esenciales de HTML para un Código Limpio – Mejora tu Desarrollo Web). Gracias a este metadato, nos aseguramos de que textos como «Introducción» o «¡Hola, mundo!» muestren correctamente sus caracteres especiales en cualquier sistema. Definir la codificación al inicio del <head> es considerado una buena práctica esencial para evitar caracteres “extraños” o signos de interrogación en reemplazo de letras propias del idioma.
Además de charset, en la sección <head> podríamos incluir otros metadatos (como la descripción de la página para buscadores, palabras clave, viewport para diseño responsivo, etc.), pero en este ejercicio básico nos centraremos únicamente en la codificación y el título.
Título de la página: <title>
Dentro del <head> también definimos el título del documento mediante la etiqueta <title>. Por ejemplo:
<title>Mi Página de Ejemplo</title>
El contenido de <title> no aparece dentro del cuerpo de la página, sino en la pestaña o barra de título del navegador cuando la página es cargada (¿Qué hay en la cabecera? Metadatos en HTML – Aprende desarrollo web | MDN). Es el texto que identifica a la pestaña en la que estamos navegando y también suele usarse como título por defecto cuando un usuario guarda la página en sus marcadores/favoritos (¿Qué hay en la cabecera? Metadatos en HTML – Aprende desarrollo web | MDN). Por ejemplo, si el título es «Mi Página de Ejemplo», ese texto se mostrará en la pestaña del navegador y al marcar la página como favorita, el navegador sugerirá ese nombre para el marcador.
Es importante no confundir el <title> del documento con un encabezado visible en la página. El <title> va en la cabecera y sirve para el título del documento web en sí (metadato). En cambio, un encabezado HTML como <h1> (que veremos a continuación) aparece dentro del <body> y representa un título visible de contenido. En otras palabras: <title> identifica la página en el navegador, mientras <h1> (u otro encabezado) identifica secciones de contenido dentro de la página. Ambos pueden (y suelen) ser similares en texto, pero tienen funciones distintas.
Encabezados y párrafos en HTML
Pasando al contenido del <body>, uno de los elementos más comunes y semánticamente importantes son los encabezados. HTML ofrece seis niveles de encabezados, de <h1> (el de mayor jerarquía) hasta <h6> (el de menor). En una página típica, <h1> se usa para el título principal. Por ejemplo:
<h1>Bienvenido a Mi Página</h1>
El navegador mostrará un <h1> con un estilo de texto grande y destacado por defecto. Semánticamente, <h1> indica el encabezado principal de la página (generalmente debe haber solo uno por documento para señalar el título del contenido principal) (¿Qué hay en la cabecera? Metadatos en HTML – Aprende desarrollo web | MDN). Para subtítulos o secciones podemos usar <h2>, <h3>, etc., en orden jerárquico. En nuestro ejercicio nos centraremos en un solo <h1> representando, por ejemplo, el título de la página visible.
Después de los encabezados, el bloque básico de texto en HTML es el párrafo, representado por la etiqueta <p>. Un párrafo agrupa un bloque de texto consecutivo. Por ejemplo:
<p>Este es un párrafo de ejemplo en HTML. Contiene varias frases seguidas formando una unidad de contenido.</p>
Cada <p> comienza en una nueva línea y deja un pequeño espacio vertical al final (margen) antes del siguiente elemento, según los estilos predeterminados del navegador. Es importante usar párrafos para separar ideas o bloques de texto. Si queremos separar texto con una nueva línea dentro del mismo párrafo, podemos utilizar el elemento <br> (salto de línea).
Saltos de línea: <br>
El elemento <br> inserta un salto de línea en el flujo de texto, rompiendo la línea actual. Por ejemplo:
<p>Primera línea de texto.<br>Segunda línea dentro del mismo párrafo.</p>
En este caso, ambas frases están dentro del mismo <p> pero separadas por un <br>, por lo que en la visualización aparecerán en líneas separadas sin espacio extra entre ellas (a diferencia de dos párrafos distintos). La etiqueta <br> es un elemento vacío, es decir, no tiene contenido ni etiqueta de cierre. En HTML5 es opcional cerrarlo con />. Muchos desarrolladores simplemente escriben <br> a secas, y el navegador lo interpreta correctamente. De hecho, <br> se considera una etiqueta auto-cerrada (void), al igual que <img> ( 10 Prácticas Esenciales de HTML para un Código Limpio – Mejora tu Desarrollo Web).
Usa <br> con moderación; está indicado para casos como direcciones, poemas o requerimientos de formato puntual. Para separar bloques de texto más grandes, es mejor emplear párrafos separados en lugar de muchos <br> consecutivos, ya que estos últimos no añaden la semántica de “nuevo párrafo” sino solo una nueva línea visual.
Líneas horizontales: <hr>
Otro elemento estructural útil es la línea horizontal, representada por la etiqueta <hr> (de horizontal rule). Al insertar <hr> en el body, el navegador dibujará una línea horizontal de anchura completa (o definida por CSS) que sirve para dividir visualmente secciones de contenido. Semánticamente, <hr> indica un cambio de tema o una separación temática en el contenido. Por ejemplo, podríamos usar:
<p>Introducción del tema...</p>
<hr>
<p>Contenido de otra sección...</p>
En la página, esto mostrará una línea divisoria entre ambos párrafos. Al igual que <br>, la etiqueta <hr> es un elemento vacío (no requiere etiqueta de cierre). Por defecto se renderiza como una línea gris o delineada que ocupa el ancho del contenedor. Es considerada también una etiqueta auto-contenida o “self-closing” en HTML5 (HTML hr Tag – GeeksforGeeks).
Nota: Tanto <br> como <hr> son elementos de presentación directa. En desarrollos más avanzados, a veces se controla su apariencia y uso mediante CSS, pero en este nivel está bien utilizarlos para lograr saltos de línea y separadores cuando se necesitan.
Texto en negrita, cursiva y subrayado
HTML proporciona etiquetas para marcar texto con énfasis visual simple: negrita, cursiva y subrayado. Estas corresponden a <b> (bold), <i> (italic) y <u> (underline) respectivamente. Ejemplo:
<p>Este texto es <b>negrita</b>, este es <i>cursiva</i> y este es <u>subrayado</u>.</p>
Al renderizar, las palabras dentro de <b> aparecerán en negrita (fuente con más grosor), las dentro de <i> en cursiva (inclinadas) y las dentro de <u> subrayadas. Cabe mencionar que, históricamente, estas etiquetas se usaban para dar estilo visual, pero no aportan significado semántico al contenido (es decir, no indican importancia o énfasis real, solo cambian la apariencia). En HTML5 no están desaprobadas —siguen siendo válidas— pero existen etiquetas semánticas como <strong> (énfasis fuerte) y <em> (énfasis enfático) que transmiten significado además de estilo. Por simplicidad, nuestro ejercicio usa <b>, <i> y <u> directamente, lo cual está bien para fines de demostración visual.
Buenas prácticas sobre formato de texto: evita usar el subrayado <u> en texto que no sea un enlace, ya que convencionalmente el texto subrayado en la web se asocia a hipervínculos y podría confundir a los usuarios. Por otro lado, si el texto en cursiva o negrita tiene un significado (por ejemplo, resaltar una palabra importante), podría preferirse <em> o <strong> respectivamente, pero a nivel de resultado visual <i> y <b> funcionan de igual forma (la diferencia radica en la intención semántica). En nuestro caso, utilizamos <b>, <i> y <u> únicamente con propósito de estilo en el ejercicio.
Centrar contenido con <center>
Para alinear contenido al centro de la página, HTML incluía la etiqueta <center>, que envuelve cualquier elemento que queramos centrar horizontalmente. Por ejemplo:
<center><p>Este párrafo aparecerá centrado en la página.</p></center>
Todo lo dentro de <center> se alineará al centro. Sin embargo, es importante señalar que <center> se considera obsoleto en HTML5 y se recomienda lograr alineaciones centradas usando CSS (por ejemplo, con la propiedad text-align: center; en un estilo) (¿Cuáles son las etiquetas obsoletas en HTML5? ¡Actualízate!). Aun así, la mayoría de navegadores siguen soportando <center> por retrocompatibilidad. En el contexto de nuestro ejercicio educativo, podemos usarlo para entender cómo funcionaba el centrado en HTML tradicional.
Si envolvemos un bloque como un párrafo, un encabezado o incluso una imagen dentro de <center> ... </center>, este bloque se mostrará centrado. Por ejemplo, en la estructura completa de la página de ejemplo podríamos centrar el encabezado principal con:
<center><h1>Bienvenido a Mi Página</h1></center>
Reiteramos que, aunque funcional, esta etiqueta ya no forma parte de las buenas prácticas modernas; en producción usaríamos CSS. Pero conocer su existencia ayuda a comprender la evolución de HTML y cómo separar contenido de presentación es preferible. Para efectos del ejercicio, cumplirá su función de centrar texto o elementos puntuales.
Comentarios en HTML
Al desarrollar código HTML (o de cualquier lenguaje), es común añadir comentarios: anotaciones que no serán mostradas al usuario, pero sirven para documentar el código, dejar recordatorios o deshabilitar temporalmente partes del código sin borrarlas. En HTML, un comentario se escribe iniciando con <!-- y cerrando con -->. Por ejemplo:
<!-- Este es un comentario y no será visible en la página -->
<p>Contenido visible por el usuario.</p>
En este fragmento, el comentario inicial no aparecerá en la página web renderizada; el navegador lo ignora por completo. Podemos usar comentarios para seccionar nuestro documento o explicar partes del código para futuros desarrolladores (o para nosotros mismos cuando releamos el código más adelante). También es útil para «apagar» temporalmente alguna línea: si envolvemos cualquier etiqueta HTML con la sintaxis de comentario, esa porción quedará deshabilitada.
Importante: Los comentarios no anidan otros comentarios (no se pueden poner comentarios dentro de comentarios) y deben cerrarse correctamente para no invalidar el HTML. Mantener comentarios en el código no afecta la visualización, pero ten en cuenta que el código HTML completo (incluyendo comentarios) es visible si alguien inspecciona el código fuente de la página, así que no coloques información sensible en ellos.
Buenas prácticas de HTML
Al realizar este ejercicio y en general al escribir HTML, conviene seguir una serie de buenas prácticas que mejoran la calidad y mantenimiento del código:
- Declarar el DOCTYPE y la codificación: Siempre inicia el documento con
<!DOCTYPE html>para trabajar en modo estándar actual ( 10 Prácticas Esenciales de HTML para un Código Limpio – Mejora tu Desarrollo Web). Asimismo, incluye la metaetiqueta de charset UTF-8 en la cabecera para asegurar compatibilidad de caracteres ( 10 Prácticas Esenciales de HTML para un Código Limpio – Mejora tu Desarrollo Web), tal como hemos hecho. Esto evitará problemas de visualización de texto en distintos idiomas o configuraciones. - Cerrar todas las etiquetas apropiadamente: En HTML debes cerrar cada etiqueta que abra contenido. Por ejemplo, si abres
<p>debes luego escribir</p>al final del párrafo. El cierre debe respetar el orden de anidación (primero cierra la última que abriste). Olvidar cerrar etiquetas o invertir su orden puede producir HTML inválido o comportamientos inesperados ( 10 Prácticas Esenciales de HTML para un Código Limpio – Mejora tu Desarrollo Web). Excepción: algunas etiquetas son vacías (vacuum elements) y no tienen cierre porque no envuelven contenido, como vimos con<br>o<hr>(también<img>,<meta>, etc.), que se auto-cierran ( 10 Prácticas Esenciales de HTML para un Código Limpio – Mejora tu Desarrollo Web). - Usar minúsculas y consistencia: Aunque HTML no distingue mayúsculas de minúsculas en los nombres de etiquetas (es case-insensitive), es una buena práctica escribir todas las etiquetas y atributos en minúsculas para mantener la consistencia y legibilidad ( 10 Prácticas Esenciales de HTML para un Código Limpio – Mejora tu Desarrollo Web). Por ejemplo,
<body>en lugar de<BODY>. Esto facilita la lectura y edición del código por parte de diferentes desarrolladores. - Indentación y formato del código: Formatea tu HTML con una indentación clara. Esto significa tabular o agregar espacios en las etiquetas anidadas dentro de otras. Por ejemplo, el contenido dentro de
<html>se suele indentar, lo dentro de<body>se indenta un nivel más, etc. La indentación consistente hace más fácil visualizar la estructura jerárquica del documento y detectar etiquetas mal anidadas ( 10 Prácticas Esenciales de HTML para un Código Limpio – Mejora tu Desarrollo Web). Un código correctamente indentado es más mantenible y reduce errores. - Separación de preocupaciones: En ejercicios simples es aceptable usar etiquetas HTML como
<b>o atributos comoalignpara dar estilo, pero en proyectos reales es preferible mantener el HTML para la estructura y usar CSS para la presentación. Por ejemplo, en lugar de<center>(obsoleto) usaríamos CSS:style="text-align:center;"o una clase CSS. Mantener HTML semántico y la presentación en CSS mejora la flexibilidad. En nuestro caso, hemos usado algunas etiquetas de presentación para ilustrar conceptos, pero ten en cuenta que la tendencia moderna es utilizarlas menos y apoyarse más en CSS y etiquetas semánticas. - No abusar de elementos sin semántica: Evita usar múltiples
<br>seguidos para generar espacios grandes, o demasiados<div>vacíos para empujar contenido. En vez de eso, estructura tu contenido en párrafos, secciones o utiliza CSS para los espacios. Cada elemento HTML debe usarse para su propósito previsto: por ejemplo, usar un párrafo<p>para cada idea separada, un encabezado<h1>para el título principal, etc., en lugar de solo cambiar tamaños de texto con estilos sin indicar estructura. Un código semántico mejora la accesibilidad y SEO.
Conclusión
Hemos construido paso a paso la base de una página HTML, incorporando todos los elementos pedidos en el ejercicio: desde la estructura mínima con <!DOCTYPE html>, <html>, <head> y <body>, hasta los distintos tipos de contenido (encabezados, párrafos, saltos de línea, líneas horizontales, texto con formato y elementos centrados), incluyendo comentarios y recomendaciones de estilo. Este recorrido no solo nos permite obtener una página de ejemplo funcional, sino que sienta las bases para entender cómo estructurar documentos HTML más complejos en el futuro.
¿Qué sigue? Con estos fundamentos, el lector podrá experimentar creando nuevas secciones, agregando más contenido y combinando estilos mediante CSS cuando esté listo. La práctica constante de escribir HTML respetando la semántica y las buenas prácticas aquí descritas es clave. A medida que afrontes ejercicios más avanzados, recuerda que una página web bien estructurada es más fácil de ampliar y mantener. ¡Manos a la obra! Usa este ejercicio como punto de partida para crear tus propias páginas e ir incorporando gradualmente nuevos elementos (listas, tablas, formularios, multimedia, etc.), siempre apoyándote en una sólida estructura HTML. La comprensión detallada de estos conceptos iniciales te permitirá construir sobre ellos con confianza y desarrollar sitios web completos y bien organizados.