Juguemos a Diagramar 2

[alivan]

Bueno, presento mi propuesta a continuación:

Código HTML:

<!-- Una cabecera con un <h1>, la descripción y los enlaces principales de navegación del sitio. -->
<header>
    <h1>LELOGO</h1>
    <p>Descripción del sitio</p>
    <nav>
        <a>Descargar</a>
        <a>Docs</a>
    </nav>
</header
 
<!-- Sección importante, remarcados los <article> con <h3> siguiendo la jerarquía. -->
<section>
    <h2>LeLogo en la industria</h2>
    <article>
        <h3>Empresa X</h3>
        <p>Comentario empresa X</p>
    </article>
    <article>
        <h3>Empresa Y</h3>
        <p>Comentario empresa Y</p>
    </article>
    <article>
        <h3>Empresa Z</h3>
        <p>Comentario empresa Z</p>
    </article>
</section>
 
<!-- Creamos una sección que muestra un ejemplo de uso, un código, englobado por una etiqueta <code> -->
<article>
    <h2>Ejemplo de uso</h2>
    <code>Código de ejemplo</code>
</article>
 
<!-- La sección de información básica del sitio. La pongo en un <aside> pues no lo considero contenido suficientemente relevante y además ya vamos a incluir en el footer los links que toman importancia. Lo mismo con el uso de <h4>, considero que los nombres de las empresas de arriba son más importantes que el contenido en concreto de este <aside> -->
<aside>
    <ul>
        <li>
            <h4>Acerca de:<h4>
            <p>Lorem ipsum...</p>
        </li>
        <li>
            <h4>Descargas:<h4>
            <p>Lorem ipsum...</p>
        </li>
        <li>
            <h4>Documentación:<h4>
            <p>Lorem ipsum...</p>
        </li>
        <li>
            <h4>Foros:<h4>
            <p>Lorem ipsum...</p>
        </li>
        <li>
            <h4>Contacto:<h4>
            <p>Lorem ipsum...</p>
        </li>
</aside>
 
<!-- Y por último el footer en el que van los enlaces de información principales del sitio. -->
<footer>
    <a>Acerca de</a> | <a>Descargas</a> | <a>Documentación</a> | <a>Foros</a> | <a>Contacto</a>
</footer>
 

Y si me dejan, ya se que soy el novato aquí, criticaré un poco a los que publicaron antes :P.
Jime25 usa sections dentro de articles. La verdad es que yo considero que un artículo va dentro de una sección (Sección de deportes > Artículo de baloncesto; Sección de tecnologías > Artículo Windows 8 incorpora la nueva interfaz Metro). Por ese motivo yo lo pongo al revés, el section englobando a los articles.

Por otro lado: "If it makes sense to separately syndicate the content of a <section> element, use an <article> element instead." Por lo que sí que usaría un article para el siguiente elemento.

Tampoco me gusta usar tanto hgroup tal y como hace el siguiente compañero. Un h1 que diga "Este es el título de la web!" y lo demás a partir de h2. Hgroup lo usaría únicamente para definir 2 o 3 h1's juntos, nunca separados. Y aun así serían casos extraños.

A Rogertm, de acuerdo en algunas cosas que dice, aunque yo omito directamente el hgroup. Además considero innecesario ese <div><p>...<//> que haces dentro de los articles. Con el párrafo sólo creo que es suficiente.

Sobre los enlaces de Carlos_belisario simplemente son ejemplos. Piensa que esos extractos van incluidos en un todo. No te fijes expresamente en ello, pues en el fondo hay infinitas combinaciones y tipos de webs.

Emprear, lo siento pero estoy tan acostumbrado a las tabulaciones(y añado que tngo sueño xD) y me lio al leer xD. Bueno, entendí que había que tratar el tema desde la semántica así que omito los divs. No sé si es que estoy dormido pero contñe 3 headers... Teniendo en cuenta la simplificidad, ¿por qué no usar simplemente hx? ¿Y los articles por dentro pueden ir así estructurados? Lo siento, pero lo veo un poco engorroso :S



Me gusta este juego, critiquen mi aporte, por favor ^^