Proyecto de autoprendizaje-Primeros pasos-AYUDA

#1 (**permalink**) 08/09/2015, 03:05

Hola a todos!

Traigo una duda muy sencilla para vosotros que sabéis mucho de estos.

Estoy empezando una web, sin ningún otro fin más que el de aprender, la web que estaba haciendo, también para aprender, ya no da más de sí.

Código HTML:

<!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" />
</head>
<body>
    <header>
    </header>
    <section>
       <article>
       </article>
    </section> 
    <footer>
    </footer>
</body>
</html>

Esta es la estructura básica que voy a seguir. Según he leído a grandes rasgos esta sería la estructura básica de HTML5, ¿no?

Llegados a este primer punto me entra una duda. ¿Si hago todo con HTML5 los divs no tendrían sentido, es decir, ya no se utilizan con HTML5, no? ¿A esas etiquetas HTML5 se les puede seguir poniendo el class como a los divs, no?

Y por otro lado al llegar al CSS me entra otra duda. ¿La siguiente estructura básica valdría? Es decir hay que establecer para cada una de las etiquetas principales etiquetas como si se tratasen de contenedores? (No sé si me he explicado bien con esta pregunta)

Es decir al body se le suele dar un with y todo eso pues a las estructuras que puesto arriba también habría que dárselas?

Código HTML:

body {

width:100%;
background-color: #f3f3f3;
margin: 0 auto;

}

header {

width:90%;
background-color: #f3f3f3;
margin-top: 20px;
margin-bottom: 100px;

}

section {

width:90%;
background-color: #f3f3f3;
margin: 0 auto;

}

footer {

width:90%;
background-color: #f3f3f3;
margin-top: 10px;
font-family: "helvetica";
font-size: 12px;

Espero haberme explicado con claridad y me podáis ayudar.

Muchas gracias a todo! Y espero seguir aprendiendo!

PHPeros · #2 (**permalink**) 08/09/2015, 07:30

Los divs son elementos que no poseen ningún significado especial y puedes utilizarlos como contenedores genéricos para mostrar el layout.

El problema con las etiquetas nuevas de HTML5 es que cada navegador las renderiza de forma distinta, por lo tanto necesitarás bastante código para hacer que se vean igual en todos los navegadores.

La idea es seguir usando divs para maquetar y reservar las etiquetas semánticas importantes (header, section, aside, artice etc.) para denotar el contenido del sitio.

#3 (**permalink**) 09/09/2015, 03:00

PHPeros gracias!

¿Entonces lo suyo es dejar las etiquetas semánticas importantes y dentro de ellas seguir utilizando divs?

Por ejemplo se me ocurren estos 3ejemplos. ?Cual sería el idóneo?

Código HTML:

 
    <div=class"logo"><img src="../../xxx/xxxx/x_x2.jpg"></div>

Código HTML:

    <header>
              <div=class"logo"><img src="../../xxx/xxxx/x_x2.jpg"></div>
    </header>

Código HTML:

    <header>
              <figure>
                     <img src="../../xxx/xxxx/x_x2.jpg">
              </figure>
    </header>

Y por otro lado ¿A todas las etiquetas semánticas importantes de HTML5 hay que tratarlas en CSS como si de un contenedor se tratase? (esto no sé si me he explicado muy bien)

Muchas gracias!

#4 (**permalink**) 10/09/2015, 05:30

PHPeros me has despistado, más todavía, con eso que me has contado..., no entiendo muy bien eso que me comentas...

Y por otro lado que me dices de lo que he preguntado en el post anterior.

muchísimas gracias!

PHPeros · #5 (**permalink**) 10/09/2015, 05:36

Conclusión: haz lo que venías haciendo hasta ahora pero no te olvides de los divs

#6 (**permalink**) 10/09/2015, 06:54

jeje

Es que hasta ahora no sé si lo estaba haciendo bien...

Solamente he montado una web, todo por afición y por aprender sin otro cometido más allá, y he utilizado etiquetas html5 sin ni un solo div por eso hacía la pregunta de los divs...

Por eso no sé como se debería de hacer correctamente...

Gracias!

PHPeros · #7 (**permalink**) 10/09/2015, 07:11

Los divs se pueden usar independientemente de la versión de HTML.

Te recomiendo consultar HTML5 Doctor, ahí está prácticamente todo lo que necesitas saber.

Ah, y los logos no son <figure> ya que éste representa contenido independiente del sitio.

#8 (**permalink**) 10/09/2015, 09:44

GRACIAS PHPeros!

Pero...<figure></figure> no se utiliza para meter imágenes dentro??

PHPeros · #9 (**permalink**) 10/09/2015, 10:40

No solo imágenes, también vídeo, SVG etc.

Se utiliza más bien como apéndice para complementar el flujo principal del documento, pero a la vez es independiente de su contenido. Como digo, un logo en este caso no sería válido.

Más info: https://developer.mozilla.org/es/doc...lemento/figure