semantica HTML5

hackjose · #1 (**permalink**) 11/01/2013, 18:21

Hola amigos

Estoy haciendo un sitio pero quiero que tenga una buena estructura y semantica.

Aqui esta la imagen de como va a quedar

aqui esta el codigo que usaria

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>Titulo</title>
    <charset="utf-8" />
</head>
<body>
    <div>
        <p>slogan</p>
        <address>1234567890<br />1234567890</address>
        <ul>
            <li><img src=""></li>
            <li><img src=""></li>
            <li><img src=""></li>
        </ul>
    </div>
 
    <div>
        <header>
            <a href=""><img src="" /></a>
            <nav>
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                    <li>Item 5</li>
                </ul>
            </nav>
            <header>
                <form>
                    <input type="text" /><input type="submit" value="Buscar">
                </form>
            </header>
        </header>
 
        <section>
            <h2></h2>
        </section>
 
        <section>
            <h2>titulo</h1> 
        </section>
        <section>
            <h2>titulo</h1>
        </section>
        <section>
            <h2>titulo</h1>
        </section>
    </div>
    
    <footer>
        <ul>
            <li>Home</li>
            <li>Terminos</li>
            <li>Contacto</li>
            <li>Privacidad</li>
            <li>Login Doctor</li>
            <li>Login Admin</li>
        </ul>
        <h1>Nombre del sitio</h1>
    </footer>
</body>
</html>

Porfavor denme su opinion, que le cambiarian, quitarian o añadirian.

Creo que es una buena de aprender entre todos

Saludos a todos

---------------------
En la imagen se me olvido poner un <input type="text" /> debajo de item5

pzin · #2 (**permalink**) 11/01/2013, 18:50

Hay algunos errores.

El más obvio supongo que será encerrar header en un div. No es que sea un problema, en caso de que lo necesites puedes hacerlo perfectamente. El problema que yo le veo, es que según tu estructura no te haría falta ese div ahí. Puedes usar el propio elemento header para darle los estilos que le hagan falta.

Luego, echo de menos algo que haga de contenedor. Te aseguro que muy pocas páginas se ven bien en una resolución de 1920 píxeles que llegue de lado a lado. Son normalmente incómodas de leer, a menos que estés acostumbrado a ver partidos de tenis.

Meter imágenes en un lista, no le veo sentido. Si son enlaces si, pero según tu código no lo son.

También tienes en header, otro header dentro para un formulario. Ahí si que tendrías que usar un div, o, quitar ese segundo header ya que te basta form para posicionarlo aquí o allá.

Los tres elementos section de abajo —no el primero— tal vez, puedan ser una sólo. Según el diseño parece que serán unos bloques de contenido parecido, es decir, tres bloques formando una sección.

Y el H1 en el footer, es semántico porque cada elemento puede tener encabezados. Pero en footer lo veo un tanto extraño.

hackjose · #3 (**permalink**) 11/01/2013, 19:08

muchas gracias por contestar amigo

Cita:

Los tres elementos section de abajo —no el primero— tal vez, puedan ser una sólo. Según el diseño parece que serán unos bloques de contenido parecido, es decir, tres bloques formando una sección.

El contenido es muy diferente por eso opte por section

Cita:

También tienes en header, otro header dentro para un formulario. Ahí si que tendrías que usar un div, o, quitar ese segundo header ya que te basta form para posicionarlo aquí o allá.

XD perdon se me olvido quitarlo

Cita:

El más obvio supongo que será encerrar header en un div. No es que sea un problema, en caso de que lo necesites puedes hacerlo perfectamente. El problema que yo le veo, es que según tu estructura no te haría falta ese div ahí. Puedes usar el propio elemento header para darle los estilos que le hagan falta.

Igual se me olvido quitarlo

Cita:

Meter imágenes en un lista, no le veo sentido. Si son enlaces si, pero según tu código no lo son.

si son enlaces se me olvido

Aqui esta el nuevo codigo

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>Titulo</title>
    <charset="utf-8" />
</head>
<body>
    <div>
        <p>slogan</p>
        <address>1234567890<br />1234567890</address>
        <ul>
            <li><a href=""><img src=""></a></li>
            <li><a href=""><img src=""></a></li>
            <li><a href=""><img src=""></a></li>
        </ul>
    </div>
 
 
        <header>
            <a href=""><img src="" /></a>
            <nav>
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                    <li>Item 5</li>
                </ul>
            </nav>
                <form>
                    <input type="text" /><input type="submit" value="Buscar">
                </form>
        </header>
 
        <section>
            <h2></h2>
        </section>
 
        <section>
            <h2>titulo</h1> 
        </section>
        <section>
            <h2>titulo</h1>
        </section>
        <section>
            <h2>titulo</h1>
        </section>
    
    <footer>
        <ul>
            <li>Home</li>
            <li>Terminos</li>
            <li>Contacto</li>
            <li>Privacidad</li>
            <li>Login Doctor</li>
            <li>Login Admin</li>
        </ul>
        <h1>Nombre del sitio</h1>
    </footer>
</body>
</html>

Cita:

Luego, echo de menos algo que haga de contenedor. Te aseguro que muy pocas páginas se ven bien en una resolución de 1920 píxeles que llegue de lado a lado. Son normalmente incómodas de leer, a menos que estés acostumbrado a ver partidos de tenis.

tienes razon, nunca pienso en esos usuarios.

Cita:

Y el H1 en el footer, es semántico porque cada elemento puede tener encabezados. Pero en footer lo veo un tanto extraño.

En header uso una imagen(logo)
y dije no puedo darme el lujo de desperdiciar un elemento tan importante como <h1>, por eso lo puse en footer

de pura casualidad sabes si el h1 debe estar afuerzas en header?

por que he leido que si pones a h1 dentro de un hgroup, se pueden usar varios h1 y no afectan al SEO, pero nunca he sabido que pongan un h1 dentro de footer

Saludos y muchas gracias

pzin · #4 (**permalink**) 11/01/2013, 19:23

En HTML5, cada elemento puede contener encabezados. El hgroup no es para poner los encabezados que quieras. Es una interpretación un poco libertina.

Yo no soy muy amigo de sustituir un H1 por un logo. Y si preguntas por un código semántico, tampoco deberías de pensar en ello. Un logo es un elemento visual, una imagen que forma parte del documento. Ponerlo como fondo de un H1 no es semántico.

Como he dicho, si por ejemplo en esas tres secciones de abajo necesitas poner un encabezado, puedes poner uno en cada uno. Es totalmente válido, semántico y aceptable.

Si se te da bien el inglés, una página que a mi me gusta mucho en relación a artículos de semántica es http://html5doctor.com.

hackjose · #5 (**permalink**) 11/01/2013, 19:31

Bonez

Yo pienso igual, pero los clientes solo buscan que se vea bonito.

Y yo como buena persona dije, a fuerzas debo poner h1.

Y la parte mas viable(hablando de diseño) que encontre fue footer.

html5doctor seeee uno de los mejores recursos.

Gracias por contestar

saludos