3.1. Estructura

Estructura HTML

Etiqueta

Representa la raíz de un documento HTML y sirve como contenedor para los demás elementos HTML.

Dentro del elemento “html”, es decir, entre <html> y </html>, se debe escribir el elemento “head” que, como iremos viendo a lo largo del tutorial, puede contener diversa información sobre la configuración del documento. En su interior se incluye la colección de metadatos sobre el documento, los enlaces a scripts y hojas de estilo.

<html>
    <head>
         ...
    </head>
</html>

Etiqueta <title>

Entre <head> y </head> se pueden escribir otros elementos. Por ejemplo, el elemento “title”, el cual sirve para indicar el título del documento. Se muestra en la barra superior del navegador o en las pestañas de página.

<html>
   <head>
      <title>Ejemplo de 2 párrafos</title>
   </head>
</html>

Etiqueta <link>

Enlaza documentos externos, por ejemplo CSS.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>
   <h1>Esto es un encabezado</h1>
   <p>Esto es un párrafo.</p>
</body>
</html>

Etiqueta <meta>

Define los metadatos que no pueden ser definidos usando otro elemento HTML: set de caracteres, descripción de la página, autor, palabras clave, ...

Estos datos no se muestran por pantalla pero son usados por el navegador, por motores de búsqueda y por otros servicios web.

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

Etiqueta <style>

Usada para escribir código CSS interno sin necesitar un documento aparte. Es usado si el estilo es propio de esa página (no del site) y contiene pocas líneas o modificaciones.

 <style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

Etiqueta <script>

Define un script interno o un enlace hacia un script externo de JavaScript.

 <script>
   function myFunction() {
     document.getElementById("demo").innerHTML = "Hello JavaScript!";
   }
</script>

Etiqueta <body>

En un documento HTML, después del “head”, hay que escribir el elemento “body” y alberga todo el contenido (párrafos, imágenes, vídeos...) del documento, los cuales se mostrarán en el navegador. Sólo puede existir un elemento <body> en el documento.

<html>
   <head>
      <title>Ejemplo de 2 párrafos</title>
   </head>
   <body>
      ...
   </body>
</html>

Ocultar

Finalmente, la estructura básica de un documento HTML es la siguiente:

<!DOCTYPE html>
<html lang="es-ES">
<head>
    <meta charset="utf-8">
    <title>Ejemplo de 2 párrafos</title>
</head>
<body>
    <p>Esto es un párrafo.</p>
    <p>Esto es otro párrafo.</p>
</body>
</html>

<!DOCTYPE html> en la primera línea. Esta es la forma de indicar al navegador donde se visualice el documento que este está escrito en la versión HTML5.
lang="es-ES" en la etiqueta de inicio <html>. Esto sirve para especificar, mediante el atributo lang, el idioma del contenido del elemento “html”. En este caso español (España). Otros posibles valores del atributo lang son: "es-AR" para español (Argentina), "es-CO" para español (Colombia), "es-MX" para español (México), etc.
<meta charset="utf-8"> dentro del elemento “head”. Así, se indica la codificación de caracteres del documento, en esta ocasión UTF-8 (8-bit Unicode Transformation Format, Formato de Transformación Unicode de 8 bits). Obsérvese que, el elemento “meta” está vacío (no tiene contenido) y, en consecuencia, no necesita ser cerrado escribiendo </meta>.

De esta forma, hemos escrito la estructura básica de un documento HTML que muestra por pantalla dos párrafos.

Ejercicio