Sintaxis básica de HTML

¿Qué es HTML?

HTML (HyperText Markup Language, lenguaje de marcado de hipertexto) es un lenguaje de marcado que indica a los navegadores web cómo estructurar las páginas web que visitas. HTML consiste en una serie de elementos, que usas para encerrar, envolver o marcar distintas partes del contenido para que aparezcan o se comporten de cierta manera. Las etiquetas que lo encierran pueden convertir el contenido en un hipervínculo que enlace a otra página, poner palabras en cursiva, etc. Por ejemplo, fíjate en la siguiente línea de texto:

Mi gato es muy gruñón

Podríamos especificar que este texto es un párrafo encerrándolo entre etiquetas de párrafo (<p>):

<p>Mi gato es muy gruñón</p>

O podríamos especificar que este texto es un encabezado de nivel superior encerrándolo entre etiquetas <h1>:

<h1>Mi gato es muy gruñón</h1>

HTML vive dentro de archivos de texto llamados documentos HTML, o simplemente documentos, con la extensión de archivo .html. Si antes hablábamos de páginas web, un documento HTML contiene el contenido de la página web y especifica su estructura.

El archivo HTML más habitual que te encontrarás es index.html, que suele usarse para el contenido de la página de inicio de un sitio web. También es habitual ver subcarpetas con sus propios archivos index.html, así que un sitio web puede tener varios archivos índice en distintos lugares.

Anatomía de un elemento HTML

Exploremos un poco más nuestro elemento de párrafo de la sección anterior:

Nuestro elemento completo consta de:

• La etiqueta de apertura: consiste en el nombre del elemento (en este ejemplo, p de párrafo) entre corchetes angulares de apertura y de cierre. Esta etiqueta de apertura marca dónde empieza el elemento o dónde empieza a surtir efecto. En este ejemplo, precede al inicio del texto del párrafo.
• El contenido: es el contenido del elemento. En este ejemplo, es el texto del párrafo: «Mi gato es muy gruñón».
• La etiqueta de cierre: es igual que la etiqueta de apertura, salvo que incluye una barra antes del nombre del elemento. Marca dónde termina el elemento. No incluir una etiqueta de cierre es un error habitual de principiante que puede producir resultados peculiares.

Crear tu primer elemento HTML

Vamos a practicar un poco escribiendo tus propios elementos HTML:

1. Haz clic en "Play" en el bloque de código de abajo para editar el ejemplo en el MDN Playground.
2. Envuelve la línea de texto con las etiquetas <em> y </em>. Para abrir el elemento, pon la etiqueta de apertura (<em>) al principio de la línea. Para cerrar el elemento, pon la etiqueta de cierre (</em>) al final de la línea. Al hacerlo, el texto representado debería aparecer en cursiva.
3. Si te sientes aventurero, prueba a investigar más elementos HTML y aplicarlos al texto de ejemplo.

Si cometes un error, puedes borrar tu trabajo usando el botón Reset en el MDN Playground. Si te quedas realmente atascado, puedes ver la solución debajo del bloque de código.

Este es mi texto.

<em>Este es mi texto.</em>

Anidar elementos

Los elementos se pueden colocar dentro de otros elementos. Esto se llama anidamiento. Si quisiéramos decir que nuestro gato es muy gruñón, podríamos envolver la palabra muy en un elemento <strong>, que da a la palabra un formato de texto más fuerte:

<p>Mi gato es <strong>muy</strong> gruñón.</p>

En este bloque de código, todo el texto «Mi gato es muy gruñón.» se define como un párrafo. La palabra «muy» se define además como de gran importancia.

Hay una forma correcta y una incorrecta de anidar. En el bloque de código anterior, primero abrimos el elemento <p> y después el elemento <strong>. Para anidar correctamente, primero cerramos el elemento <strong> y después el <p>.

El siguiente es un ejemplo de la forma incorrecta de anidar:

