So we’re a few years in but I’ve shied away from fully embracing it because I’ve found a lot of what I’ve read to be quite confusing, but I also realise I can’t keep resisting.
For example, the <article> tag…
“The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”
How would a “forum post” or a “user-submitted comment” make sense syndicated? Okay, maybe the former would and in some instances a comment might, but I would argue if you removed blog comments, news comments, even some forum posts out of the context of the surrounding content, well, they’re not going to make sense.
I’ve also seen numerous examples of the <footer> tag being used when I’ve Googled HTML5 layouts, and from what I’ve read, it seems the <section> tag would be more appropriate and the <footer> should be included within it… The same goes for the <header> too.
I understand the theory in creating more semantic tags will improve screen reader / search engine legibility, and there are good examples of this especially with form elements, but as far as I can see laying out pages by HTML5 seems to me to be pretty convoluted. It seems to be there is no definitive right and wrong, an author could argue the case for an <article> instead of <section> and vice versa. The example of syndicated comments when stacked up against the <article> definition makes no sense to me.
What websites would you recommend for guidance on layout best practices using HTML5.
Thanks in advance.