Código HTML Básico para un sitio web

HTML es el lenguaje de marcado de hipertexto que se usa para crear la estructura de un sitio web, algo que debemos tener en cuenta es que HTML no es un lenguaje de programación, es un lenguaje de marcado y estructuración de páginas web.

Este lenguaje se caracteriza por contener una gran cantidad de elementos llamados etiquetas, cada una con un propósito y un comportamiento, estas suele tener algunos estilos nativos para diferenciar su propósito o importancia.

La importancia de una buena estructura.

Hace unos años se solía tener estructuras HTML poco entendibles para otros desarrolladores y casi incomprensibles para motores de búsqueda como Google, este código dependía de los nombres de las clases o identificadores que la persona que creaba la estructura definiera, lo que podía ser muy confuso para un equipo de trabajo.

En el pasado los sitios web se creaban a base de tablas y luego por la etiqueta div que es una etiqueta genérica usada para formar cualquier estructura.

Ejemplo de código antiguo HTML.


<html>
  <head>
   <title>Código HTML antiguo</title>
  </head>
 <body>
  <div class="header">
   <ul class="nav">
    <li>Inicio</li>
    <li>Nosotros</li>
    <li>Servicios</li>
    <li>Contacto</li>
   </ul>
  </div>
   <div class="aside"></div>
   <div class="main">
    <div class="section">
     <div class="article">
      <h1>>Esto es un titulo principal</h1>
      <p>
	Esto es un parrafo del texto principal del articulo
      </p>
     </div>
   </div>
   </div>
   <div class="footer"></div>
 </body>
</html>

HTML5 llega para resolver los problemas.

Este mejorado y eficaz lenguaje llego para cambiar la forma de escribir HTML y hacerlo entendible para personas ajenas que manipulen el código, esto también represente un avance muy grande en la forma que Google intenta leer y entender los sitios web para posicionarlos, actualmente una buena estructura es indispensable para tener una ventaja a la hora de ser indexado y posicionado por Google.

Las etiquetas HTML5 disponen de nombres muy específicos para su uso y semántica, de hecho estos solían manejarse en los nombres de las clases en el pasado, cuando estructurabas bien un sitio web, ahora las etiquetas tienen estos nombres y hacen más fácil leer el código y entender una estructura.


<!DOCTYPE html>
<html>
  <head>
    <title>Código HTML5</title>
  </head>
  <body>
   <header>
    <nav>
     <ul>
      <li>Menu 1</li>
      <li>Menu 2</li>
      <li>Menu 3</li>
      <li>Menu 4</li>
      <li>Menu 5</li>
    </ul>
   </nav>
  </header>
  <aside>
  </aside>
  <main>
   <section>
     <article>
      <h1>>Esto es un titulo principal</h1>
      <p>
	Esto es un parrafo del texto principal del articulo
      </p>
     </article>
   </section>
  </main>
  <footer>
  </footer>
 </body>
</html>