Estructura básica de una página

Primero me gustaría hacer una pequeña aclaración sobre terminología que voy a usar, diferenciaremos:

Dicho esto, toda página web que hagamos en HTML5 debe tener una estructura inicial similar a la siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Título de la página</title>
</head>
<body></body>
</html>

A continuación explicamos la función que cumple cada etiqueta:

  • <!DOCTYPE html>: indicar al navegador que el código HTML en el que está escrita la página es en la versión 5, osea que es HTML5. +info
  • <html lang="es">... </html>: indica la raíz del documento y todas las etiquetas deben estar incluidas dentro. Además se especifica el idioma en el que está escrita, es = Español (+idiomas).
  • <head> ... </head>: se usa para envolver otras etiquetas que ofrecen información principalmente a: el navegador, a los buscadores y a otras páginas (como pueden ser redes sociales, etc). La información especificada dentro del head no se muestra dentro1 de la página web que ve el usuario.
  • <meta charset="UTF-8">: indica al navegador qué tipo de caracteres contiene la página. Con el atributo charset indicamos cuál de todos los juegos de caractares disponibles usamos. Con el valor UTF-8 podremos crear contenido en la mayoría de los sistemas de escritura: español, inglés, francés, etc.
  • <title> ... </title>: indica el título de nuetra página. Este se muestra en: la pestaña del navegador, el enlace que indexan los buscadores, etc.
  • <body> ... </body>: contiene todo el contenido visible por el usuario dentro de nuestra página.

Observa que la etiqueta html contiene dos hijas: head y body, esto ya no es obligatorio en HTML5 ya que se puede omitir las etiquetas html, body y head, pero por convención es recomendable usarlas.

Aquí puedes ver el ejemplo interactivo: Lección 1 - Snippet 1


Aclaraciones:

1. Cuando digo dentro me refiero al contenido de la página, lo que no incluye la pestaña del navegador ni la barra de direcciones.

results matching ""

    No results matching ""