Juguemos a Diagramar 2

[rogertm]

Aquí va mi código:

Código HTML:

<header>
    <hgroup>
        <h1>LeLogo</h1>
    </hgroup>
    <div id="description">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <nav>
        <ul>
            <li><a href="#" title="Descargas">Descargas</a></li>
            <li><a href="#" title="Docs">Docs</a></li>
        </ul>
    </nav>
</header>
<section id="lelogo-industria">
    <h2>LeLogo en la Industria</h2>
    <article id="I">
        <h2>Empresa I</h2>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Quisque vehicula nisi nec magna adipiscing adipiscing.
            Quisque diam nunc, volutpat ut tincidunt quis, fringilla eu sapien.</p>
        </div>
    </article>
    <article id="II">
        <h2>Empresa III</h2>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Quisque vehicula nisi nec magna adipiscing adipiscing.
            Quisque diam nunc, volutpat ut tincidunt quis, fringilla eu sapien.</p>
        </div>
    </article>
    <article id="III">
        <h2>Empresa III</h2>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Quisque vehicula nisi nec magna adipiscing adipiscing.
            Quisque diam nunc, volutpat ut tincidunt quis, fringilla eu sapien.</p>
        </div>
    </article>
</section>
<div id="content">
    <article>
        <h2>Un ejemplo de uso</h2>
        <pre>
            Code is poetry, and CSS is Art
        </pre>
    </article>
    <aside>
        <div id="widget-1">
            <h3>Acerca de</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div id="widget-2">
            <h3>Descargas</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div id="widget-3">
            <h3>Documentacion</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div id="widget-4">
            <h3>Foros</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div id="widget-5">
            <h3>Contacto</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
    </aside>
</div>
<footer>
    <nav>
        <ul>
            <li>Acerca de</li>
            <li>Descargas</li>
            <li>Documentacion</li>
            <li>Foros</li>
            <li>Contacto</li>
        </ul>
    </nav>
</footer>
 

Les explico algo sobre mi trabajo. A diferencia de los otros compas que han hecho sus propuestas, he sacado la descripción del hgroup, pues considero que ahí debería ir algo como:

Código HTML:

<hgroup>
        <h1>LeLogo</h1>
        <h2>LeLogo es la solución</h2>
    </hgroup>
    <div id="description">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
 

Osea, para mi una descripción de este tipo es algo corto, como un slogan o algo así. Por lo demás no discrepo, solo que cada cual hace las cosas como las entiende

Aquí me tomé la libertad de agregar algunos IDs, pues normalmente lo hago claro, y aquí me aclara un poco el asunto

Igual, no usaría un hgroup para cada elemento h que ponga. En este sentido le hago un señalamiento a @carlos_belisario, pues además de eso, no debes, por cuestiones de SEO, usar tantos elementos h1 en tu página, el h1 es el elemento de mayor jerarquía en una página web, por ende, debes tener uno solo.

Me explico un poquito más, si estamos en el home de un sitio, el elemento h1 debería ser en título del mismo, pero si pasamos a leer un post, debería ser el título del post el de mayor jerarquía, pues es lo más importante en esa página, algo así:

Código HTML:

<div id="site-title">Nombre de mi sitio</div>
<div id="content">
    <article>
        <h1>Lorem ipsum dolor sit amet</h1>
    </article>
</div>
 

Yo normalmente hago esto, puedes usar, en lugar de un div, una etiqueta h de menor jerarquía, h3, por ejemplo...

Esta es mi experiencia en estos asuntos, no estoy pretendiendo ser un experto ni mucho menos, pues esto es un asunto más de SEO que otra cosa, pero siempre lo hago así y siempre tengo buenos resultados

Por otro lado @Jime25, creo que abusas del article, por ejemplo, en lugar de:

Código HTML:

<article>
    <section>Empresa X</section>
    <section>Empresa Y</section>
    <section>Empresa Z</section>
</article>
 

Habría hecho esto:

Código HTML:

<section>
    <article>Empresa X</article>
    <article>Empresa Y</article>
    <article>Empresa Z</article>
</section>
 

Pues para mi, es una sección que tiene tres artículos dentro, y así sucesivamente.

Lo mejor de HTML5 es la semántica que tiene, para mi ha sido muy fácil aprenderlo. Y espero que las sugerencias que les doy les sirvan, de igual manera podemos debatir el asunto...

Un abrazo a todos, a ver si me embullo y hago mi propuesta de diagrama