Aprende las bases de HTML para principiantes en solo 15 minutos

Si quieres crear un sitio web, el primer lenguaje que necesitas aprender es HTML.

Artículo original escrito por Thu Nghiem
Artículo original Learn HTML Basics for Beginners in Just 15 Minutes
Traducido y adaptado por Ezequiel Castellanos

En este artículo vamos a repasar los conceptos básicos de HTML. Al final vamos a crear un sitio web básico utilizando únicamente HTML.

Aquí hay un video que puedes ver si quieres complementar este artículo:‌‌

¿Qué es HTML?

HTML, cuyas siglas significan Lenguaje de Marcado de Hipertexto (Hypertext Markup Languaje), es un lenguaje bastante simple. Consiste en distintos elementos que utilizamos para estructurar una página web.

¿Qué son los elementos HTML?

El elemento normalmente comienza con una etiqueta de apertura, la cual consiste en el nombre del elemento. Se rodean (Es contenida) por corchetes angulares de apertura y cierre. La etiqueta de apertura indica dónde comienza el elemento.

De igual manera que la etiqueta de apertura, la etiqueta de cierre también está contenida por corchetes angulares de apertura y cierre. Pero también incluye una barra antes del nombre del elemento.

Todo lo que está dentro de las etiquetas de apertura y cierre es el contenido.

Pero no todos los elementos siguen este patrón. Les decimos elementos vacíos a aquellos que no siguen este patrón. Estos únicamente consisten en una etiqueta simple o una etiqueta de apertura que no puede tener ningún contenido. Estos elementos se utilizan normalmente para insertar algo en el documento.

Por ejemplo, el elemento <img> es utilizado para insertar un archivo de imagen, o el elemento <input> es utilizado para insertar un campo de datos en la página.

<img src="https://images.unsplash.com/photo-1610447847416-40bac442fbe6" width="50">

En el ejemplo de arriba, el elemento <img> sólo consiste en una etiqueta que no tiene ningún contenido. Este elemento es usado para insertar en el documento un archivo de imagen desde Unsplash.

Como anidar elementos HTML

<div class="my-list">
  <h4>My list:</h4>

  <ul>
     <li>Apple</li>
     <li>Orange</li>
     <li>Banana</li>
  </ul>
</div>

Los elementos pueden ser colocados dentro de otros elementos. Esto se llama Anidamiento. En el ejemplo de arriba, dentro del elemento <div> tenemos un elemento <h4> y un elemento <ul> o elemento de lista no ordenado. De manera similar dentro del elemento <ul> hay 3 elementos <li> o elemento de lista.

El anidamiento básico es bastante sencillo de entender. Pero cuando la página crece, el anidamiento puede complicarse.

Por lo tanto, antes de trabajar con HTML, piensa sobre la estructura de diseño que te gustaría tener. Puedes dibujarla en un papel o en tu mente. Será de mucha ayuda.

¿Qué son los atributos HTML?

Los elementos también tienen atributos que contienen información adicional acerca del elemento que no aparecerá en el contenido.

<img src="https://images.unsplash.com/photo" width="50">

En el ejemplo de arriba, el elemento <img> tiene 2 atributos: src u origen para especificar la ruta de la imagen, y width para especificar el ancho de la imagen en pixeles.

Con este ejemplo, puedes ver las siguientes características o atributos:

• Hay un espacio entre atributo y el nombre del elemento
• Los atributos se agregan en la etiqueta de apertura
• Los elementos pueden tener varios atributos
• Los atributos tienen un nombre y un valor: nombre=“valor”

Pero no todos los atributos tienen el mismo patrón. Algunos pueden existir sin valores y les decimos Atributos Booleanos.

<button onclick=“alert('Submit')" disabled>Button</button>

En este ejemplo, si queremos desactivar el botón, lo único que tenemos que hacer es pasar un atributo disabled sin ningún valor. Esto significa que la presencia del atributo representa el valor verdadero, de lo contrario, la ausencia representa el valor falso.

Elementos comunes de HTML

Existen en total más de 100 elementos. Pero 90% del tiempo sólo vas a utilizar alrededor de 20 de los más comunes. Los he colocado en 5 grupos:

Elementos de sección

  <div>, <span>, <header>, <footer>, <nav>, <main>, <section> 

