Anatomía de una Web

December 28, 2022 • 5 minutos de lectura • ¿Errores o sugerencias? Edita el artículo

La anatomía básica de una página web es la estructura esencial que la conforma: head y body (cabeza y cuerpo). Las etiquetas son las encargas de definir la estructura.

Head `<head></head>`

Contiene metadatos útiles para navegadores y buscadores, también realiza importaciones de hojas de estilo, tipografías u otros recursos.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="description"
      content="Tienda online de tortas, ponquesitos y gelatinas para endulzar los momentos con tu familia."
    />
    <meta
      name="keywords"
      content="tienda, tortas, ponquesitos, gelatinas, dulces"
    />
    <meta name="robots" content="index, follow" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cakes Shop</title>
    <link rel="icon" href="./images/favicon.png" />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body></body>
</html>

Indica al navegador que es código HTML5

<!DOCTYPE html>

Elemento raíz, encierra toda la página

<html lang="es"></html>

Idioma del contenido lang="es"

Información no visible e importaciones

<head> </head>

Metainformación sobre el documento

Permite caracteres especiales (ñ, á, ¿, emojis)

<meta charset="UTF-8" />

Descripción, ayuda en las búsquedas del navegador

<meta
  name="description"
  content="Tienda online de tortas, ponquesitos y gelatinas para endulzar los momentos con tu familia."
/>

Autoriza escaneo de robots buscadores

<meta name="robots" content="index, follow" />

Ayuda al diseño adaptado a dispositivos

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Título, ayuda en las búsquedas del navegador

<title>Cakes Shop</title>

Importación de recursos

Importa icono

<link rel="icon" href="./images/favicon.png" />

Importa hojas de estilos

<link rel="stylesheet" href="./css/style.css" />

Body `<body></body>`

Encabezado: logo, menú de navegación, campo de búsqueda, etc.

<header>
  <img src="./images/logo.svg" alt="Logo" />
  <navbar>
    <ul>
      <li>
        <a>Promociones</a>
      </li>
      <li>
        <a>Productos</a>
      </li>
      <li>
        <a>Pedidos </a>
      </li>
    </ul>
  </navbar>
</header>

Contenido principal del tema central o funcionalidad

<main>
  <section>
    <div>
      <h2>¡Endulzamos los mejores momentos con tu familia!</h2>
      <h6>Dulces y juntos siempre.</h6>
      <button>Pedir Ahora</button>
    </div>
    <div>
      <article>
        <img src="./images/cakel.jpg" alt="Torta 1" />
        <img src="./images/cake2.jpg" alt="Torta 2" />
        <img src="./images/cake3.jpg" alt="Torta 3" />
      </article>
      <div>
        <button></button>
        <button></button>
        <button></button>
      </div>
    </div>
  </section>
</main>

Pie de página, derechos y enlaces

<footer>
  <div>
    <img src="./images/lLogo.svg" alt="Logo" />
    <ul>
      <li>
        <a href="#">
          <img src="./images/facebook.png" alt="Ir a Facebook" />
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/twitter.png" alt="Ir a Twitter" />
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/instagram.png" alt="Ir a Instagram" />
        </a>
      </li>
    </ul>
  </div>
  <hr />
  <div>
    <h3>Cakes Shop (C) 2022. Todos los derechos reservados.</h3>
  </div>
</footer>

Anatomía de una Web

Head <head></head>

Body <body></body>

Head `<head></head>`

Body `<body></body>`