La página Index tiene una estructura básica. En este artículo conocerás las etiquetas fundamentales para crear un documento Index HTML y así poder estructurar tus sitios web.
¿Por qué debe llamarse Index.html?
Cuando una persona en Internet escribe en el navegador el nombre de una página web, el servidor con el cual se conecta esa persona, siempre busca por defecto la página con nombre Index.html. En el caso de que la página de inicio del proyecto tenga otro nombre, el desarrollador debe indicarle cuál sería la página de inicio.
Si el servidor no encuentra la página Index.html o el nombre de la página que se le haya indicado como inicio del proyecto; el servidor mostrará en pantalla la distribución de carpetas del proyecto. Obviamente, supongo que esto no es lo que se desea cuando le ofrecemos un servicio web al mundo.
Etiquetas de la página web Index.html
<!DOCTYPE html>
La primera etiqueta que debe colocarse en el archivo Index.html es <!DOCTYPE html>. Esta etiqueta le indica al navegador que el documento que está abriendo en el servidor se trata de un archivo de tipo HTML 5.
Esta etiqueta nunca debe faltar en cualquier documento html, pues así el navegador comienza a interpretar todo el documento y lo muestra adecuadamente a las personas que visualizan la página web.
Contenedor <html></html>
La etiqueta <html></html> es el contenedor padre del documento. Dentro de este contenedor, se agregan todas las etiquetas que estructuran todo el contenido del documento HTML, todo el contenido del proyecto.
Esta etiqueta <html></html> tiene el atributo especial “lang” que le indica al navegador sobre qué idioma está el contenido del proyecto web.
<!DOCTYPE html>
<html lang=”es”>
</html>La existencia de este atributo, informa a las personas si desean traducir el contenido de la página cuando esta no se encuentra en su idioma natal o en el idioma seleccionado en su equipo de cómputo o navegador.
Contenedor <head></head>
Dentro de la etiqueta <head></head>, está toda la información importante para que el navegador cargue el proyecto de la forma que el equipo de desarrollo desea que se muestre. La información dentro de esta etiqueta no es visible a las personas que observan la página web.
Por lo general, dentro de esta etiqueta se agregan etiquetas que solicitan servicios de terceros, se obtienen archivos internos y externos. Por ejemplo, en esta etiqueta se hace la petición a cargar el archivo CSS del proyecto o el archivo de javascript de algún servicio tercero como Google Analytics.
Dentro de la etiqueta “head“ se agregan las etiquetas que le indican al navegador de donde tomar otros recursos que garanticen el funcionamiento del sitio.
Etiquetas <meta />
Las etiquetas <meta /> solamente existen dentro de la etiqueta “header” y le informan al navegador cómo debe tratar el proyecto web que está mostrando en pantalla.
Las etiquetas “meta” son de aquellas etiquetas que se abren y se cierran solas. Incluso se pueden escribir sin “/” al final, pues el navegador ya sabe que se trata de una etiqueta “meta”, aunque es buena práctica cerrarlas.
Las etiquetas meta, tienen varios atributos, los fundamentales son:
charset=”UTF-8”. Este atributo, le indica al navegador que necesita interpretar caracteres especiales. En el idioma inglés, no existe por ejemplo las tildes o la letra “ñ”. Al agregar este atributo, el navegador interpreta correctamente este tipo de caracteres. Además, podrás agregar emojis al texto y se interpretarán directamente como emojis.
name=”description”. Este atributo es para SEO. Permite que los motores de búsqueda muestren en los resultados un breve texto descriptivo de la página web.
content=”lorem ipsum…”. Este atributo acompaña al atributo name=”description” y es donde se agrega el breve texto descriptivo que se desea mostrar en los resultados de búsqueda.
name=”robots”. Este atributo le indica a los motores de búsqueda si se desea que indexen o no las páginas web del proyecto.
Content=”index, follow”. Este atributo está ligado a name=”robots” y es donde le indicamos a los motores de búsqueda si se desea o no que la página web se muestre en los resultados de búsqueda, es decir, la indexa; se puede indicar “noindex, nofollow”.
Para no autorizar a los motores de búsqueda. Las meta etiquetas para motores de búsquedas tienen muchos otros atributos.
name=”viewport”. Este atributo es para indicarle al navegador el tamaño de pantalla. Crear esta meta etiqueta es muy importante, pues informa las características de adaptabilidad del sitio web en los diferentes dispositivos.
content=”width=device-width, initial-sacale=1.0”. Este atributo le indica al navegador que escale un poco el tamaño del texto y las imágenes dependiendo de la pantalla del dispositivo desde donde se esté abriendo.
Si lo notaste, las etiquetas meta pueden tener los atributos “name” y “content” en varias. Sin embargo, el valor del atributo depende del contexto y de las necesidades que necesita interpretar el navegador en las etiquetas “meta”
Etiqueta <title>Nombre de página</title>
La etiqueta <title>Nombre de página</title> es importante para que en la pestaña del navegador se vea el título de la página web que ha cargado. Este título solo es visible en esta pestaña y puede ser diferente al título de la página web. También esta etiqueta es muy utilizada para estrategias SEO.
Etiqueta <link rel=”stylexheet” href=”style.css”>
La etiqueta <link rel=”stylexheet” href=”style.css”> es utilizada para indicarle al navegador que el documento que se está referenciando es un archivo de tipo .css (rel=”stylesheet”) y la dirección donde debe encontrar ese recurso dentro del servidor (href=”style.css”).
Contenedor <body></body>
Dentro de la etiqueta <body></body> se agregan las demás etiquetas del proyecto que son visibles a las personas que navegan a través de la página web. Entonces, es el lugar donde se agregan las etiquetas que permiten agregar texto, imágenes y videos.
Las etiquetas “head” y “body” son contenedores hermanos, es decir, tienen la misma jerarquía en la estructuración de la información.
Una manera de comprender esta estructura es con el cuerpo humano. Los seres humanos tenemos un cerebro “head” que piensa,un “body” constituido por una cabeza “header”, un torso, brazos y piernas las cuales las demás personas pueden ver.
Apariencia de una página Index.html con las etiquetas básicas que se explicaron en este artículo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="En este artículo conocerás las etiquetas básicas de la página index.html">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/style.css">
<title>Nombre de la página</title>
</head>
<body>
</body>
</html>