Why use section tags instead of new page?

CelticRambler

Over the last year or so, more and more websites (especially start-ups) seem to be opting for a design that includes several different "pages" on one page, stacked one above the other.

Why?

An example that's come my way in the last few days (and the prompt for this enquiry) is http://www.fiftythree.com/book. Is there some advantage in this for tablet-based browsing, and if so what? I can't find any "best practice" guidelines for tablet design that mention it, and I can't see any efficiency in downloading content for six/seven/eight "pages" that are presented below the fold.

Visually, I find the abrupt change very annoying, but that's obviously a personal thing. However, if there's a genuinely good reason for building multi-section pages like this instead of giving the content it's own page, then I'll consider changing my own design habits. :rolleyes:

tramoreman

thats html5 the other way was html4

KonFusion

So, the section tag is merely part of the HTML5 spec.

See:

http://www.w3.org/TR/html5/sections.html#the-section-element
http://html5doctor.com/the-section-element/

The 'pageless' or 'one-page website' trend/technique is just that, a trend/technique.

One could argue it's better for this, worse for that etc. It depends on the site.

With regards to it's use on tablets, again one could argue that scrolling is more natural than clicking a link/moving to another page, therefore having the content on one page is easier to navigate/mentally parse.

The decision to use it or not will be up to you, based on your own thoughts, research etc.

It's a tool to be used when/if needed, like all other 'techniques'.

CelticRambler

Is this, then, simply a case of "up to the minute" designers using the new <section> tag because it's there? Are there no implications for download speed (one-page versus multi-page sites)? I'm puzzled as to the apparent lack of any discussion of this style elsewhere on the net when just about every other aspect of design (choice of font, line height, image size, background colour ...) provokes fierce debate!

It's the data transfer that I'm most concerned about as I've got to optimise a site for a mobile audience rather than my usual desk-bound surfers.

tramoreman

came across the following using the HTML5 section element

The section element is a container for content that has a related theme. The HTML5.0 specification has this to say:

“A section, in this context, is a thematic grouping of content, typically with a heading.”

At the time of writing the HTML 5.1 nightly specification provides even more clarity:

“The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1 – h6 element) as a descendant of the section element.”

full reading can be found at the following link

http://blog.paciellogroup.com/2013/10/using-html5-section-element/

CelticRambler

It's not the tags in themselves that I was wondering about - I've been around since HTML 1.0 and seen plenty of tags come and go and I'm not convinced that <section> or <article> have any advantage over a regular <div> - really the pros and cons of the one-page design vs. multi-page. I've found the (or at least an) answer to the download question in tech rather than design.

But having wasted many a happy hour on this subject in the last few days, I think I've been overthinking it. As far as I can work out, it is a trend like KonFusion says, that coincides with the increasing use of tablets. In fact it looks like a giant step back to the good old days when people used to talk about having a web page and that's all they had - a single web page. My impression that this style was associated mostly with start-up projects makes sense now, and it's mildly amusing to see how so many examples of good one-page designs from articles written in 2010-2012 now link through to more conventional sites.

Thanks all for your comments. Mission accomplished.

tricky D

CelticRambler wrote: »

It's not the tags in themselves that I was wondering about - I've been around since HTML 1.0 and seen plenty of tags come and go and I'm not convinced that <section> or <article> have any advantage over a regular <div> - really the pros and cons of the one-page design vs. multi-page. I've found the (or at least an) answer to the download question in tech rather than design.

section and article have semantic value which is perilous to ignore. div doesn't.

CelticRambler wrote: »

But having wasted many a happy hour on this subject in the last few days, I think I've been overthinking it. As far as I can work out, it is a trend like KonFusion says, that coincides with the increasing use of tablets. In fact it looks like a giant step back to the good old days when people used to talk about having a web page and that's all they had - a single web page. My impression that this style was associated mostly with start-up projects makes sense now, and it's mildly amusing to see how so many examples of good one-page designs from articles written in 2010-2012 now link through to more conventional sites.

Imho in general they're a bit of a poorly thought out fad. While there might be a certain amount of sense for small start ups with 'not a lot to say' yet, I reckon there's a significant SEO hit (internal links/anchors juice) and while scrolling on devices has certain advantages, it also has disadvantages in realms like users blind scrolling because 'the content must be down there somewhere', when a simple nav system mitigates against this by taking advantage of thumb operations for example.

CelticRambler

Yeah, I'm pretty much of the same opinion. Maybe the SEO aspect doesn't really come into it if the page is being massively promoted on social media, but when all is said and done, the majority of these "sites" are just one image-heavy, content-light page - so not worth indexing anyway! Those that present a long, continuous "story" are quite attractive and might actually suit one project I'm working on (certainly better than an animated video) but those that change background with every 1000 pixels scrolled are really annoying.