HTML es un lenguaje de marcado que utilizamos para definir cada uno de los elementos
de nuestra web en archivos con extensión .html , mediante el uso de algo llamado etiquetas le hacemos saber al
navegador si lo que estamos escribiendo es un título, un párrafo, una imagen, una tabla, etc.
Por ejemplo, mira como definimos un párrafo en HTML:
<p>Este es mi párrafo</p>
a la hora de declarar elementos, debemos utilizar las llamadas etiquetas, en esto caso p
es la etiqueta utilizada para declarar párrafos.
Como ves, hay dos etiquetas, una de apertura <p> y otra de cierre </p>, la de apertura
siempre lleva un < seguido del nombre de la etiqueta y un >, la de cierre lleva un </
seguido del nombre de la etiqueta y un >.
Siempre que escribamos un documento HTML, debemos tener en cuenta que debe tener una estructura
básica, esta estructura se compone de dos partes, el head y el body.
El head se utiliza par definir metadatos y el body para definir el contenido visible de la página.
Los metadatos son datos que describen otros datos, en este caso, se utilizan para definir información sobre el documento, como el título, la codificación de caracteres, etc.
Una estructura correcta de un documento HTML sería la siguiente:
<html>
<head>
<title>Mi página web</title>
</head>
<body>
<p>Mi primer elemento HTML</p>
</body>
</html>
Como ves, las etiquetas pueden anidarse, es decir, una etiqueta puede contener a otra etiqueta.
En este caso, la etiqueta html contiene a las etiquetas head y body, la etiqueta head
contiene a la etiqueta title y la etiqueta body contiene a la etiqueta p.
Si abrimos un documento HTML en el navegador con este contenido, el resultado sería el siguiente:
miarchivo.html
Mi primer elemento HTML
Vale, veo el párrafo, pero donde está lo que hay dentro de la etiqueta title? Como ves,
la etiqueta title está dentro de la etiqueta head, antes te comenté que el head se utiliza
para definir metadatos, y uno de esos metadatos es el título de la página, pero este no se muestra
en la parte visible de la página,
únicamente las etiquetas que están dentro del body serán visibles en la página.
¿Entonces para qué sirve el título? El título se utiliza para definir el título de la página, este título se mostrará, por ejemplo, en la pestaña del navegador.
miarchivo.html
Mi primer elemento HTML
Otro metadato importante que debemos definir en el head es la codificación de caracteres, esto
es importante para que el navegador pueda interpretar correctamente los caracteres especiales
que utilicemos en nuestra página, como las tildes o la ñ. La codificación de caracteres más común es UTF-8, para definirla
en nuestro documento HTML, debemos añadir la siguiente etiqueta en el head:
<head>
<meta charset="UTF-8" />
<title>Mi página web</title>
</head>
Como acabas de ver con la etiqueta meta, las etiquetas pueden tener atributos, los atributos
son valores que se le pueden añadir a las etiquetas para modificar su comportamiento o su apariencia.
Por ejemplo, la etiqueta meta tiene un atributo llamado charset que se utiliza para definir
la codificación de caracteres del documento.
Los atributos tienen la siguiente sintaxis:
<etiqueta atributo="valor"></etiqueta>
Como en el ejemplo anterior:
<meta charset="UTF-8" />
La indentación es la forma en la que estructuramos nuestro código, es decir, la forma en la que colocamos los espacios y los saltos de línea. Si te fijas en los ejemplos de código que te he mostrado, verás que las etiquetas que están anidadas están indentadas, es decir, están un poco más a la derecha que las etiquetas que las contienen. Esto se hace para que sea más fácil de leer y de entender el código.
Pero esto no es obligatorio, puedes escribir todo el código en una sola línea si quieres.
Esto:
<html>
<head>
<meta charset="UTF-8" />
<title>Mi página web</title>
</head>
<body>
<p>Mi primer elemento HTML</p>
</body>
</html>
Funciona igual que esto:
<html><head><meta charset="UTF-8" /><title>Mi página web</title></head><body><p>Mi primer elemento HTML</p></body></html>
Pero como puedes observar, el segundo es mucho más difícil de leer.
Hemos visto la estructura básica de un documento HTML, en los siguientes capítulos veremos cómo añadir más elementos a nuestra página, como títulos, imágenes, enlaces, etc.