Bienvenido/a a esta cuarta lección del curso de HTML. En ella te mostraré la estructura básica de un documento escrito en este lenguaje de etiquetas, y te detallaré para qué sirve cada elemento de la estructura o qué funcionalidad desempeña.

En líneas generales, el esquema básico de un documento en HTML es este:

<!DOCTYPE html>
<html>
	<head>
		<meta charset = “utf-8">
		<title> Título del documento </title>
	</head>
	<body>
		<b> Texto que se muestra en negrita </b>
	</body>
</html>

Estas líneas de código serán interpretadas por el navegador de arriba abajo y de izquierda a derecha. Teniendo en cuenta eso, cada línea realiza lo siguiente:

<!DOCTYPE html>

Informa al navegador sobre el tipo de documento del que se trata. En este caso, un archivo HTML5.

El uso de las mayúsculas pretende hacer más legible el texto. Se utilizan por convenio, aunque hay programadores que recurren a escribir todo en minúsculas.

<html>

Esta etiqueta y su correspondiente etiqueta de cierre son las principales, y marcan la “raíz” (root) de un documento HTML. Indican dónde comienza y termina.

<head>

Esta etiqueta y la correspondiente de cierre encierran una sección en la que los usuarios que ven el documento HTML pueden ingresar información útil y no visible en la web.

Dentro de esta sección, encontrarás los metadatos. Se trata de “datos sobre datos”, por lo que contienen información relacionada con el documento HTML. En su mayoría se definen con la etiqueta <meta> que verás a continuación.

<meta>

Define los metadatos relacionados con un documento HTML. La etiqueta <meta> solo puede insertarse entre las etiquetas <head> y </head>. Se utiliza para:

  • Definir el conjunto de caracteres que se usarán en el documento.
  • Describir tu sitio web.
  • Identificar las palabras clave de las que se valdrán los navegadores para posicionar tu web.
  • Identificar al autor del documento.
  • Establecer la ventana gráfica.

Así, la línea <meta charset = «utf-8″> define el juego de caracteres necesarios para visualizarse en el documento. Ese juego se especificará como valor del atributo “charset” y, en este caso, será el “utf-8», que es el conjunto de caracteres más usados en occidente. Dentro del conjunto, cada carácter puede tener entre 1 y 4 bytes de longitud, representando cualquier carácter en el estándar Unicode (la codificación ideal para correos electrónicos y páginas web).

Si no das el valor “utf-8″ al atributo “charset” de la etiqueta <meta>, es posible que tu navegador no sea capaz de visualizar correctamente algunos de los caracteres que insertes en tu sitio web. Cabe mencionar, también, que la etiqueta <meta> no requiere de una etiqueta de cierre.

<title>

Entre esta etiqueta y su correspondiente etiqueta de cierre, indicarás el título de tu sitio web, que aparecerá dentro de la pestaña del navegador cada vez que cargue el archivo HTML.

El título del sitio web es muy importante, porque:

  • Informa a los usuarios del navegador en qué pestaña se encuentra tu sitio web.
  • Ayuda a los buscadores a posicionar mejor tu web. Por eso es el título que aparece en las SERPs de los buscadores (páginas de resultados del motor de búsqueda).

El título que des a tu sitio web deberá estar relacionado con su contenido, así facilitarás su buen posicionamiento.

<body>

Esta etiqueta y su etiqueta de cierre contienen todo lo que el usuario puede ver en tu sitio web a través del navegador (menús de navegación, enlaces, listas, tablas, párrafos, contenidos multimedia, formularios, pie de página, etc). Este bloque marcará la parte final de la estructura de tu archivo HTML, y agrupará los elementos visibles del sitio web. En la estructura del ejemplo, el elemento visible es un texto formateado en negrita.

Bien, lo dejamos en este punto. En la próxima lección podrás ver nuevas etiquetas en HTML, y desarrollaremos archivos cada vez más complejo y funcionales.

Hasta dentro de muy poco.

Deja un comentario