I’m looking for best practices on which blocks to use and when on a page.
Do people generally use 1 section per page?
And then under that section just dozens of divs? Below them either columns, galleries, etc.?
Or just columns, galleries, directly under the section’s container?
I’m wondering because I’m also looking to speed up page speed with fewer CSS / HTML load, and in general to know more about which workflow gains best results
There are many good articles on the web regarding semantic use of html tags, so I won’t reiterate what has already been said many times elsewhere.
Also important to note, there is a certain amount of flexibility or creative licence due to the fact that not every website is the same. The old saying “you first have to know the rules to know when you are breaking them” is appropriate.
Cwicly is excellent in this regard and if for some reason a specific block isn’t the right fit, you can easily just use a div as a container and change it’s html tag and class, add relative styles and/or create a component, allowing you to meet most requirements very quickly.
It is good to keep your structure clean and lean and it is also very useful to think of the page structure in terms of the meaningfulness of each element rather than simply the presentational aspect.
If there are multiple logical areas that each have unique content then these can legitimately be created as multiple sections. A classic example being a home page with a content area, a recent posts area, a products area and a contact form area. Each of these can be considered a logical section.
To more broadly structure the site we find it useful within templates to wrap the main areas of content with a div and set the html tag to <main>. You can also wrap any secondary content in the same way and set the html tag to <aside>.
It varies between site to site whether it is appropriate for the client to use sections directly within their pages or for them to have a more customised content editing experience using separate fields for each area of content.
Finally, with regards to queries and other dynamically generated lists/grids, in a query template we often use a Div block as a wrapper and set it’s tag to <article> where applicable (e.g. for lists of posts).
These are just very general guidelines, there are many other semantic html tags and structures that can be utilised as templates. Once you have these in place on one site, it becomes very fast to reuse them.