<p>Mi gato es <strong>muy gruñón.</p></strong>

Las etiquetas tienen que abrirse y cerrarse de forma que queden una dentro o fuera de la otra. Como en el bloque de código anterior los elementos se solapan, el navegador tiene que adivinar tu intención. Este tipo de adivinanzas puede dar resultados inesperados.

Elementos vacíos

No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos constan de una sola etiqueta, que normalmente se usa para insertar o incrustar algo en el documento. Estos elementos se llaman elementos vacíos, lo que significa «elementos que no pueden contener otro contenido HTML».

Por ejemplo, el elemento <br> inserta un salto de línea en una línea de texto, lo que hace que se divida en varias líneas:

<p>
  Este es un único párrafo, pero vamos a <br />dividirlo en dos líneas aparte.
</p>

Se ve así:

Atributos

Los elementos también pueden tener atributos. Los atributos tienen este aspecto:

Los atributos contienen información adicional sobre el elemento que no forma parte de su contenido. El atributo class proporciona un nombre identificativo que se puede usar para seleccionar el elemento con estilos (CSS) o con información de script (JavaScript).

Un atributo debe tener:

• Un espacio entre él y el nombre del elemento. Cuando un elemento tiene más de un atributo, los atributos también deben separarse con espacios.
• El nombre del atributo, seguido de un signo igual (=).
• Un valor de atributo, entre comillas de apertura y de cierre.

Añadir atributos a un elemento

Ahora te toca otra vez. En esta sección vas a explorar el elemento <img>, que se usa para mostrar una imagen en la página. El elemento <img> puede llevar varios atributos, entre ellos:

• src: un atributo obligatorio que especifica la URL (dirección web) de la imagen. Por ejemplo: src="https://mdn.github.io/shared-assets/images/examples/fx-nightly-512.png".
• alt: especifica una descripción de texto que describe la imagen a las personas que no pueden verla. Por ejemplo: alt="El icono de Firefox Nightly". Técnicamente este atributo no es obligatorio, pero deberías proporcionar una descripción de texto para todas las imágenes que transmitan significado (en lugar de ser puramente decorativas).
• width: especifica el ancho de la imagen en píxeles. Por ejemplo: width="300".
• height: especifica la altura de la imagen en píxeles. Por ejemplo: height="300".

Sigue los pasos siguientes para completar la tarea:

1. Haz clic en "Play" en el bloque de código de abajo para editar el ejemplo en el MDN Playground.
2. Busca en internet tu imagen favorita, haz clic derecho en ella y pulsa Copiar dirección de la imagen (o Copiar enlace de la imagen). También puedes copiar la URL de la imagen de arriba.
3. De vuelta en el MDN Playground, añade el atributo src al elemento <img> y establece como valor la URL del paso 2.
4. Establece en el atributo alt una descripción adecuada de la imagen.
5. Establece el atributo width en un valor como 300 para ver la imagen un poco mejor dentro del panel de resultados. Ajusta el valor si hace falta.

Si cometes un error, puedes borrar tu trabajo usando el botón Reset en el MDN Playground. Si te quedas realmente atascado, puedes ver la solución debajo del bloque de código.

<img />

<img
  src="https://mdn.github.io/shared-assets/images/examples/fx-nightly-512.png"
  alt="Una descripción de la imagen"
  width="300" />

Atributos booleanos

A veces verás atributos HTML escritos sin valores. Se llaman atributos booleanos. Cuando se añade un atributo booleano, su valor se establece en true, sea cual sea el valor que se le asigne (incluso ninguno). Si un atributo no se incluye en una etiqueta HTML, su valor se establece en false.

Por ejemplo, fíjate en el atributo disabled, que puedes asignar a los elementos <input> de un formulario para impedir que el usuario introduzca datos en ellos. Por ejemplo:

<label for="first-input">Este campo está desactivado</label>
<input id="first-input" type="text" disabled="disabled" />
<br />

