HTML - Sintaxis

Mateo G. -

Estructura Básica de un Documento HTML

Cada documento HTML sigue una estructura básica que incluye varios elementos clave. Entender esta estructura es necesario para crear páginas HTML bien formadas y válidas.

El primer elemento en un documento HTML es la declaración <!DOCTYPE>. Esta declaración informa al navegador web sobre la versión de HTML que se está utilizando. Para HTML5, el estándar actual, la declaración es simplemente <!DOCTYPE html>. Debe colocarse al principio del documento, antes de cualquier otro elemento.

El siguiente elemento es el elemento <html>, que envuelve todo el contenido de la página. Se conoce como el elemento raíz de un documento HTML. Todos los demás elementos deben estar anidados dentro de las etiquetas <html>.

Dentro del elemento <html>, hay dos secciones principales: el <head> y el <body>.

El elemento <head> contiene metadatos sobre el documento HTML, como el título de la página, la codificación de caracteres y enlaces a archivos CSS y JavaScript externos. Esta información no es visible en la página web en sí, pero es utilizada por navegadores y motores de búsqueda. Los elementos importantes dentro del <head> incluyen <title>, <meta>, <link> y <script>.

El elemento <body> contiene el contenido visible de la página web, como encabezados, párrafos, imágenes, listas y tablas. Todo el contenido que los usuarios ven e interactúan debe colocarse dentro de las etiquetas <body>.

Consejo: Estructura Básica de un Documento HTML

<!DOCTYPE html>
<html>
<head>
    <title>Mi Página Web</title>
</head>
<body>
    <h1>¡Bienvenido a mi página web!</h1>
    <p>Esto es un párrafo de texto.</p>
</body>
</html>

Etiquetas HTML

Las etiquetas HTML son los componentes básicos de las páginas web, permitiéndote estructurar y dar formato al contenido. Las etiquetas definen elementos como encabezados, párrafos, listas y enlaces. Usar las etiquetas correctamente es importante para crear HTML bien estructurado y semántico.

La mayoría de las etiquetas HTML tienen una etiqueta de apertura y una de cierre, que rodean el contenido que definen. Las etiquetas de apertura comienzan con <, seguido del nombre de la etiqueta y >. Las etiquetas de cierre son similares pero incluyen / antes del nombre de la etiqueta. Por ejemplo, un párrafo se define usando la etiqueta <p>, así: <p>Esto es un párrafo.</p>.

Algunas etiquetas HTML, conocidas como etiquetas de cierre automático o vacías, no necesitan una etiqueta de cierre. Estas etiquetas representan elementos que no tienen contenido dentro de ellos. Ejemplos de etiquetas de cierre automático incluyen <br> para saltos de línea, <img> para imágenes y <meta> para metadatos. En HTML5, es opcional incluir el / de cierre para las etiquetas de cierre automático, por lo que tanto <br> como <br /> son válidos.

Al usar múltiples etiquetas para definir la estructura de tu contenido, anídalas correctamente. Esto significa cerrar las etiquetas en el orden inverso al que fueron abiertas. Por ejemplo, si tienes una etiqueta <strong> dentro de una etiqueta <p>, cierra la etiqueta <strong> antes que la etiqueta <p>:

Consejo: This is a paragraph with nested tags

<p>Este es un <strong>párrafo</strong> con etiquetas anidadas.</p>

Las etiquetas anidadas incorrectamente pueden llevar a resultados inesperados y hacer que tu HTML sea inválido. Asegúrate siempre de que tus etiquetas estén anidadas y cerradas correctamente para mantener un documento bien estructurado.

Elementos HTML

Un elemento HTML es una parte de un documento HTML que tiene una etiqueta de apertura, contenido y una etiqueta de cierre. Los elementos estructuran y dan significado al contenido dentro de una página web. La etiqueta de apertura muestra el inicio de un elemento, mientras que la etiqueta de cierre marca su final. El contenido entre estas etiquetas puede ser texto, otros elementos HTML o ambos.

Los elementos HTML también pueden tener atributos. Los atributos proporcionan información adicional sobre el elemento y se colocan dentro de la etiqueta de apertura. Tienen un nombre y un valor, separados por un signo igual (=). El nombre del atributo muestra la propiedad que se está estableciendo, mientras que el valor del atributo proporciona el valor para esa propiedad. Por ejemplo, el elemento <a>, que crea un hipervínculo, utiliza el atributo href para especificar el destino del enlace:

Consejo: Anchor element with href attribute

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