Estos elementos se utilizan para organizar el contenido en diferentes secciones. Por lo general son muy obvios, por ejemplo<header> representa a un grupo de la sección de introducción y navegación, <nav> representa la sección que contiene los enlaces de navegación, etcétera.

Contenido de texto

  <h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>

Estos elementos se utilizan para organizar contenido o bloques de texto. Son importantes para la accesibilidad y posicionamiento en buscadores (SEO). Estos le comunican al navegador el propósito o estructura del contenido.

Formularios

  <form>, <input>, <button>, <label>, <textarea>

Estos elementos pueden utilizarse juntos para crear formularios que los usuarios pueden completar y enviar. Los formularios pueden ser la parte más complicada de HTML.

Imágenes y enlaces

  <img>, <a>

Estos elementos se utilizan para insertar una imagen o crear un hipervínculo.

Otros

  <br>, <hr>

Estos elementos se utilizan para agregar un quiebre a la página web.

Puedes encontrar todos los elementos en developer.mozilla.org. Pero para principiantes, sólo necesitas conocer los más comunes.

Elementos HTML de nivel bloque vs en línea

De manera predeterminada un elemento puede ser un elemento de nivel bloqué o en línea.

Elementos de nivel bloqué son los elementos que siempre comienzan en una nueva línea y ocupan todo el ancho disponible.

Elementos en línea son los elementos que no comienzan en una nueva línea y sólo ocupan tanto ancho como sea necesario.‌‌

Dos elementos que representan elementos de nivel bloqué y elementos en línea, respectivamente, son <div> y <span>. En este ejemplo puedes ver que el elemento <div> ocupa 3 líneas, mientras que el elemento <span> solo ocupa 1 línea.

Pero la pregunta es: ¿Cómo sabemos cuáles son elementos a nivel de bloqué y cuáles son elementos en línea? Bueno, desafortunadamente necesitas recordarlos. La forma más sencilla es recordar cuáles son elementos en línea y el si resto son elementos de bloqué.

Si recordamos los elementos HTML más comunes, los elementos en línea incluyen: <span>, <input>, <button>, <label>, <textarea>, <img>, <a>, <br>.

¿Cómo comentar en HTML?

<p>This is a paragraph.</p>

<!-- <p>I am not showing.</p> -->

El propósito de los comentarios es incluir notas en el código para explicar la lógica o simplemente para organizar tu código.

Los comentarios HTML están contenidos por marcadores especiales: <!-- y --> y son ignorados en el navegador.

Como utilizar entidades HTML

¿Qué pasa si quieres mostrar el texto: la etiqueta <p> define un párrafo., pero el navegador interpreta <p> como una etiqueta de apertura para un nuevo elemento? En este caso, podemos usar entidades de caracteres HTML como en el siguiente ejemplo:

<p>the <p> tag defines a paragraph.</p>

<p>the &lt;p&gt; define a paragraph.</p>

Cómo utilizar emoji en HTML

En la web moderna, podemos mostrar emoji en HTML de manera bastante fácil, así: ?

<p>? Cara Sonriente.</p>

<p>? Cumpleaños</p>

Errores comunes de principiantes en HTML

1. Nombres de Etiquetas/Elementos

Los nombres de las etiquetas/elementos no no distinguen entre mayúsculas y minúsculas. Esto significa que se pueden escribir en minúscula o mayúscula, pero se recomienda que escribas todo en minúscula: <button> no <ButTon>.

2. Etiqueta de cierre

No incluir la etiqueta de cierre es un error común de principiante. Por lo tanto, cuando estés creando una etiqueta de apertura, inmediatamente agrega la etiqueta de cierre.

3. Anidado

Esto está mal:

<div>Div 1 <span> Span 2 </div></span>

Las etiquetas  tienen que abrirse y cerrarse de tal forma que queden dentro o fuera de las otras.

4. Comillas simples o Comillas dobles

Esto está mal:

<img src="https://images.unsplash.com/'>

No se pueden mezclar comillas simples con comillas dobles. Siempre deberías usar comillas dobles y usar entidades HTML si fuera necesario.

¿Cómo crear un sitio web simple con HTML?

