Iniciando en HTML

This translation is incomplete. Please help translate this article from English

En este artículo vamos a exponer lo más básico del HTML, para que puedas empezar a usarlo. Vamos a definir los elementos, los atributos y el resto de términos importantes que quizá ya conozcas y qué función cumplen dentro del lenguaje. Además, vamos a mostrar cómo se estructura un elemento HTML, una página HTML típica y otras características básicas e importantes de este lenguaje. ¡Por el camino, iremos practicando con algo de HTML, para que mantengas el interés!

Prerrequisitos: Conocimientos básicos de informática, tener instalado el software básico y conocimientos básicos de cómo trabajar con archivos.
Objetivo: Familiarizarse con el lenguaje HTML, y adquirir algo de práctica escribiendo unos pocos elementos HTML.

¿Qué es el HTML?

El HTML (HyperText Markup Language o lenguaje de marcas de hipertexto) no es un lenguaje de programación, es un lenguaje de marcado, usado para decirle a tu navegador cómo estructurar la páginas que visitas. Puede ser tan complejo o tan simple como desee el desarrollador web. El HTML consiste en una serie de  elementos, que puedes utilizar para encerrar, delimitar o marcar partes diferentes del contenido para hacer que aparezcan de una cierta manera, o actúen de forma determinada. Las etiquetas que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera. Por ejemplo, dada la siguiente línea de contenido:

Mi gato es muy gruñón

Si queremos que la línea sea independiente de otras, podemos especificar que es un párrafo encerrándola con una etiqueta de elemento de párrafo (<p>)

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

Nota: Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas, así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta <title> puede escribirse como <title>,<TITLE>, <Title>, <TiTle>, etc., y funcionará correctamente. La mejor práctica, sin embargo, es escribir todas las etiquetas en minúsculas para mantener la coherencia y la legibilidad, entre otros motivos.

Anatomía de un elemento HTML

Exploremos un poco el elemento de párrafo:

Las partes principales de nuestro elemento son:

  1. La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrada entre paréntesis angulares de apertura y cierre. Esto indica dónde el elemento comienza o empieza a tener efecto; en este caso, donde comienza el párrafo.
  2. La etiqueta de cierre: es lo mismo que la etiqueta de apertura, excepto que incluye una barra diagonal antes del nombre del elemento. Esto indica dónde termina el elemento; en este caso, dónde finaliza el párrafo. No incluir una etiqueta de cierre es un error común de principiante, y puede conducir a resultados extraños.
  3. El contenido: es el contenido del elemento, que en este caso es solo texto.
  4. El elemento: lo conforman la suma de la etiqueta de apertura, la etiqueta de cierre y  el contenido.

Aprendizaje activo: crear tu primer elemento HTML

Edita la línea de texto contenida en la caja de texto de Entrada con las etiquetas <em> y </em> (poner <em> antes del inicio del elemento, y </em> después, para cerrar el elemento); ¡se obtiene una línea en cursiva! Puedes ver tus cambios actualizados automáticamente en la caja de texto de Salida.

Si te equivocas, siempre puedes volver al código anterior mediante el botón Reset. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.

Elementos anidados

También puedes poner elementos dentro de otros elementos; esto se llama anidamiento. Si quisiéramos decir que nuestro gato es muy gruñón, podríamos encerrar la palabra «muy» en un elemento <strong> para que aparezca destacada.

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

Debes asegurarte de que los elementos estén anidados adecuadamente: en el ejemplo anterior, primero abrimos el elemento p y luego el elemento strong, por lo tanto, debemos cerrar primero el elemento strong, y luego el p. Es incorrecto hacerlo del modo siguiente:

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

Los elementos tienen que abrirse y cerrarse correctamente para que estén claramente dentro o fuera el uno del otro. Si se superponen como en el ejemplo anterior, el navegador tratará de averiguar lo que tratas de expresar y es posible que los resultados no sean los esperados. ¡Así que no lo hagas!

Elementos de bloque y elementos en línea

Hay dos categorías de elementos en HTML, que es importante que conozcas. Estos son los elementos de bloque y los elementos en línea.

  • Los elementos de bloque forman un bloque visible en la página; aparecerán en una línea nueva después de cualquier contenido anterior; y cualquier contenido que vaya después también aparecerá en una línea nueva. Los elementos de bloque tienden a ser elementos estructurales en la página que representan, por ejemplo, párrafos, listas, menús de navegación, pies de página, etc. Un elemento de bloque no estaría anidado dentro de un elemento en línea, pero podría estar anidado dentro de otro elemento de nivel de bloque.
  • Los elementos en línea son aquellos que están contenidos dentro de elementos de bloque y delimitan solo pequeñas partes del contenido del documento, no párrafos enteros ni agrupaciones de contenido. Un elemento en línea no hará aparecer una línea nueva en el documento; normalmente aparecen dentro de un párrafo o texto, por ejemplo es el caso de un elemento <a>  (hipervículo) o elementos de énfasis como <em> o <strong>.

