Estructura Básica de un Documento HTML

Seguro ya sabes que un sitio web es, en su forma más básica, un archivo HTML. Ahora, acompáñame a descubrir el funcionamiento de este lenguaje, y cómo puedes usarlo para empezar a crear sitios web 🙂.

Fundamentos de HTML

El lenguaje de marcas de hipertexto (HTML) tiene reglas como cualquier otro lenguaje. Y no son tan complicadas cuando te tomas el tiempo para explorarlas poco a poco 😉

1️⃣ En HTML la información se organiza con etiquetas

Estas consisten en una palabra o una letra encerradas entre los símbolos “<” y “>”.

Ej:

<title>

2️⃣ Cada pieza contenida en tu sitio web la encierran etiquetas de apertura y de cierre

Las etiquetas de cierre tienen un “/” antes de la palabra o letra que compone la etiqueta.

Ej:

<title>Este es el texto que aparece en la pestaña del navegador</title>

3️⃣ Las etiquetas se escriben sin espacios internos ni mayúsculas

Un error de este estilo (de sintaxis) puede causar que el navegador no entienda la etiqueta.

4️⃣ Existen algunas etiquetas que se cierran a sí mismas

Estas generalmente no tienen contenido, así que empiezan y terminan con la etiqueta de apertura. Sin embargo, son muy útiles para introducir metadatos, organizar elementos de la página, o importar elementos de otras fuentes.

Solo hay 14 de estas etiquetas. Pero las más comunes son:

Etiqueta	Uso
<br>	Introduce un salto de línea en la página.
<img>	Introduce imágenes a tu sitio web.
<input>	Introduce elementos para que el usuario te de información (cómo botones, campos de texto, listas desplegables, entre otros).
<link>	Se usa mucho para cargar hojas externas de estilos (archivos “.css”) para definir los estilos de tu sitio web.
<meta>	Se usa para darle metadata a tu sitio web (para que el navegador y buscadores cómo google puedan trabajar mejor con él).

Ojo, hay una variante de HTML llamada XHTML que requiere que estas etiquetas terminen en “/>”. Por ese motivo, muchos developers acostumbran a terminar estas etiquetas de esa manera, incluso en el HTML común y corriente.

Esto no es obligatorio en el HTML que tú estás aprendiendo ahora, pero es bueno que lo tengas en mente para cuando trabajes con otros developers 👍

Ej:

<meta charset=""utf-8"" />

<img src=""./assets/img/Logo.svg"" alt=""Logo de Batata Bit"" />

5️⃣Hay etiquetas cuyo trabajo es contener otras etiquetas

Cuando esto ocurre, se acostumbra usar la “indentación” de código para distinguir la jerarquía de las etiquetas.

En palabras más simples: Solo tienes que pulsar la tecla “tab” en las etiquetas hijo para que estas se muevan un poquito hacia la derecha. Eso te ayudará a distinguir a los padres de los hijos con mayor facilidad.

Ej:

<picture class=""logo"">
    <img src=""./assets/img/Logo.svg"" alt=""Logo de Batata Bit"" />
</picture>

6️⃣ Muchas etiquetas HTML utilizan atributos

Estos son información adicional que se agrega en la etiqueta de apertura para personalizar sus propiedades y funcionalidad.

Estos siguen el siguiente patrón:

NombreDelAtributo=”ValorDelAtributo”

Aprenderás más sobre los atributos poco a poco. Por ahora lo importante es que sepas que existen 👍

Por cierto, en HTML, la combinación de etiquetas, atributos y contenido recibe el nombre de elemento.

7️⃣ Puedes encontrar una lista completa de las etiquetas HTML que puedes usar

Con explicaciones y ejemplos de uso, en este sitio web.

También puedes encontrarlas en referencias oficiales como las de W3Schools o Mozilla Developers.

Las más comunes para escribir son:

Etiqueta	Uso
<p>	“Paragraph”, te permite introducir párrafos.
<a>	“Anchor”, te permite introducir hipervínculos.
<b>	“Bold”, te permite escribir en negritas.
<i>	“Italics”, te permite escribir en cursiva.
<u>	“Underline”, te permite escribir texto subrayado.
<ul>	“Unordered list”, te permite crear una lista desordenada (con puntitos)
<ol>	“Ordered list”, te permite introducir una lista ordenada (con números o letras).
<li>	“List item”, se colocan dentro de un <ul> o un <ol>, y se convierten en los elementos de la lista.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>	“Heading”, insertan títulos y subtítulos en tu sitio web. El número que acompaña a la “h” representa el nivel del título, dónde h1 tiene la mayor jerarquía.

8️⃣ Recuerda, los archivos HTML cargan de arriba hacia abajo, un elemento tras otro

Esto significa que el orden en el que escribas el HTML sí importa. Esos son todos por ahora 😁 Recuerda experimentar un poco con las etiquetas que conociste el día de hoy 😉

Para profundizar un poco más, no te pierdas de la siguiente clase: Estructura de árbol en HTML.

Contribución creada por: Jhonkar Sufia (Platzi Contributor).