Estructura de un documento HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primer documento HTML</title>
  </head>
  <body>
    <h1>Documentos HTML</h1>
    <p>
      Este es el primer documento HTML: básico pero en él se aprecia la estructura básica de un documento HTML.
    </p>
  </body>
</html>

 <html> (Elemento raíz / Padre de todos)
│
├── <head> (Metadatos e información para el navegador)
│     ├── <meta charset="utf-8"> (Codificación de caracteres)
│     └── <title>...</title> (Título de la pestaña)
│
└── <body> (Contenido visible de la página web)
      ├── <h1>...</h1> (Cabecera principal)
      └── <p>...</p> (Párrafos de texto)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>El título de mi página</title>
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
      rel="stylesheet"
      type="text/css" />
  </head>

  <body>
    <!-- Encabezado -->
    <header>
      <h1>Encabezado</h1>
    </header>

    <!-- Barra de navegación -->
    <nav>
      <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Nuestro equipo</a></li>
        <li><a href="#">Proyectos</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
      <form>
        <input type="search" name="q" placeholder="Buscar" />
        <input type="submit" value="¡Vamos!" />
      </form>
    </nav>

    <!-- Contenido principal -->
    <main>
      <article>
        <h2>Título del artículo</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
          lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
          viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
          et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
          congue enim, ut porta lorem lacinia consectetur.
        </p>

        <h3>Subsección</h3>
        <p>
          Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
          dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem.
          Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
        </p>
        <p>
          Pelientesque auctor nisi id magna consequat sagittis. Curabitur
          dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet.
          Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
        </p>

        <h3>Otra subsección</h3>
        <p>
          Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
          soclis natoque penatibus et manis dis parturient montes, nascetur
          ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
          facilisis semper ac in est.
        </p>
        <p>
          Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
          tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
          ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
          diam iaculis velit, is fringille sem nunc vet mi.
        </p>
      </article>

      <!-- Barra lateral (se puede anidar dentro del contenido principal) -->
      <aside>
        <h2>Relacionado</h2>
        <ul>
          <li><a href="#">Oh, me gusta estar junto al mar</a></li>
          <li><a href="#">Oh, me gusta estar junto al mar</a></li>
          <li><a href="#">Aunque en el norte de Inglaterra</a></li>
          <li><a href="#">Nunca deja de llover</a></li>
          <li><a href="#">Oh, bueno...</a></li>
        </ul>
      </aside>
    </main>

    <!-- Pie de página -->
    <footer>
      <p>©Copyright 2050 de nadie. Todos los derechos revertidos.</p>
    </footer>
  </body>
</html>