Duda etiquetas section, div, etc..

[sentoki79]

Hola a tod@s

tengo una duda respecto a como estructurar las paginas en html5.
Vereis mi duda va enfocada a la situación de tener tres bloques de contenido y quererlos posicionar en la misma linea.
Por ello se que en html4 iban ubicados dentro de etiquetas div con una id para despues en css ir posicionandolos con float ó absolute.
Mi duda que me surge ahora es con los contenidos que no son secciones de texto, como tablas, formularios, listas ..estos donde se ubican? en una etiqueta section? no se si quedaria correcto asi.

Gracias por la aclaración

[user_fdw]

las personas lo manejan de distintas maneras, no he notado un estandar en cuanto a eso, pero en el caso que mencionas, he observado que en su mayoria los manejan con un div y una clase, no un id.

[Ferdinand1945]

Si, usar ids no es muy recomendado en ese caso. Si entendi bien, lo que te preguntas es como estructurar con html5 para tu contenido se vea inline... Podes hacer algo como esto

Código HTML:

<section class="section">
<div></div>
<div></div>
<div></div>
</section>
 

Código CSS:

div.section{
display: inline-block;
}
 

o si les das una clase a los div podes tirarlos con un float:left tmb

Para las listas y tablas tenes los <dl><dd><dt>

Código HTML:

<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun).</dd>
  <dt>Venus</dt>
  <dd>Venus (0.7 AU).</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) .</dd>
</dl>
 

Código CSS:

dl {
  width: 100%;
  overflow: hidden;
  background: #ff0;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #cc0;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #dd0
  padding: 0;
  margin: 0
}
 

[dartcoupli]

Yo utilizo unas plantillas que vienen en Internet, para ver las por ejemplo comparaciones entre versiones, o ejemplos para saber como organizar mi página web, si no se como empezar. Por ejemplo, esta;

https://www.google.es/search?q=html5&safe=off&es_sm=93&biw=1018&bih=832& source=lnms&tbm=isch&sa=X&sqi=2&ved=0CAYQ_AUoAWoVC hMI4t6ujcP2yAIVy7UUCh3hlwVO#safe=off&tbm=isch&q=ht ml5+estructura&imgdii=RgYe9Iol5880GM%3A%3BRgYe9Iol 5880GM%3A%3BFUz45nMdsxAspM%3A&imgrc=RgYe9Iol5880GM %3A

[Rafael]

No entiendo lo de ubicarlos en la misma línea. Pero te comparto mi lógica.

¿Recuerdas esas cosas de papel que se llamaban periódicos?

La analogía, como siempre hacemos en computación, es muy útil.

Etiquetas principales.

Tenías el periódico y era fácil identificar si era el que te gustaba: Daily Planet, Gotham City News. Header.

Tenías un periódico y tenías Secciones como Deportes, Finanzas, Espectáculos.

Dentro de Deportes tenías un artículo de la goliza de un equipo contra otro, los resultados de las carreras, etc.

Y para gráficas o diagramas ya puedes usar algna división.

----

Normalmente no tiene sentido personalizar demasiado algo. Una sección sí puede ser de un cierto tipo, una "clase".

Pero estar poniendo pedazos únicos e irrepetibles (id) uno por uno NO tiene sentido. Un ID se ocupa para alguna cosa de programación, por ejemplo un div que va a cargar un Ajax. Para poner columnas no los uses.

En dado caso mejor usa selectores CSS como

section.Columnas article {float, bla bla bla.}

Y ollviiiiiiiiidate de posiciones absolutas. Eso YA NO SE PUEDE APLICAR. Ya no existe tal cosa como que mi pantalla mide 1024x768.