En los siguientes ejemplos:

<em>primero</em><em>segundo</em><em>tercero</em>

<p>cuarto</p><p>quinto</p><p>sexto</p>

<em> es un elemento en línea; así, como puedes observar, los tres primeros elementos se sitúan en la misma línea, uno tras otro sin espacio entre ellos. Por otra parte <p> es un elemento de nivel de bloque, así que cada elemento aparece en una línea nueva, con un espaciado encima y debajo de cada uno (el espaciado es debido al estilo CSS por defecto que aplica el navegador a los párrafos)

Nota: Con HTML5 se redefinieron las categorías de elementos: (ver Categorías de contenido de elementos). Aunque estas definiciones son más precisas y menos ambiguas que las anteriores, son mucho más complicadas de entender que «en bloque» y «en línea», por lo que continuaremos llamandoles de esta forma en este artículo.

Nota: Los términos «en bloque» (block) y «en línea» (inline), tal como se usan en este tema, no deberían confundirse con los tipos de casillas de CSS que se conocen con el mismo nombre. Aunque por defecto están relacionados, el hecho de cambiar el tipo de aspecto visual del CSS no cambia la categoría del elemento ni afecta a aquellos elementos que pueda contener. Una de las razones por las que HTML5 abandonó el uso de estos términos fue para evitar este tipo de confusión.

Nota: Puedes encontrar referencias útiles que incluyen listas de elementos de bloque y elementos en línea. Consulta  Elementos de bloque y Elementos en línea.

Elementos vacíos

No todos los elementos siguen el patrón de arriba: etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde quiere incluirse. Por ejemplo, el elemento <img> inserta una imagen en la posición de la página donde quiere incluirse:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Este texto mostraría lo siguiente en tu página:

Nota: Los elementos vacíos también se llaman en ocasiones elementos nulos o no válidos (void elements).

Atributos

Los elementos también pueden tener atributos, que tienen el aspecto siguiente:

atributo html

Los atributos contienen información extra sobre el elemento que no se mostrará en el contenido. En este caso, el atributo class asigna al elemento un identificador que puede utilizarse para dotarlo de información de estilo y otras cosas.

Un atributo debería tener:

  1. Un espacio entre él y el nombre del elemento (o atributo previo, si el elemento ya tiene uno o más atributos.)
  2. El nombre del atributo, seguido por un signo igual.
  3. Un valor del atributo, con comillas de apertura y cierre.

Aprendizaje activo: Añadir atributos a un elemento

Otro ejemplo de un elemento es <a>, que significa ancla, y creará un hipervínculo en la parte del texto que quede encerrado entre las etiquetas.  Puede tener una serie de atributos entre los que se encuentran los siguientes:

  • href: El valor de este atributo indica la dirección web a la que se quiere que apunte el enlace, que será hacia donde nos lleve el navegador cuando se hace clic sobre el elemento. Por ejemplo, href="https://www.mozilla.org/".
  • title: El atributo title añade información adicional sobre el enlace, como puede ser el título de la página que vinculas. Por ejemplo, title="La página de inicio de Mozilla". Esta información aparecerá cuando se le pase el ratón por encima.
  • target: El atributo target especifica el contexto de navegación que va a usar para mostrar el enlace. Por ejemplo, target="_blank" mostrará el enlace en una pestaña nueva. Si quieres mostrar el enlace en la pestaña activa, simplemente omite este atributo.

Edita la línea de abajo en el área de Entrada para convertirlo en un enlace a tu sitio web favorito. Primero, añade el elemento <a>. Segundo, añade el atributo href y el atributo title. Por último, especifica el atributo target para abrir el enlace en una nueva pestaña. Los cambios se actualizarán inmediatamente en la zona de Salida. Deberás ver un enlace que mostrará el contenido del atributo title cuando pases el ratón encima, y que te llevará a la dirección web indicada por el atributo href cuando hagas clic. Recuerda que debes incluir un espacio entre el nombre del elemento y cada atributo.

Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Reiniciar. Si te quedas atascado, presiona el botón Mostrar solución para ver la respuesta.

Atributos booleanos

En ocasiones puedes ver atributos escritos sin valores. Esto está permitido. Se denominan atributos booleanos y pueden tener únicamente un valor, que como norma general es el mismo que el nombre del atributo. Por ejemplo, el atributo disabled que se puede asignar a elementos de entrada de formularios si se desea desactivarlos para que el usuario no pueda introducir datos en estos.