Como forma abreviada, se puede escribir el atributo disabled sin valor:

<label for="second-input">Este campo también está desactivado</label>
<input id="second-input" type="text" disabled />
<br />

Como referencia, añadamos también un elemento <input> que no esté desactivado, para que puedas compararlos (fíjate en que los campos disabled aparecen algo atenuados en el resultado de abajo):

<label for="third-input">Este no está desactivado: puedes escribir en él</label>
<input id="third-input" type="text" />

Los fragmentos de HTML anteriores se ven así:

Omitir las comillas de los valores de atributo

En ciertas circunstancias, se pueden omitir las comillas de los valores de atributo. Pero como en otras circunstancias esto puede romper tu marcado, te recomendamos incluir siempre las comillas. Veamos por qué.

El elemento del fragmento de código siguiente, <a>, se llama ancla. Las anclas encierran texto y lo convierten en enlaces. El atributo href especifica la URL a la que apunta el enlace. Puedes omitir las comillas del valor del atributo href que se muestra abajo sin consecuencias negativas, porque no contiene espacios:

<a href=https://www.mozilla.org/>sitio web favorito</a>

Sin embargo, enseguida tendrás problemas al omitir las comillas en valores de atributo con espacios. Fíjate en el atributo title que se muestra abajo, que proporciona una descripción de la página enlazada («The Mozilla homepage») que debería aparecer como información emergente al pasar el puntero del ratón por encima del enlace.

<a href=https://www.mozilla.org/ title=The Mozilla homepage>sitio web favorito</a>

Como el valor del atributo title no está entre comillas, el navegador lo interpreta como tres atributos: un atributo title con el valor The, y dos atributos booleanos, Mozilla y homepage. ¡Evidentemente, esto no es lo que pretendíamos! Si usas un dispositivo con puntero de ratón, puedes pasar el puntero por encima del enlace para ver la información emergente del título (mostrará «The» en lugar del «The Mozilla homepage» que pretendíamos).

Incluye siempre las comillas en los valores de atributo. Evita errores y comportamientos no deseados, y da como resultado un código más legible.

¿Comillas simples o dobles?

En este artículo hemos puesto todos los valores de atributo entre comillas dobles. Sin embargo, puede que veas comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir la que prefieras. Estas dos líneas son equivalentes:

<a href='https://www.example.com'>Un enlace a mi ejemplo.</a>

<a href="https://www.example.com">Un enlace a mi ejemplo.</a>

Asegúrate de no mezclar comillas simples y dobles. El ejemplo de abajo mezcla comillas, lo que provocará errores, porque para el navegador el valor del atributo href no ha terminado:

<a href="https://www.example.com'>Un enlace a mi ejemplo.</a>

Si usas un tipo de comillas, puedes incluir el otro tipo dentro de los valores de atributo. Esto funciona bien:

<a href="https://www.example.com" title="¿No es 'divertido'?">
  Un enlace a mi ejemplo.
</a>

Para usar comillas dentro de otras comillas del mismo tipo (simples o dobles), puedes usar referencias de caracteres. Por ejemplo, esto se romperá:

<a href="https://www.example.com" title="Una referencia "interesante"">Un enlace a mi ejemplo.</a>

En su lugar, tienes que hacer esto:

<a href="https://www.example.com" title="Una referencia &quot;interesante&quot;">Un enlace a mi ejemplo.</a>

Anatomía de un documento HTML

Los elementos HTML individuales no son muy útiles por sí solos. A continuación, veamos cómo se combinan los elementos individuales para formar una página HTML completa.

El siguiente ejemplo es una página web completa muy sencilla:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Mi página de prueba</title>
  </head>
  <body>
    <p>Esta es mi página</p>
  </body>
</html>

Las partes de este ejemplo son las siguientes:

1. <!doctype html>: el doctype. Cuando HTML era joven (1991-1992), los doctypes debían funcionar como enlaces a un conjunto de reglas que la página HTML tenía que seguir para considerarse HTML correcto. Los doctypes solían tener este aspecto:

   html

   <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   

   Hoy en día, el doctype es un vestigio histórico que hay que incluir para que todo lo demás funcione correctamente. <!doctype html> es la cadena de caracteres más corta que cuenta como doctype válido, y debe incluirse al principio de todas las páginas web. ¡Es todo lo que necesitas saber!

2. <html></html>: el elemento <html>. Este elemento envuelve todo el contenido de la página. A veces se le llama elemento raíz.

3. <head></head>: el elemento <head>. Este elemento funciona como contenedor de la información sobre la página que no forma parte del contenido que verán los usuarios. Puede incluir palabras clave y una descripción de la página para mostrar en los resultados de búsqueda, CSS para dar estilo al contenido, declaraciones del juego de caracteres y más. Aprenderás más sobre la cabecera de la página en el siguiente artículo.

4. <meta charset="utf-8">: un elemento <meta>. Este elemento representa metadatos que describen la página. El atributo charset especifica la codificación de caracteres que usará tu documento. UTF-8 incluye la mayoría de los caracteres de la inmensa mayoría de los idiomas escritos, lo que significa que la página podrá mostrar distintos idiomas correctamente. No hay motivo para no establecerlo, y puede ayudar a evitar algunos problemas más adelante.

5. <title></title>: el elemento <title>. Establece el título de la página, que es el título que aparece en la pestaña del navegador en la que se carga la página. El título de la página también se usa para describirla cuando se guarda en marcadores.

6. <body></body>: el elemento <body>. Contiene todo el contenido que se muestra en la página, incluidos texto, imágenes, videos, juegos, pistas de audio reproducibles, etc.

Añadir algunas funciones a un documento HTML

En este punto, queremos que practiques escribiendo contenido HTML algo más sustancial. Para ello, tienes un par de opciones: puedes crear el HTML en tu computadora local o usar el MDN Playground como en los ejemplos anteriores.

Preparación del ejemplo

• Para hacerlo en tu equipo local:
  1. Copia el ejemplo de página HTML de la sección anterior y pégalo en un archivo nuevo en tu editor de código. También puedes encontrar esta plantilla HTML básica en nuestro repositorio de GitHub.
  2. Haz en la página los cambios que se indican en las instrucciones.
  3. Guarda el archivo como index.html y cárgalo en una pestaña nueva del navegador para ver los resultados.
• Para hacerlo en el MDN Playground, haz clic en "Play" en el panel de resultados de abajo para editar el ejemplo y después sigue las instrucciones. Si cometes un error, puedes borrar tu trabajo usando el botón Reset en el MDN Playground.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Mi página de prueba</title>
  </head>
  <body>
    <p>Esta es mi página</p>
  </body>
</html>

Instrucciones del ejemplo

Estas son las instrucciones que debes seguir:

1. Justo debajo de la etiqueta de apertura del elemento <body>, añade un título principal para el documento. Debe ir entre las etiquetas de apertura y de cierre <h1></h1>.
2. Edita el contenido del párrafo para incluir texto sobre un tema que te parezca interesante.
3. Haz que las palabras importantes destaquen en negrita envolviéndolas en un elemento <strong>.
4. Añade dos enlaces a tu párrafo. Se hace con el elemento <a>.
5. Añade una imagen a tu documento debajo del párrafo, como se explicó antes. Si es demasiado grande para verla, añade un atributo width para reducirla.

Si te quedas realmente atascado, puedes ver una posible solución aquí:

<h1>Algo de música</h1>
<p>
  Me encanta <strong>tocar la batería</strong>. Uno de mis bateristas favoritos
  es Neal Peart, que tocaba en la banda
  <a href="https://es.wikipedia.org/wiki/Rush_%28banda%29">Rush</a>. Mi álbum
  favorito de Rush ahora mismo es
  <a href="https://www.deezer.com/album/942295">Moving Pictures</a>.
