¿Cuál es la estructura básica de una página en HTML?
Quizás no lo sepas, pero antes de que existieran CMS como WordPress que facilitan la creación de páginas web sin necesidad de tocar nada de código, era necesario saber HTML, y, aunque hoy no sea indispensable, si de verdad quieres entender el mundo del diseño web es vital que tengas algunas nociones básicas sobre el lenguaje.
Lo primero que debes saber es que existe una estructura básica de HTML que debe estar presente en toda página web y que está formada por varias etiquetas anidadas. De ese tema hablamos en este post, con la intención de que comiences a dominar el lenguaje de marcado.
¿Qué es HTML?
HTML es el acrónimo de HyperText Markup Language, en español, Lenguaje de Marcado de Hipertexto. Pero, ¿qué es?
Como lo indica su nombre, se trata de un lenguaje de marcado formado por un conjunto de etiquetas que se combinan para crear una página web.
Para escribir en HTML solo hace falta un bloc de notas y un navegador web. En el bloc de notas se escriben las etiquetas y en el navegador se muestra el resultado, es decir, la propia página web. Esto es posible, porque los navegadores son capaces de entender y procesar las distintas etiquetas que forman el lenguaje.
¿Es HTML un lenguaje de programación?
Queremos dejar claro que es incorrecto decir que HTML es un lenguaje de programación, porque en realidad es un lenguaje de etiquetas que un navegador web procesa.
Si tomamos en cuenta las características principales de los lenguajes de programación, nos damos cuenta que HTML no las posee, por ejemplo, en el lenguaje de marcado no se habla de ciclos, variables ni funciones, que son tan importantes en C++, Python o JavaScript, por ejemplo.
Además, hay algo muy importante, en HTML no se aplica la lógica como sí se hace en los lenguajes de programación, donde esta es fundamental para poder resolver problemas.
Principales características de HTML
- Las etiquetas se escriben dentro de los símbolos < y >.
- Las etiquetas permiten separar el texto normal del código HTML.
- La mayoría de las etiquetas deben cerrarse, para ello, se debe agregar el símbolo / después de <. Ejemplo: </body>.
- Las etiquetas pueden escribirse en mayúscula o minúscula, como lo prefiera el desarrollador.
- Los archivos HTML, deben guardarse con la extensión .html o .htm y son abiertos por los navegadores web.
- Para crear y editar documentos HTML no hace falta un software específico, sino que puede hacerse desde cualquier bloc de notas.
- Las normas del lenguaje son definidas por el World Wide Web Consortium.
Estructura básica de HTML
La estructura básica de un documento HTML es la siguiente:
<html>
<head>
</head>
<body>
Cuerpo de la página
</body>
</html>
Todo documento HTML tiene como mínimo esa estructura, y a ella se suman otras etiquetas que permiten crear el contenido de la página. Veamos a continuación qué significa cada una de las partes de esta estructura.
A medida que hablemos de cada etiqueta, haremos un ejercicio práctico bastante sencillo, así que abre tu bloc de notas.
<html>
Cuando se comienza a crear una página web, la primera etiqueta que debe aparecer en el archivo es <html> que indica que todo lo que sigue son instrucciones en ese lenguaje de marcado.
La ultima etiqueta de una página web es </html> con la cual se cierra el código. Por lo tanto, todo lo que vaya a formar parte de nuestra página web, debe estar escrito dentro de estas etiquetas.
Entonces, para efecto de nuestro ejemplo, debes escribir <html> en la primera línea del documento y </html> en la siguiente.
<html>
</html>
<Head> (Cabecera)
El Head es la primera parte de un documento HTML, es decir, la cabecera de la página. Dentro de ella suele incluirse el título que queremos aparezca en la barra de direcciones del navegador web cuando tengamos la página abierta, así como los metadatos, estilos y otra información.
Por lo tanto, para seguir con el ejercicio, debajo de <html> agrega ahora <head> y </head>. Te debe ir quedando así:
<html>
<head>
</head>
</html>
Por lo general, dentro del Head se escribe la etiqueta <title> con la frase que queremos aparezca en la barra de título del navegador web. Esta etiqueta debe cerrarse inmediatamente después de escribir el nombre, para ello se escribe </title>
Supongamos que en nuestro ejemplo estamos creando la página de inicio de una web llamada estoesunejemplo.com, y queremos que en la barra de título se lea ”Inicio – Esto es un ejemplo”, para esto bastará con escribir ese texto dentro de <title>, así:
<title>Inicio – Esto es un ejemplo</title>
Verás que, con el uso de estas etiquetas, nuestro ejemplo va tomando forma:
<html>
<head>
<title> Inicio – Esto es un ejemplo</title>
</head>
</html>
<body> (Cuerpo)
La segunda parte de todo documento HTML es el cuerpo, conformado por todo lo que queremos que aparezca en la página, es decir, aquello que mostrará el navegador: texto, imágenes, videos, tablas, o cualquier otro elemento compatible. Esta etiqueta debe cerrarse con </body>
Ejemplo:
<html>
<head>
<title>Inicio – Esto es un ejemplo </title>
</head>
<body>
</body>
</html>
Aplicando el ejemplo
Suponemos que ya tienes escritas en tu bloc de notas todas las líneas anteriores. ¿qué te parece si vemos cómo va quedando?
Para ello guarda el archivo y colócale el nombre miprimeraweb.html (es importante que agregues la extensión). Ubica el archivo guardado en tu ordenador y podrás darte cuenta que tiene el icono del navegador web que tienes predeterminado, haz doble clic sobre él para que se abra.
En este punto, tu ventana del navegador mostrará una página en blanco y en la barra de título dirá: Inicio – Este es un ejemplo.
¿Por qué no se muestra nada en la página? Sencillo, porque no hemos escrito nada dentro del <body> </body> ¿Lo hacemos?
Para ello, abre el archivo nuevamente, pero esta vez con el bloc de notas. Dirígete a la etiqueta <body> y dentro de ella escribe: “Esto haciendo mi primera página web”.
Debe quedarte de esta forma:
<html>
<head>
<title>Inicio – Esto es un ejemplo </title>
</head>
<body>
Estoy haciendo mi primera página web
</body>
</html>
Guarda el archivo y actualiza el navegador para recargar la página (o abre nuevamente la página si la habías cerrado). Ahora, verás en pantalla el texto que acabas de escribir. ¿Magia? No, HTML.
Esta es una página muy básica porque la intención es que conozcas cuál es la estructura básica HTML, pero, debes saber que el mismo lenguaje tiene etiquetas para darle vida a la web, por ejemplo, para cambiar el fondo, subir imágenes, poner el texto en negrita o en cursiva, hacer tablas, mostrar un formulario y mucho más.
Cuanto más conocimiento tengas en el manejo de las etiquetas, mejores resultados tendrás y, si combinas HTML con CSS podrás crear páginas muy profesionales y creativas.