<input type="text" disabled="disabled">

De manera abreviada, también es posible escribirlo como se describe a continuación (además, se ha incluido un elemento de entrada de formulario no desactivado como referencia, para dar una idea más precisa de lo que sucede):

<input type="text" disabled>

<input type="text">

Ambos producirán la siguiente salida:

Omitir comillas en valores de atributos

Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero interrumpirá la edición en otras. Por ejemplo, si volvemos a revisar el ejemplo de enlace, sería posible escribir una versión básica con solo el atributo href, como este:

<a href=https://www.mozilla.org/>favourite website</a>

Sin embargo, las cosas no funcionarán cuando a este estilo se añada el atributo title:

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

En este punto el navegador interpretará mal el cambio y pensará que el atributo title corresponde a tres atributos: un atributo title con el valor La y dos atributos booleanos: página web de y Mozilla. Obviamente, esto no es lo que se desea, porque causa errores o un comportamiento inesperado en el código, como se observa en el ejemplo siguiente. Mantén el cursor sobre el enlace para ver qué muestra el texto del título.

Se aconseja incluir siempre las comillas de los atributos para evitar este tipo de problemas y producir un código más legible.

¿Comillas simples o dobles?

En este artículo todos los atributos se han incluido en comillas dobles. Sin embargo, se puede ver comillas simples en algunos HTML. Esto es un simple tema de estilo, y puedes elegir usar el tipo que prefieras. Ambas líneas de código son equivalentes.

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

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

Asegúrate de no mezclar ambos tipos de comillas. ¡El ejemplo siguiente estará mal!

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

Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cree problemas:

<a href="http://www.example.com" title="¿A que es divertido?">Un enlace a mi ejemplo.</a>

Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por exemplo, el código siguiente no va a funcionar:

<a href='http://www.example.com' title='¿A que es divertido?'>Un enlace a mi ejemplo.</a>

Así que tendrás que hacer esto:

<a href='http://www.example.com' title='Isn&#39;t this fun?'>Un enlace a mi ejemplo.</a>

Anatomía de un documento HTML

Hasta aquí alcanzan las bases de los elementos HTML de manera individual, aunque no son muy útiles por sí mismos. Ahora veremos cómo combinar los elementos individuales para formar una página HTML completa:

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

Aquí tenemos:

  1. <!DOCTYPE html>: El elemento doctype. En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los doctypes servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML, lo que podía significar poder efectuar una comprobación automática de errores y otras funcionalidades útiles. Un elemento doctype de aquella época podía parecerse a esto:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <!DOCTYPE html> es la secuencia de caracteres más corta que se acepta como elemento doctype válido, y esto es lo único que realmente necesitas saber.
  2. <html></html>: El elemento <html>. Este elemento engloba todo el contenido de la página y es conocido en ocasiones como el elemento raíz.
  3. <head></head>: El elemento <head> (cabecera). Este elemento actúa como contenedor para todos los parámetros que quieras incluir en el documento HTML que no será visible a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que quieras mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Aprenderás más acerca de esto en el siguiente artículo de la serie.
  4. <meta charset="utf-8">: Este elemento establece que tu documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. En resumen: puede gestionar cualquier contenido textual que pongas en tu documento. No hay razón para no configurarlo y puede te ayudar a evitar problemas más adelante.
  5. <title></title>: Este elemento establece el título de tu página, que aparece en la pestaña/ventana de tu navegador cuando la página se carga y se utiliza para describir la página cuando la añades a tus marcadores o la marcas como favorita.
  6. <body></body>: El elemento <body>. Contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa.

Aprendizaje activo: Añadir algunas características a un documento HTML

Si quieres escribir algo de HTML en tu ordenador local para experimentar, puedes:

  1. Copiar el ejemplo de la página HTML indicada en el punto anterior.
  2. Crear un archivo nuevo en un editor de texto.
  3. Pegar el código en el archivo de texto nuevo.
  4. Guardar el archivo como index.html.

Nota: También puedes encontrar esta plantilla básica de HTML en el MDN Learning Area Github repo.

Ahora puedes abrir este archivo en un navegador web para ver cómo se ve el código renderizado, y entonces editar el código y refrescar el navegador para ver cual es el resultado. En principio se verá algo así:

A simple HTML page that says This is my pageAsí que en este ejercicio, puedes editar el código en tu ordenador como se indica arriba, o puedes editarlo en la ventana editable que tienes a continuación (la ventana editable representa solo el contenido del elemento <body>, en este caso). Intenta reproducir los siguientes pasos:

  • Justo debajo de la apertura de la etiqueta <body> , añade un título principal para el documento. Esto deberá estar dentro de una etiqueta de apertura <h1> y una etiqueta de cierre </h1>.
  • Edita el contenido del párrafo e incluye algún texto sobre algo que te interese. 
  • Pon las palabras importantes dentro de las etiquetas <strong> de apertura y </strong> de cierre para que destaquen en negrita.
  • Añade un enlace a tu párrafo, como se ha explicado anteriormente en este artículo.
  • Añade una imagen al documento, debajo del párrafo, como se ha explicado anteriormente en este artículo. Ganarás más puntos si logras vincularlos a una imagen diferente (ya sea una imagen local en tu ordenador o una imagen de internet).

Si te equivocas puedes volver a empezar con el botón Reiniciar. Si te quedas atascado, pulsa el boton Mostrar la solución para ver la respuesta.

Los espacios en blanco en HTML

En los ejemplos anteriores se han incluido espacios en blanco y saltos de línea en el código.  Esto no es realmente necesario. Los dos siguientes fragmentos de código son equivalentes:

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

No importa cuántos espacios en blanco se utilicen (se pueden incluir tanto caracteres de espacio como saltos de línea) el analizador de HTML reduce cada uno a un único espacio al representar el código. ¿Entonces por qué utilizar espacios en blanco?  La respuesta está en la legibilidad: es mucho más fácil entender el código si está bien formateado que si está desordenado. En nuestro HTML cada elemento anidado está sagnado dos espacios más con respecto al que está fuera. Depende de ti qué estilo de formato utilices (cuántos espacios para cada nivel de sangría, por ejemplo) pero debes plantearte el uso de algún tipo de formato.   

Referencias a entidades: Inclusión de caracteres especiales en HTML

En HTML, los carácteres <, >,",' y & son caracteres especiales. Forman parte de la sintaxis HTML , pero ¿cómo se pueden incluir en el texto si realmente queremos hacer uso de un ampersand (&) o el signo menor que (<), y que el navegador no lo interprete como código? 

Tenemos que utilizar caracteres de referencia, es decir, códigos especiales que representan carácteres. Cada caracter de referencia comienza con un signo de ampersand (&) y finaliza con un punto y coma (;).

Carácter literal  Equivalente de referencia de carácteres
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

Considera el siguiente ejemplo:

<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>

En la salida puedes ver que el primer párrafo ha salido mal porque el navegador cree que la segunda instancia de <p> comienza un párrafo nuevo. El segundo párrafo se ve bien porque hemos remplazado < y > por sus referencias correspondientes. 

Nota: En Wikipedia se puede localizar un listado de todas las referencias de entidades de caracteres HTML disponibles: Lista de referencias a las entidades de los carácteres XML y HTML. Observa que no necesitas usar ninguna referencia de entidad más para ningún otro de estos símbolos porque los navegadores modernos gestionan estos símbolos correctamente siempre y cuando en tu HTML hayas establecido el conjunto de codificación de carácteres universal UTF-8.

 Comentarios HTML

En HTML, como en la mayoría de los lenguajes de programación, hay un mecanismo para escribir comentarios en el código. Los comentarios son ignorados por el navegador y son invisibles para el usuario. Su propósito es permitir comentar el código para aclarar su funcionamiento, explicar lo que hacen las diferentes partes del código, etc. Esto es muy útil como recordatorio del trabajo que has hecho  si vuelves a trabajar con un código en el que no has trabajado durante meses o si entregas tu código a otra persona para que trabaje con él.

Para convertir en un comentario una sección de contenido de tu archivo HTML, debes delimitarlo con los marcadores especiales <! - y ->, por ejemplo:

<p>No soy ningún comentario</p>

<!-- <p>¡Lo soy!</p> -->

Como puedes ver a continuación, el primer párrafo aparece, pero el segundo no.

Resumen

Has llegado al final del artículo. Espero que hayas disfrutado del recorrido por los conceptos básicos del HTML. En este punto ya deberías entender el lenguaje, cómo funciona en un nivel básico y deberías poder escribir algunos elementos y atributos. En los artículos posteriores del módulo ampliaremos con más detalle algunas de las cosas que ya hemos visto e introduciremos algunas características nuevas del lenguaje.

Nota: En este punto, a medida que empieces a aprender más sobre HTML, es posible que también desees comenzar a explorar los conceptos básicos de Hojas de estilo en cascada (Cascading style sheets) o CSS. CSS es un lenguaje que se usa para dar estilo a las páginas web (ya sea cambiando la fuente o los colores o modificando el diseño de la página). HTML y CSS van de la mano, como descubrirás pronto.