Los elementos HTML individuales no son suficientes como para crear un sitio web. Entonces veamos qué más necesitamos para crear un sitio web simple desde cero.

¿Cómo crear un documento HTML?

Primero, abramos Visual Studio Code (o tu editor de código favorito). En la carpeta que elijas, crea un nuevo archivo y dale el nombre de index.html.

En el archivo index.html, escribe! (signo de exclamación) y presiona enter. Vas a ver algo como esto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Esto es el código mínimo que un documento HTML debe tener para armar un sitio web. Aquí tenemos:

1. <!DOCTYPE html>: Primero tenemos Doctype. Por alguna extraña razón histórica tenemos que incluir el doctype para que todo funcione correctamente.
2. <html lang="en"></html>: El elemento<html> envuelve todo el contenido de la página, también conocido como el elemento raíz. Siempre debemos incluir el atributo lang para declarar el idioma de la página.
3. <head></head>: El elemento <head> es un contenedor para todo lo que quieras incluir pero no contenido que muestres a tus usuarios.
4. <meta charset="UTF-8" />: El primer elemento meta es utilizado para establecer el set de caracteres para que sea UTF-8, el cual incluye la mayoría de los caracteres del lenguaje escrito.
5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />: El segundo elemento meta especifica el viewport del navegador. Esta configuración es para un sitio web optimizado para dispositivos móviles.
6. <title>Document</title>: Este es el elemento <title>. Establece el título de la página.
7. <body></body>: El elemento <body> contiene todo el contenido en la página.

¿Cómo crear una página de recetas de panqueques?

Bien, ahora que tenemos el código inicial creemos la página de recetas de panqueques. Vamos a usar el contenido de la página AllRecipes.

Primero, vamos a darle al elemento <title> contenido de la receta de panqueques. Vas a ver cambiar el texto en la pestaña de la página web. En el elemento <body>, creamos 3 elementos: <header>, <main> y <footer> que representan las 3 secciones.

1. Crear la sección de encabezado

En el encabezado, queremos tener el logo y la navegación. Por lo tanto, vamos a crear un div con el contenido ALL RECIPE para el logo.

Para la navegación, usemos el elemento <nav>. Dentro del elelmento <nav>, podemos usar <ul> para crear una lista desordenada. Queremos tener 3 elementos <li> para 3 enlaces: Ingredientes, Pasos, y Suscribirse. El código del encabezado se ve así:

...
    <header>
      <div>ALL RECIPE</div>
      <nav>
        <ul>
          <li><a href="#ingredients">Ingredientes</a></li>
          <li><a href="#steps">Pasos</a></li>
          <li><a href="#subsribe">Suscribirse</a></li>
        </ul>
      </nav>
    </header>
...

2. Crear la sección principal

En la sección main, primero, queremos tener un título y una imagen. Podemos usar h1 para el título y <img> para la imagen (podemos usar una imagen desde Unsplash gratis):

...
    <main>
      <h1>Panqueques Clásicos</h1>
      <img
        src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502"
        alt="pancake"
        width="250"
      />
    </main>
...

Después, queremos listar todos los ingredientes. Podemos usar <ol> para crear una lista ordenada y <input type="checkbox" /> para crear una casilla de verificación.

Pero antes de esto, podemos usar <h2> para comenzar un nuevo bloque de contenido. También vamos a agregar el atributo id para el <h2> para que el enlace en la navegación sepa donde ir:

...
    <main>
    ...
      <h2 id="ingredients">Ingredientes</h2>
      <ol>
        <li><input type="checkbox" /> 1 ½ tazas de harina para todo uso</li>
        <li><input type="checkbox" /> 3 ½ cucharaditas de levadura en polvo</li>
        <li><input type="checkbox" /> 1 cucharadita de sal</li>
        <li><input type="checkbox" /> 1 cucharada de azucar blanca</li>
        <li><input type="checkbox" /> 1 ¼ tazas de leche</li>
        <li><input type="checkbox" /> 1 huevo</li>
      </ol>
    </main>
...

Después de los ingredientes, vamos a listar todos los pasos. Podemos usar <h4> para el encabezado de los pasos y <p> para el contenido de los pasos:

...
    <main>
    ...
      <h2 id="steps">Pasos</h2>
      
      <h4>Paso 1</h4>
      <p>
        En un tazón grande, tamice la harina, el polvo de hornear, la sal y el azúcar.
        Hacer un hueco en el centro y verter la leche, el huevo y la mantequilla derretida;
        mezclar hasta que quede suave.
      </p>
      
      <h4>Paso 2</h4>
      <p>
        Caliente una plancha o sartén ligeramente engrasada a fuego medio-alto.
        Verter o coloque la masa en la plancha, usando aproximadamente 1/4 taza para cada panqueque.
          Dorar por ambos lados y servir caliente.
      </p>
    </main>
...

Bien, ahora que hemos terminado con la sección principal, sigamos con la sección pie de página.

3. Crear la sección pie de página

En el pie de página queremos tener el formulario de suscripción y el texto de derechos de autor.

Para el formulario de suscripción, podemos usar el elemento <form>. Dentro podemos tener un <input type="text"> para la entrada de texto y un botón <button> para el botón de enviar.

Para el texto de derechos de autor, simplemente podemos usar un <div>. Tome nota aquí, podemos usar la entidad HTML $copy; para el símbolo de copyright.

Podemos incluir un <br> para agregar espacio entre el formulario de suscripción y el texto copyright:

...
    <footer>
      <h6 id="subscribe">Suscribirse</h6>
      <form onsubmit="alert('Suscrito')">
        <input type="text" placeholder="Ingrese Email" />
        <button>Enviar</button>
      </form>
      <br />
      <div>&copy; dakota kelly en Allrecipe.com</div>
    </footer>
...

Bien, ahora hemos terminado! Aquí está el código completo para referencia:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Receta para Panqueques</title>
  </head>
  <body>
    <header>
      <div>ALL RECIPE</div>
      <nav>
        <ul>
          <li><a href="#ingredients">Ingredientes</a></li>
          <li><a href="#steps">Pasos</a></li>
          <li><a href="#subsribe">Suscribirse</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Panqueques Clásicos</h1>
      <img
        src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8cGFuY2FrZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60"
        alt="pancake"
        width="250"
      />
      <h2 id="ingredients">Ingredientes</h2>
      <ol>
        <li><input type="checkbox" /> 1 ½ tazas de harina para todo uso</li>
        <li><input type="checkbox" /> 3 ½ cucharaditas de levadura en polvo</li>
        <li><input type="checkbox" /> 1 cucharadita de sal</li>
        <li><input type="checkbox" /> 1 cucharada de azucar blanca</li>
        <li><input type="checkbox" /> 1 ¼ tazas de leche</li>
        <li><input type="checkbox" /> 1 huevo</li>
      </ol>    
      <h2 id="steps">Pasos</h2>
      
      <h4>Paso 1</h4>
      <p>
        En un tazón grande, tamice la harina, el polvo de hornear, la sal y el azúcar.
        Hacer un hueco en el centro y verter la leche, el huevo y la mantequilla derretida;
        mezclar hasta que quede suave.
      </p>
      
      <h4>Paso 2</h4>
      <p>
        Caliente una plancha o sartén ligeramente engrasada a fuego medio-alto.
        Verter o coloque la masa en la plancha, usando aproximadamente 1/4 taza para cada panqueque.
          Dorar por ambos lados y servir caliente.
      </p>
    </main>
    <hr />
    <footer>
      <h6 id="subscribe">Suscribirse</h6>
      <form onsubmit="alert('Suscrito')">
        <input type="text" placeholder="Ingrese Email" />
        <button>Enviar</button>
      </form>
      <br />
      <div>&copy; dakota kelly en Allrecipe.com</div>
    </footer>
  </body>
</html>

Conclusión

Puedes crear un sitio web simple con solo HTML. Pero para poder construir sitios web hermosos y funcionales, necesitas estudiar CSS y JavaScript.

Me puedes seguir en redes sociales o Youtube para actualizaciones futuras sobre estos temas. Pero mientras tanto, puedes chequear el Plan de Estudios de freeCodeCamp para practicar HTML resolviendo pequeñas tareas.

Si no, puedes seguir codeando y nos vemos en futuros posts ?.

__________ ? Acerca de mí __________

• Soy el fundador de DevChallenges
• Suscríbete a mi Canal
• Sigue mi Twitter
• Únete al Discord