Todos tenemos una estructura basica al realizar un sitio web y en HTML5 no hay excepción, lo que es muy facil de hacer ya que HTML5 tiende a ser una estructura muy semantica y es lo mejor de todo, sus etiquetas son muy básicas por eso vamos a ver como es una Estructura basica de un documento de HTML5. Este lenguaje tiende a hacerse mas simple y humano al escribir el código.

Empecemos con el  DOCTYPE, es muy sencillo de escribir y ha sido recortado,  después la etiqueta HTML la cual tiene el atributo LANG para el idioma del sitio.

<!DOCTYPE html>

<html lang="es">

<head>

Muy sencillo para empezar ¿no?, ahora toca el turno del titulo, este sigue siendo el mismo, con diferencia de la etiqueta META, donde le decimos al navegador que tipo de codificado es el documento html, de preferencia usemos el UTF-8 que acepta nuestros acentos y ñ con mas compatibilidad.

En realidad es algo demasiado corto y que no quita mucho tiempo, todo esto sigue estando en la etiqueta HEAD que no ha cambiado para nada, es algo muy parecido a XHTML, la cuestión es resumir el código.

<title>Titulo de la web</title>

<meta charset="utf-8" />

Pasemos a las etiquetas link, son las que enlazan nuestros estilos CSS, los Favicones y los Feeds. Estas son muy cortas con excepción de el feed que sigue casi igual, solo que ahora usaremos algo que ya existia,  el atributo REL que usamos en los links para cuestiones de SEO.

REL es para decir, que estamos enlazando,  ya que el atributo TYPE no se utiliza a menos que usemos para enlazar el FEED.

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

<link rel="shortcut icon" href="/favicon.ico" />

<link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" />

Ya terminamos con la parte no visible de la pagina web, es el turno del cuerpo o BODY, esta etiqueta sigue siendo útil para lo mismo, pero a continuación empieza algo interesante que son las etiquetas de la estructura de el sitio visual.
La etiqueta HEADER es la cabecera donde va el nombre del sitio, el logotipo y descripción de la pagina web, ejemplo.

Recomiendo que solo se use un H1 en una cabecera por cuestiones de SEO, pero es posible poner mas de un H1 y HEADER.

<body>
<header>
     <h1>Mi sitio web</h1>
     <p>Mi sitio web creado en html5</p>
</header>

Como pueden ver, la etiqueta HEADER es muy equivalente a crear un DIV con ID=”header”, pero ahora tenemos una etiqueta especial para ello.

Pasamos con el contenido o SECTION usando H2 de titulo y el contenido en etiquetas P dentro de una etiqueta llamada ARTICLE para articulos o post, esto por cuestiones de SEO que es muy recomendable tambien, ejemplo.

<section>
    <article>
        <h2>Titilo de contenido<h2>
        <p> Contenido (ademas de imagenes, citas, videos etc.) </p>
    </article>
</section>

SECTION es el equivalente a un DIV con ID=”contenido” y ARTICLE a un DIV con ID=”post” o “articulo”

Otra etiqueta interesante es la etiqueta ASIDE, lo que viene siendo nuestro SIDEBAR o barra lateral  y es muy facil de implementar con H3 de titulo y P de contenido dentro de ella.

<aside>
         <h3>Titulo de contenido</h3>
         <p>contenido</p>
</aside>

ASIDE es nuestro equivalente a un DIV con ID=”sidebar” o “barra”

Y finalizando con el pie de la pagina con la etiqueta muy obvia FOOTER , un ejemplo.

<footer> </span>
<p style="padding-left: 30px;"><span style="color: #333399;"> Creado por mi el 2011</span></p>
<span style="color: #333399;"></footer>

FOOTER es nuestro equivalente a un DIV con ID=”footer” o “pie”

Ahora veamos nuestro código completo:

<!DOCTYPE html>

<html lang="es">

<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="estilos.css" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" />
</head>

<body>
    <header>
       <h1>Mi sitio web</h1>
       <p>Mi sitio web creado en html5</p>
    </header>
    <section>
       <article>
           <h2>Titilo de contenido<h2>
           <p> Contenido (ademas de imagenes, citas, videos etc.) </p>
       </article>
    </section>
    <aside>
       <h3>Titulo de contenido</h3>
           <p>contenido</p>
    </aside>
    <footer>
        Creado por mi el 2011
    </footer>
</body>
</html>