</p>
<img
  src="https://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"
  alt="Portada del álbum Moving Pictures de Rush"
  width="300" />

Espacios en blanco en HTML

En los ejemplos anteriores hemos incluido muchos espacios en blanco en el código. En la mayoría de los casos son completamente opcionales y se incluyen sobre todo para que el código sea más legible. Por ejemplo, estos dos fragmentos de código son equivalentes:

<p id="noWhitespace">Los perros son tontos.</p>

<p id="whitespace">Los perros
    son
        tontos.</p>

Los dos se ven exactamente igual:

En casi todos los elementos (hay excepciones, como <pre>), da igual cuántos espacios en blanco uses dentro del contenido de un elemento HTML: el analizador de HTML reduce cada secuencia de espacios en blanco a un solo espacio al representar el código.

Tú decides qué estilo de formato de código prefieres. Lo habitual es dar a cada elemento anidado dos espacios más de sangría que al elemento que lo contiene; es el estilo que usamos en MDN.

Por ejemplo:

<section>
  <div>
    <p>Un párrafo de contenido.</p>
  </div>
</section>

Referencias de caracteres: incluir caracteres especiales en HTML

En HTML, los caracteres <, >, ", ' y & son caracteres especiales. Forman parte de la propia sintaxis de HTML. Entonces, ¿cómo incluyes estos caracteres especiales en tu texto? Por ejemplo, ¿cómo puedes usar un signo «y» (ampersand) literal o un signo «menor que» en tu contenido sin que se interprete como código?

Para ello se usan las referencias de caracteres. Son códigos especiales que representan caracteres, para usarlos precisamente en estas circunstancias. Cada referencia de carácter empieza con un ampersand (&) y termina con un punto y coma (;).

Las referencias de caracteres se recuerdan con bastante facilidad, porque el texto que usan es una abreviatura del nombre del carácter en inglés; por ejemplo, «lt» = «less than» (menor que), «quot» = «quotation» (comillas) y «amp» = «ampersand». Para obtener más información sobre las referencias de entidades, consulta el anexo de referencias a entidades de caracteres XML y HTML (Wikipedia).

En el ejemplo de abajo hay dos párrafos:

<p>En HTML, defines un párrafo con el elemento <p>.</p>

<p>En HTML, defines un párrafo con el elemento &lt;p&gt;.</p>

Se ve así:

Puedes ver que el primer párrafo sale mal, porque el navegador ha interpretado la segunda aparición de <p> como el inicio de un párrafo nuevo. El segundo párrafo se ve bien, porque los corchetes angulares del contenido «<p>» están representados por referencias de caracteres.

Comentarios en HTML

HTML tiene un mecanismo para escribir comentarios en el código. Los navegadores ignoran los comentarios, por lo que son invisibles para el usuario. El propósito de los comentarios es permitirte incluir notas en el código para explicar cómo funciona. Es muy útil si vuelves a un código después de pasar suficiente tiempo sin verlo como para no recordarlo, o si empieza a trabajar en él alguien que nunca lo ha visto.

Para escribir un comentario HTML, envuélvelo en los marcadores especiales <!-- y -->, como se muestra a continuación:

<p>No estoy dentro de un comentario</p>

<!-- <p>¡Yo sí!</p> -->

Este código se ve así:

En el resultado en vivo solo se muestra el primer párrafo; la segunda línea no se representa porque es un comentario HTML.

Resumen

¡Has llegado al final del artículo! Esperamos que hayas disfrutado de este recorrido por los fundamentos de HTML.

A estas alturas, deberías entender cómo es HTML y cómo funciona a nivel básico. También deberías poder escribir algunos elementos y atributos. Los siguientes artículos de este módulo profundizan en algunos de los temas presentados aquí, además de presentar temas nuevos.

• Overview: Estructurando la web con HTML
• Siguiente