Los atributos comunes incluyen class e id, que se utilizan para dar estilo y seleccionar elementos con CSS y JavaScript. El atributo class te permite agrupar elementos según características compartidas, mientras que el atributo id proporciona un identificador único para un elemento específico dentro del documento.

Algunos elementos HTML, conocidos como elementos vacíos o elementos nulos, no tienen una etiqueta de cierre y no pueden contener ningún contenido. Estos elementos se cierran a sí mismos y se utilizan para insertar o incrustar contenido en la página. Ejemplos de elementos vacíos incluyen:

Elemento Descripción
<br> Inserta un salto de línea
<hr> Crea una regla horizontal o separación temática
<img> Incrusta una imagen en la página
<input> Crea un campo de entrada para interacción del usuario
<meta> Proporciona metadatos sobre el documento HTML

Al usar elementos vacíos, recuerda que no tienen una etiqueta de cierre. En HTML5, la barra diagonal (/) de cierre es opcional para elementos vacíos, por lo que tanto <br> como <br /> son válidos.

Sensibilidad a mayúsculas y minúsculas

En HTML, los nombres de etiquetas y atributos no distinguen entre mayúsculas y minúsculas. Esto significa que, ya sea que use letras mayúsculas o minúsculas, el navegador web entenderá las etiquetas y atributos de la misma manera. Por ejemplo, <div>, <DIV> y <Div> serán tratados como la misma etiqueta <div> por el navegador.

Sin embargo, es una convención común usar letras minúsculas para todos los nombres de etiquetas y atributos en HTML. Esta práctica mejora la legibilidad y consistencia del código, facilitando a los desarrolladores entender y mantener el código. El uso de minúsculas también se adhiere a la especificación HTML5, que recomienda minúsculas para etiquetas y atributos.

Consejo: Ejemplo de casos de etiquetas

<!-- Válido pero no recomendado -->
<DIV class="content">
    <P>Esto es un párrafo.</P>
</DIV>

<!-- Recomendado -->
<div class="content">
    <p>Esto es un párrafo.</p>
</div>

Al escribir nombres de atributos dentro de las etiquetas, se aplica la misma convención. Se prefieren los nombres de atributos en minúsculas para mantener la consistencia y legibilidad. Por ejemplo, al usar el atributo class, escríbalo como class="ejemplo" en lugar de CLASS="ejemplo".

Consejo: Ejemplo de casos de atributos

<!-- Válido pero no recomendado -->
<a HREF="https://www.ejemplo.com">Visitar Ejemplo.com</a>

<!-- Recomendado -->
<a href="https://www.ejemplo.com">Visitar Ejemplo.com</a>

Aunque HTML no distingue entre mayúsculas y minúsculas, es importante tener en cuenta que otras tecnologías relacionadas, como CSS y JavaScript, sí lo hacen. Al hacer referencia a elementos HTML en CSS o JavaScript, asegúrese de usar el caso correcto para selectores, propiedades y variables.

Adherirse a la convención de minúsculas para etiquetas y atributos HTML ayuda a mantener la consistencia, mejora la legibilidad y hace que su código sea más compatible con los estándares web.

Espacios en blanco e indentación

En HTML, los espacios en blanco entre elementos, como espacios, tabulaciones y saltos de línea, son en gran medida ignorados por los navegadores web al renderizar la página. Este comportamiento se conoce como colapso de espacios en blanco. Múltiples espacios, tabulaciones o saltos de línea se tratan como un solo espacio, y el navegador ajustará automáticamente el diseño de los elementos según el espacio disponible y los estilos CSS aplicados.

Consejo: Múltiples espacios colapsados

<!-- Los múltiples espacios se colapsan en un solo espacio -->
<p>Esto    es    un    párrafo.</p>

Aunque el navegador colapsa los espacios en blanco, sigue siendo importante usar una indentación y espaciado adecuados en tu código HTML para mejorar la legibilidad y mantenibilidad. Un código bien organizado es más fácil de leer, entender y depurar, especialmente cuando se trabaja en proyectos más grandes o se colabora con otros desarrolladores.

Para mejorar la legibilidad del código, sigue estas mejores prácticas para la indentación:

Mejor práctica Descripción
Usa una indentación consistente Utiliza espacios o tabulaciones para la indentación, pero mantén un método consistente en todo tu documento HTML.
Indenta los elementos anidados Indenta los elementos anidados para mostrar su jerarquía y relación con los elementos padres. Cada nivel de anidación debe estar indentado por una cantidad consistente, como 2 o 4 espacios.
Usa líneas en blanco Utiliza líneas en blanco para separar secciones distintas de tu código, como entre diferentes elementos o grupos de elementos relacionados. Esto facilita la identificación visual de la estructura de tu documento.
Divide las líneas largas Cuando te enfrentes a líneas de código largas, considera dividirlas en múltiples líneas para mejorar la legibilidad. Por ejemplo, si un elemento tiene muchos atributos, puedes colocar cada atributo en una nueva línea e indentarlos para mayor claridad.