Y si se preguntan por compatibilidad en los navegadores, solo basta decir que Internet Explorer 6 es compatible solo hay que convertir en bloques las etiquetas HEADER, SECTION, ARTICLE y FOOTER y ademas usar el HTML5 Enabling Script.

Si por alguna razón no pueden aplicarlo, aqui en este mismo sitio pronto encontraran un nuevo tutorial explicando como. Es algo demasiado sencillo y de verdad no es difícil, espero les sirva de inicio para nuevos proyectos.

Luis Antonio Gomez Prieto

Luis Antonio Gomez Prieto

Co-founder and Fullstack developer at @wavecodela

49 comentarios en “Estructura basica de un documento de HTML5

  1. No deberias hacer un articulo por hacerlo. Al transcurso de la lectura, hay veces en que parece no tener ni pies ni cabeza tus parrafos. Si un novato leyera esto, diria, HTML5 facil para quien? 2 estrellas de 5.

  2. Nunca una crítica mia habia tenido resultados tan pronto.
    No se si ya mejoraste el post o que, pero se entiende.
    Por ahora como hobby vengo siguiendo tus pasos.
    Veo que te faltó una / para cerrar el contenido dentro de .
    Bien de bien.
    Anda pensando en agregar un apartado para CSS ya que lo vamos a necesitar 😉

    De a poco somos mas los que andamos por aquí.

    Gracias nuevamente por compartir lo que sabes.

  3. Hola, muy buen articulo, para los que empiezan, por lo menos para mi ver, podrias hacer una secuencia, para los que empiezan como yo, desde cero, y si puedes algun apartado para organizar lso tutoriales, Muchas Gracias saludos.

  4. Claro que si amdcuba, estamos empezando y poco a poco estare subiendo mas articulos, la idea es tener todo de manera facil, ya que la informacion de html5 veo que casi no la tenemos a la mano.

    Gracias por sus comentarios

  5. soy un Blogger relativamente nuevo, aunque he echo algunas modificaciones a platillas subidas previamente por alguna comunidad nunca e echo un diseño personal para alguna pagina o blog.

    ¿Que programa me recomiendan para diseñar mi pagina web en html5 ?

  6. Que tal Sergio, bienvenido antes que nada, yo personalmente uso Dreamweaver, la version CS5 tiene soporte para html5 pero tienes que actualizarlo, tambien puedes usar otros para windows como Maqetta o cualquier editor de texto o html, hasta el bloc de notas es bueno, pero busca alguno con el que estes mas a gusto.

  7. hola, sólo escribo para agradecerte este artículo porque me hizo ahorrar un buen rato de trabajo.
    no sé por qué alguien dice por ahí que es difícil para principiantes -quizá- pero en mi caso, que hace años trabajo con html y que estaba armándome una maqueta básica de lo que siempre va en una página, resultó útil.
    ahora sólo debo agregar algunas líneas para “author” y alguna otra cosilla y ya está.
    gracias por tu tiempo, ya que tiempo es lo único que realmente tenemos los humanos, estás dando lo más valioso
    😉

  8. Muy buen post, he estado tratando de encontrar info pero esta muy confusa y con mucha información “basura” que no te deja concentrar, a través de esto empezaré la “mudanza” pero una duda… que pasa con los divs? se siguen usando solo que dentro de las nuevas etiquetas?

  9. me he puesto como disciplina el aprender html5

    la verdad tu sitio me ayuda bastante, si hay algo de diseño o ilustración en lo que pueda ayudarte cuenta conmigo

    valdría la pena poner un orden por donde empezar, creo que este sería el post 01 para iniciarse en html5, salvo que tu nos digas por donde.

    reitero mi agradecimiento.

  10. Muchas gracias!! muy buen aporte, ahora una pregunta, Dreamweaver 8 es compatible con HTML5?? y hace cuanto salio HTML5

    GRACIAS!! son preguntas para cultura general

    1. Dreamwaver tiene soporte nativo de HTML5 desde Adobe Dreamweaver CS 5.5, en versiones anteriores necesitas de plugins, desde el 2006 ya se hablaba de HTML5 pero no fue hasta el 2010-2011, donde ya varios modulos de HTML5 habían sido estandarizados para ser usados, recuerda que HTML5 es un draft o estándar modular, con forme pasa el tiempo se liberan nuevos modulos que los navegadores implementan.

  11. Muy bueno..! esta muy bien tú apertura mental, a transmitir los conocimientos, dado que muy pocos sitios, blog…etc solamente hablan de html4 o como mucho xhtml, no importa las cristicas hacen al maestro..!

  12. Excelente articulo. Decirte que tambien existe la etiqueta <nav> </nav>, que es para la barra de navegacion horizontal…… si no me equiboco, porque yo soy muy principiante.

    Saludos.

  13. Gracias por el artículo. Comparto la observación del comentario anterior, la etiqueta "nav" es importante, ya que determina la navegación principal de un sitio aportando importante información a los motores de búsqueda. También quiero destacar que, en el marco de una web semántica, la etiqueta "aside" no necesariamente se refiere a una barra lateral, sino a un contenido "aparte" del contenido principal, por lo que lo puedes colocar en cualquier posición. Otra cosa interesante (aunque quizá un poco más compleja) es hablar de las diferentes formas en que se organizan las nuevas etiquetas semánticas, por ejemplo busquen en Google Imágenes el texto "html5" y verán diferentes opciones, que quizá tengan que ver con diferentes tipos de contenidos en un sitio. Finalmente quiero recomendarles un editor de cógido que es Software Libre llamado Bluefish, es muy ligero y tiene autocompletado, además es multi plataforma. Saludos.

    1. Gracias por tus comentarios, tienes mucha razón, Google apoya bastante que usen ahora las etiquetas semánticas de HTML5 esto da mejor posición de SEO y gracias por recomendar el editor, saludos.

  14. Buen día, solo para comentarte que tienes en el Head un error de código o se ve mas de dedo.

    <header>
    <h1>Mi sitio web</h1></span></p>
    <p>Mi sitio web creado en html5</p>
    </header>

    Tienes una etiqueta "Span" y una "p" cerradas, pero en ningún lado las abres.

  15. Hola, me ha agradado tu artículo, y me gustó que relacionaras las etiquetas nuevas con los id&apos;s que por costumbre usabamos con capas, si me hubieran explicado así hubiera captado más rápido cuando aprendi jaja

  16. Hola, está muy interesante la información, por ejemplo tengo como actividad hacer un mapa mental con la estructura de HTML5, me va ayudar bastante.

    Gracias

  17. MI pana una pregunta…como hago para colocar otro aside en el lado izquierdo y asi ttener 2 siderbar por asi decirlo. Uno al lado derecho y el otro al lado izquierdo. En el centro iria el contendio principal,,,osea un article?…saludos muy buen post.

    1. hola bro, si bloc de notas, bueno si empizas con esto y te haces bolas por no saber organizar tu codigo en notepad utiliza notapad++ e una buena herramienta de programacion,

  18. te recomiendo que pongas la etiqueta <hgroup> </hgroup> ya que todos los elementos de encabezado h (h1, h2, etc) deben estar contenidos por esas etiquetas.
    ej
    <hgroup>
    <h1>Mi sitio web</h1>
    </hgroup>

  19. Quiero crear un footer que tenga un texto fijo que aprezca en todas las paginas y no hallo como cambiar la pagina Css. No se como insertar en esa pagina los codigos de texto: Este es el lenguaje de mi Css:
    .footer {
    padding:0;
    position: relative;
    margin:0;
    border-top:1px solid #1a1a1a;
    background:#0e0e0e;
    color: #FFF;
    height: 50px;

    }
    .footer_resize {
    width:940px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 2px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-left: 10px;
    }
    .footer p { font:normal 11px Arial, Helvetica, sans-serif; color:#3e3e3e;}
    .footer a { font:bold 11px Arial, Helvetica, sans-serif; color:#3e3e3e; text-decoration:none; padding:5px; margin:0;}
    .footer p.right { text-align:right; width:350px; margin:0; padding:15px 0 0 0; float:right;}
    .footer p.leftt { text-align:left; width:550px; margin:0; padding:15px 0 0 0; float:left;}

    Y este del texto que esta directo en la pagina pero deseo hacerlo fijo:

    <div class="footer_resize">
    <p class="leftt"><span class="Estilo30">© Ashley Scott – All Rights Reserved</span><br />
    </p>
    <p class="right"><span class="Estilo30">Site designed by: ASH Group 2002-2013</span></p>
    <div class="clr"></div>
    </div>

    ¿Puedes decirme que puedo hacer? He buscado y no encuentro respuesta…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar