Otras Páginas

Estructura HTML

Objetivos

  • Agregar las etiquetas estándar HTML de head y body
  • Agregar un título en la página
  • Comprender el uso de etiquetas no visibles como head

Panorama

La etiqueta HTML y Doctype

La línea <!DOCTYPE html> es llamada doctype, y le dice al navegador qué variante de HTML estás usando. <!DOCTYPE html> le dice al navegador que estás usando HTML5, la última versión de HTML.

(Existen doctypes antiguos que son largos y complicados, desde cuando la gente usaba varias versiones de HTML y XHTML, pero son molestos, y generalmente puedes usar esta versión más corta para nuevos sitios web.)

El <html> encierra toda tu página, y declara de manera inequívoca, "¡¡¡Aquí está mi HTML!!!"

Las Páginas, Cómo las Personas, Tienen Cabeza (encabezado) y un Cuerpo

<!DOCTYPE html>
<html>
  <head>Invisible, Cosas Importantes</head>
  <body>Contenido Actual Visible</body>
</html>

El encabezado

La etiqueta head contiene información acerca del documento, incluyendo:

  • qué lenguaje o conjunto de caracteres estás usando
  • cuál debería ser el título de la página
  • qué archivos CSS y JavaScript incluir (y dónde se encuentran)

La información en la sección <head> no es desplegada.

También puede contener etiquetas de metadatos que pueden decirle al motor de búsqueda u otro programa, más acerca del archivo, como quién lo escribió o palabras clave relevantes.

El Cuerpo

La etiqueta body tiene el contenido actual de tu archivo, ¡las cosas que quieres que tu usuario vea, lea o interactúe!

Pasos

Paso 1

Vamos agregar las etiquetas doctype, HTML, head y body a tu archivo. Deberá verse así:

Guarda el archivo y actualiza el navegador. Todo debe verse casi igual.

Paso 2

Agreguemos un título a nuestra página dentro de la sección <head>. Agrega esta línea:

<title>Mi página HTML de ejemplo</title>

Cuando actualices tu navegador, debes de ver el título en la pestaña de Chrome.

(Si no lo muestra, verifica que pusiste la línea entre las etiquetas de apertura y cierre, y que hayas guardado tu archivo.)

Siguiente Paso:

Ir a Css Basico