Consejo: Ejemplo de indentación

<div>
  <h1>Encabezado principal</h1>
  <p>Este es un párrafo.</p>
  <ul>
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
  </ul>
</div>

Consejo: División de líneas largas

<img src="imagen.jpg"
     alt="Imagen de ejemplo"
     class="imagen-responsive"
     width="500"
     height="300">

Recuerda que, aunque la indentación y el espaciado adecuados no afectan cómo el navegador renderiza la página, son esenciales para hacer que tu código sea más legible y mantenible. Es un buen hábito que conviene desarrollar desde el principio, ya que te ayudará a escribir código más limpio y organizado, especialmente a medida que tus proyectos crezcan en complejidad.

Comentarios en HTML

Los comentarios en HTML añaden notas, explicaciones o recordatorios dentro del código sin afectar el contenido que se muestra en la página web. Ayudan a documentar tu código, facilitando su comprensión y mantenimiento, especialmente cuando trabajas con otros desarrolladores o regresas a un proyecto después de cierto tiempo.

HTML admite dos tipos de comentarios: comentarios de una sola línea y comentarios de múltiples líneas.

Los comentarios de una sola línea comienzan con <!-- y terminan con -->. Se utilizan para notas o explicaciones breves que caben en una sola línea. Los navegadores web ignoran el contenido entre las etiquetas de apertura y cierre del comentario.

Consejo: Ejemplo de comentario de una sola línea

<!-- Esto es un comentario de una sola línea -->
<p>Esto es un párrafo.</p>

Los comentarios de múltiples líneas también comienzan con <!-- y terminan con -->, pero pueden abarcar varias líneas. Son útiles para explicaciones más largas, para eliminar temporalmente secciones de código o para añadir documentación detallada.

Consejo: Ejemplo de comentario de múltiples líneas

<!--
  Esto es un comentario de múltiples líneas.
  Puede abarcar varias líneas.
  Úsalo para explicaciones más largas o para eliminar código temporalmente.
-->
<div>
  <h1>Encabezado</h1>
  <p>Esto es un párrafo.</p>
</div>

Al usar comentarios en tu código HTML, sigue estas mejores prácticas:

Mejor práctica Descripción
Usa comentarios con moderación Aunque los comentarios pueden ser útiles, demasiados comentarios pueden saturar tu código y dificultar su lectura. Usa comentarios solo cuando sea necesario para aclarar partes complejas o no obvias de tu código.
Mantén los comentarios concisos Los comentarios deben ser breves y directos. Evita escribir explicaciones largas o repetir información que ya es clara en el código mismo.
Actualiza los comentarios al actualizar el código Si haces cambios en tu código, asegúrate de que los comentarios relacionados se actualicen para reflejar esos cambios. Los comentarios desactualizados pueden ser engañosos y causar confusión.
Elimina comentarios innecesarios antes de la implementación Antes de implementar tu código en un entorno de producción, elimina los comentarios que ya no sean necesarios, como los utilizados para depuración o eliminación temporal de código. Esto ayuda a mantener tu código final limpio y optimizado.

Consejo: Ejemplos de comentarios en línea

<!-- TODO: Agregar script de validación de formulario -->
<form>
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Enviar</button>
</form>

<!--
<div class="seccion-obsoleta">
  <p>Esta sección ya no está en uso y será eliminada en una futura actualización.</p>
</div>
-->

Errores comunes de sintaxis

Al escribir HTML, puedes cometer errores de sintaxis, especialmente si eres principiante. Estos errores pueden llevar a resultados inesperados o hacer que tu página web no se muestre correctamente. Aquí hay algunos errores comunes de sintaxis a tener en cuenta:

Error Descripción
Olvidar etiquetas de cierre La mayoría de los elementos HTML necesitan tanto una etiqueta de apertura como una de cierre. No incluir la etiqueta de cierre puede hacer que el navegador lea incorrectamente la estructura de tu documento.
Etiquetas anidadas incorrectamente Los elementos HTML deben anidarse de manera que los elementos internos se cierren antes que los elementos externos. Las etiquetas anidadas incorrectamente pueden hacer que el navegador lea la estructura de tu documento de forma errónea.
Etiquetas de apertura y cierre no coincidentes El nombre de la etiqueta en la etiqueta de cierre debe coincidir con el nombre de la etiqueta en la etiqueta de apertura. Las etiquetas no coincidentes pueden hacer que el navegador lea la estructura de tu documento incorrectamente, lo que lleva a que los elementos no se cierren adecuadamente.
Uso incorrecto de comillas en atributos Los valores de los atributos siempre deben estar entre comillas, ya sean simples (') o dobles ("). No usar comillas o usar comillas no coincidentes puede hacer que el navegador interprete mal el valor del atributo.

Ejemplos:

Consejo: Olvidar etiquetas de cierre

<!-- Incorrecto -->
<p>Esto es un párrafo.

<!-- Correcto -->
<p>Esto es un párrafo.</p>

Consejo: Etiquetas anidadas incorrectamente

<!-- Incorrecto -->
<p><strong>Esto es un párrafo.</p></strong>

<!-- Correcto -->
<p><strong>Esto es un párrafo.</strong></p>

Consejo: Etiquetas de apertura y cierre no coincidentes

<!-- Incorrecto -->
<p>Esto es un párrafo.</div>

<!-- Correcto -->
<p>Esto es un párrafo.</p>

Consejo: Uso incorrecto de comillas en atributos

<!-- Incorrecto -->
<img src=imagen.jpg alt=Imagen de ejemplo>

<!-- Correcto -->
<img src="imagen.jpg" alt="Imagen de ejemplo">

Para evitar estos errores comunes de sintaxis, sigue las mejores prácticas como:

  • Incluye siempre etiquetas de cierre para los elementos que las necesitan
  • Anida los elementos correctamente y ciérralos en el orden inverso al que fueron abiertos
  • Comprueba dos veces que los nombres de las etiquetas de apertura y cierre coincidan exactamente
  • Usa comillas de manera consistente alrededor de los valores de los atributos y asegúrate de que estén correctamente emparejadas

Entidades HTML

Las entidades HTML son códigos especiales utilizados para representar caracteres que tienen un significado específico en HTML o que no se pueden escribir fácilmente con un teclado estándar. Estas entidades garantizan que el navegador interprete los caracteres correctamente y los muestre como se pretende en la página web.

Las entidades son útiles cuando se trabaja con caracteres reservados en HTML, como <, >, &, ", y '. Estos caracteres definen la estructura y sintaxis de los elementos HTML, por lo que usarlos directamente en tu contenido puede llevar a errores de análisis o comportamientos inesperados. Para incluir estos caracteres en tu texto, necesitas usar sus entidades HTML.

Aquí hay algunas entidades HTML comunes para caracteres reservados:

Carácter Nombre de la entidad Número de la entidad
< &lt; &#60;
> &gt; &#62;
& &amp; &#38;
" &quot; &#34;
' &apos; &#39;

Para usar una entidad HTML, puedes usar su nombre de entidad o número de entidad. Los nombres de entidad comienzan con un ampersand (&) y terminan con un punto y coma (;), mientras que los números de entidad comienzan con un ampersand y almohadilla (#) y terminan con un punto y coma.

Consejo: Usando nombres de entidades

<!-- Usando nombres de entidades -->
<p>Este es un elemento &lt;p&gt;.</p>
<p>Para mostrar un ampersand, usa &amp;amp;.</p>

Consejo: Usando números de entidades

<!-- Usando números de entidades -->
<p>Este es un elemento &#60;p&#62;.</p>
<p>Para mostrar un ampersand, usa &#38;amp;.</p>

Las entidades HTML no se limitan a caracteres reservados. También pueden representar caracteres especiales, como símbolos, letras acentuadas y emojis, que pueden no estar disponibles en todos los teclados o que podrían ser difíciles de escribir. Algunas entidades de caracteres especiales comunes incluyen:

Carácter Nombre de la entidad Número de la entidad
© &copy; &#169;
® &reg; &#174;
™ &trade; &#8482;
€ &euro; &#8364;
£ &pound; &#163;
¿ &iquest; &#191;
ñ &ntilde; &#241;

Consejo: Entidades de caracteres especiales

<p>Copyright &copy; 2021 Empresa Ejemplo.</p>
<p>El precio es &euro;9.99.</p>
<p>La palabra española para "year" es "a&ntilde;o".</p>

Usar entidades HTML cuando sea necesario ayuda a asegurar que tu contenido se muestre de manera precisa y consistente en diferentes navegadores y dispositivos. También previene errores de análisis y hace que tu código sea más legible y fácil de mantener.