¿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é es HTML?

¿Qué son los elementos HTML?

 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>

Apple</li>
<li>

Orange</li>
<li>

Banana</li>
<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.‌‌
 Elementos de nivel Bloque vs En Línea

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 p
&lt; &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,

Hacer un hueco en el centro y verter la leche, el huevo y l
mezclar hasta que quede suave.
</p>

<h4> Paso 2</h4>

<p>

Caliente una plancha o sartén ligeramente engrasada a fuego

Verter o coloque la masa en la plancha, usando aproximadame
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=MXwxMjA3fDB8MHxzZWFyY2h8MXx8

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,

Hacer un hueco en el centro y verter la leche, el huevo y l
mezclar hasta que quede suave.
</p>
 <h4> Paso 2</h4>
<p>

Caliente una plancha o sartén ligeramente engrasada a fuego

Verter o coloque la masa en la plancha, usando aproximadame
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>