9 ms·

The ﹤main﹥ element

164 points by thomasbachem 13y ago

robinduckett 13y ago
Down?
- insertnickname 13y ago
  Nope
  - robinduckett 13y ago
    My internet sucks!
SCdF 13y ago
Has anyone used all of the HTML5 tags in anger? I've tried a couple of times to build something fully "semantic". I struggle to create something that looks good semantically (ie just reading the HTML) and is also laid out on the page in the way I wanted it to be. There seem to be lots of situations, even in just mildly complicated web pages, where you need to write HTML code solely for graphics / layout reasons that completely breaks the idea of having a purely semantic document. In the end it just seemed much faster and cleaner to be more flexible with those various structures and to give up on the whole "semantic" document ideal and smash divs around. I'm ready to fully accept that this is the tables->css revolution all over again and I'm just crap, though, if that's the case.
- JonnieCache 13y ago
  It really depends on what kind of page you're making. If you're doing a heavily optimised landing page where everything has to be just-so, you might need to smash a few divs. If you're just making a basic page that's not too designy, you can produce some beautiful looking html. It looks even better in haml. Write some sass for it and you will reach a higher state of markup consciousness.
- hpaavola 13y ago
  I think that CSS is the biggest failure here. Let's say I have a blog, so for article page markup should be something like this: <html><head></head><body> <article>lorem ipsum</article> <nav></nav> <form>search</form> <footer></footer> </body></html> That way screen readers, search engines, etc will get the important stuff first and less important stuff afterwards. But since the common way of presenting blog is more like this: <nav></nav> <form>search</form> <article></article> <footer></footer> I either have to do some hacky position:absolute things, crazy floats with negative everything, or just reorder the markup. Crazy and hacky is not fun to maintain, so I have to reorder the markup. That's because CSS is made for changing fonts and colors, and not for layouts.
  - terabytest 13y ago
    I think you should try using WAI-ARIA standards[0] instead. That way you can keep your structure the same and give screen readers and such a better description of what's going on in your page. [0]: http://www.w3.org/WAI/intro/aria http://www.w3.org/WAI/intro/aria
    - guyguyguyguy 13y ago
      WAI-ARIA support is abysmal, not only does it vary between screen readers but also between various browsers using the same screen reader.
  - jbri 13y ago
    Flexbox[1] addresses the issue you're talking about - of course, browser support is still a little lacking (No support for IE9 or below, and IE10 doesn't conform to the current spec). [1]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi...
    - nyrina 13y ago
      In other words, it's useless for now, and for a few more years. God, I wish IE 8 wasn't the latest thing on XP (Still a lot of users on windows XP) and that new features weren't added only in major releases that happens rarely for Microsoft. Rarely, that is, compared to other vendors on the market.
- stan_rogers 13y ago
  Much of the graphical froufrou can be done using the before and after pseudo elements (which is one of the reasons I'm sort of disappointed that the HTML for the newer designs on the CSS Zen Garden has remained the same, complete with extra divs and spans strictly for styling).
- smackay 13y ago
  I've tried and failed miserably (so far) to use the tags also. It seems they are optimized for a single use-case: single, magazine-style, pages or blog posts. Anything other than this and it starts to fall apart pretty rapidly. The alternative would appear to be micro (macro) formats which would offer more flexibility but obviously the chances of standardization on a widespread basis would appear to be remote. Given the diversity of web-page content perhaps the goal of a semantic web is simply unattainable - at least in the short-term.
- rimantas 13y ago
  > There seem to be lots of situations, even in just mildly > complicated web pages, where you need to write HTML code > solely for graphics / layout reasons It depends on the browsers support desired, but for reasonably modern browsers this should be rarely the case, except for really complex layout. Now when we have multiple backgrounds and background images and generated content there is less demand for extra elements.
- Pxtl 13y ago
  Yeah, I know we were all excited about the new elements when they were playing about with them, but I was kinda skeptical as a web newbie doing pure productivity apps... I mean, the web is prettymuch an application engine now and we're doubling down on the document metaphor? What? I still think that CSS in particular maps terribly to its usage as a complete layout system. I mean, you can do it, but you can code in BF or do incredible things with template metaprogramming in C++. Doesn't make it a clean, pleasant way to work, and doesn't really fit the designed purpose.
  - SkyMarshal 13y ago
    >I mean, the web is pretty much an application engine now and we're doubling down on the document metaphor? What? I've been thinking similarly lately too. They're hardcoding semantics into HTML that may or may not change in the future. Better to avoid hardcoding things that could change or have subjective meaning whenever possible. Instead, keep HTML tags simple and enable optional, flexible semantics via attributes and properties, along the lines of schemas (http://schema.org/ http://schema.org/). Let the internet standardize among schemas, and replace obsolete ones with new and better ones as they arise. Or, if it's not requirement for your particular app, just don't bother with it at all.
- coldtea 13y ago
  >Has anyone used all of the HTML5 tags in anger? I've tried a couple of times to build something fully "semantic". Don't. Just use what you need and be pragmatic. The biggest proponents of semantic markup have been web designers, people that had no idea what semantic meant until they were told by hack W3C people. They tend to oversell the value of semantic markup, because they feel it makes them sound more intelligent and can help upsell their design offerings. In real life, nobody cares for semantic markup. Not Google (the main search engine that matters), nor browsers, and of course, not the clients. And as real life experiments with assistive technologies have shown, not even screen readers benefit that much from semantic markup or care about it. As for seperation of code and content and re-use -- that's what JSON, DBs, REST APIs etc are for. You are not supposed to reuse your HTML as is in other domains. It's mostly a snake oil business, based on an idea that sounds good in theory, but it's more trouble than is worth. And it has even less relevance nowadays, when web pages turn into web apps. What's a semantic "web app"? Why do we need semantics here, for something that in the native world we've always done with presentation code, from Interface Builder to Visual Studio?
- designofhomes 13y ago
  "Has anyone used all of the HTML5 tags in anger? I've tried a couple of times to build something fully "semantic". I struggle to create something that looks good semantically" I recently ditched Wordpress and decided to learn HTML and CSS by hand-coding my blog. I used many (but not all) of the new HTML 5 tags including main, section, article, nav, footer. Admittedly a blog is quite a structured type of site that lends itself well to simple semantic markup. I am using html5shiv.js to support IE 6-9 and the site renders mostly fine in those browsers. There are some isues with spacing, but the site is perfectly readable which is the main thing. Here's my site: http://www.designofhomes.co.uk http://www.designofhomes.co.uk (a blog about housing issues in the UK). Admittedly, it's not the most attractive design, but a reasonably clean and clear layout (I hope!) Any feedback on the appearance and structure is very welcome :-) Here's what the site looks like in Internet Explorer and Lynx using browsershots.org for testing (this link expires in a day or two) http://browsershots.org/http://www.designofhomes.co.uk/ http://browsershots.org/http://www.designofhomes.co.uk/
  - jwdunne 13y ago
    If clean and clear is what you're going for, I personally think you've done a good job!
    - designofhomes 13y ago
      That's great to hear. Thanks :-)
wiradikusuma 13y ago
The good thing is it'll be easier for robots to crawl pages to find the, well, main content. E.g. scrapers for websites without RSS support. The bad thing is if the robot is a search engine spider, people will use try to serve different 'main'.
derefr 13y ago
Sounds convenient for one major use: letting web-scraping and readability-like tools know that everything outside of <main> is alright to throw away.
- pestaa 13y ago
  I consider navigation not alright to throw away, but wouldn't put it in <main> either.
  - wtetzner 13y ago
    For something like Readability, you don't want to keep the navigation. The whole point is to get just the content, and make it readable.
  - oneeyedpigeon 13y ago
    But if I'm using a readability tool to access your content, I certainly don't want the navigation to be a part of it.
chrisfarms 13y ago
The ARIA roles ideas seem to address the semantics/accessibility issues much better than semantic tags. Plus with the direction that the Web Components stuff is going, I think they should probably scrap all the semantic elements, just stick to a smaller set of HTML elements that are "functionally" different. Then tell everyone to create their own tag-semantics by extending the basic elements for their use-case and use the standard roles taxonomy to describe the intent of the user-created tags. It feel a bit like parts of the groups are not talking enough :)
phpnode 13y ago
it's annoying that it can't be used more than once per page. It would be useful to also have a <content> element, e.g. <article> <header>...</header> <content>...</content> <footer>...</footer> </article>
- hober 13y ago
  It can be used more than once per page: http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-main-element http://www.whatwg.org/specs/web-apps/current-work/multipage/...
  - phpnode 13y ago
    W3C states explicitly that it can't so this is yet another instance where whatwg and w3c disagree leaving developers wondering what to do. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...
- MLR 13y ago
  Maybe using section there would be acceptable, it's the closest thing I can think of at least.
codeka 13y ago
Somewhat interesting, perhaps, is the fact that this page itself has the following markup: <main id="content" class="group" role="main"> <div class="main"> ... I, too, have tried to use semantic markup. Unfortunately, except for the most straight-forward of layouts, it's very hard to do. Though I guess there was also a time when non-table-based layouts was considered harder than it was worth...
- Swizec 13y ago
  Arguably most modern websites might as well be using tables considering how they use divs.
  - grandalf 13y ago
    yes. this is an under-appreciated fact.
- mmatants 13y ago
  Semantic = for developers. I.e. not in the "make it nice for web crawlers" sense, but for readability of template code. So for my own workflow, I have been quite comfortable being a "semantic stickler", where markup is written first and with only a general wireframe. CSS classes are added sparingly, to mark separate areas of concern for LESS/SCSS grouping. And then styling work begins, during which I try to avoid adding presentational fluff to markup at all costs. It's hard, but CSS3 allows a surprising amount of power. The rule of thumb is: clean template code is worth dirty CSS hacks. CSS is going to be shit anyway, due to its inherent qualities as a language. So might as well make templates awesome. And again, this is for developers' sanity more than anything to do with "semantic web" or whatever.
Kiro 13y ago
I still haven't found one good reason to use any of the semantic HTML5 tags instead of just good old divs. This didn't convince me.
- hober 13y ago
  <header>…</header> header {…} is slightly shorter than <div class=header>…</div> .header {…}
  - jacques_chester 13y ago
    And what does <main role="main"> buy us?
    - desas 13y ago
      You only have to specify the role for IE, once that complies you can use <main> rather than <div role="main"> or <main role="main">
      - jacques_chester 13y ago
        Thanks. I just thought I was having a Mugatu moment.
  - talmand 13y ago
    It's easy to present a special use example as a benefit over the current trend. It doesn't mean it would hold up over multiple comparisons. Although, any example that I could provide that would show the exception would also likely be a special use example. So it turns into a your mileage may vary situation. But, I've not always seen a slightly shorter amount of typing as a benefit to this sort of thing.
- aroberge 13y ago
  The nightmare of divs makes it hard to find the end div unless someone is disciplined enough to indent the code consistently OR if comments are inserted at the end of divs as in <div class="header"> ... </div>  Using semantic tags makes it much easier to see the structure.
jpswade 13y ago
Firefox 21, Chrome 26, and a WebKit r140374 have all implemented basic support for <main>. They have all mapped the ARIA role="main" to the <main> element so assistive technologies can now recognise the <main> element without issue.
brokenparser 13y ago
I'm still waiting for some sort of <bull> or <hogwash> element to markup comments and other such tripe. E.g.: <user class="spam">Buy my pills!</user> It would be even more useful if something like this works: <user rel="nofollow">Buy pills <a href="fizz://example.net/pills">here!</a> </user> This is cleaner than putting the attribute on every anchor, I wouldn't mind crawlers skipping marked comment sections entirely either.
- ajanuary 13y ago
  Would be useful to also sandbox it against running any javascript etc. contained therein.
  - phpnode 13y ago
    html5 iframe allows this [0], but i think it'll be difficult to shim in browsers that don't support it. [0] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox https://developer.mozilla.org/en-US/docs/Web/HTML/Element/if...
    - ajanuary 13y ago
      Thanks. I had a vague memory that there was something that did it, but couldn't remember what.
nilved 13y ago
I was honestly a little baffled to come into this thread and discover people were having trouble with semantic HTML. It's not hard to use, you just need to be inventive with your CSS. A page without divs, spans, strongs and bigs should be everyone's goal.
- rorrr2 13y ago
  Could you show us one of your websites "without divs, spans"?
  - verisimilitude 13y ago
    Not easy, but doable, especially on a straightforward design: e.g. http://tumbledry.org/ http://tumbledry.org/
    - talmand 13y ago
      Straightforward design meaning a never-ending single column of content? I would be shocked for such a page to require any creative usage of divs/spans whatsoever. Also, just curious, what's the point in having a footer that I can never properly see because new content is injected as I scroll down the page?
      - nickloewen 13y ago
        Re: footer – if you turn js off, it means that a 'more' link appears at the end of the page, leading you to older pages.
        talmand 13y ago
        I would rather that the footer either be sticky or the injection of new content not happen. One shouldn't have to disable Javascript to see content, even if it is the footer.
    - Groxx 13y ago
      Surprisingly readable, both human and machine. Thanks, that's enlightening :)
WayneDB 13y ago
When are we going to get tags that describe user interfaces instead of documents?
peferron 13y ago
Thanks for posting this. I just replaced the <section> I was using on one of my projects by a <main>. In the context of this project, this particular container was always meant to be unique anyway; and it had been bothering me a bit these past few days to know that I wasn't using <section> quite as intended. Using a <div class="main"> wasn't a very sexy alternative either. Quite sure that when I read the list of HTML5 elements a while back, <main> wasn't in the list! Glad it got added.
mvzink 13y ago
This is great news. However, all this discussion of "semantic this-or-that makes my site look like shit" or "semantic tags are just for template clarity" and "well at least web crawlers and Readability can make use of it" is really annoying. If you think <main> exists to make SEO easier for you, I'm willing to bet that around 7 million blind people in the US alone won't bother trying to use your site. Why? Because their screen reading software won't be able to make it through your mess of markup and get to the part that matters, for one. It's hard enough getting people to care about accessibility at all, but trying to drive ARIA adoption must be a complete nightmare. <main> is taking one of the most obvious, simple, and useful pieces from ARIA, which just happens to fit in quite sensibly with existing "semantic" tags, and allowing you to remove an important accessibility hurdle without even knowing about ARIA! I, for one, am extremely glad that I can now make my sites a bit more accessible with almost no extra effort.
WickyNilliams 13y ago
Why are people hating on HTML semantics? I fear it is out of some fundamental misunderstanding of how semantics work on the web... First let me be clear that there are (at least) two types of semantics on the web, one for machines (bots and screen readers) and one for meat (humans!). In writing HTML, the goal is not to use every semantically-rich tag available and avoid everything else like the plague. Where you can convey extra semantic meaning, use the most appropriate tag available; where you cannot, use a div or a span or something else. Use of divs does not make your page less semantic - it is not deductive. However use of the correct semantic tags will make your page more semantic - it is additive! In writing CSS, the goal is not to avoid classes/IDs altogether to keep your HTML "clean". The machines care not if your HTML is rammed full of classes; though you will certainly care when it comes to maintaining your pristine HTML. When writing CSS the goal isn't even to strive for "semantic" class names. CSS classes convey no semantics, at least not to machines. CSS classes should be used to convey semantics to the meat bags reading the code - devs, interested users etc. Nothing else matters with CSS, write it how you like, in as maintainable a fashion as possible and forget semantics in that domain. Excellent article discussing the fallacies around semantics: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a...
crazygringo 13y ago
Question: is there any evidence that search engines actually use/respect semantic tags like <main>, <footer>, <article>, etc.? Or anyone here who knows firsthand from Google? Just because, if I were writing a search engine, I would already have a bunch of "AI"/heuristics logic to tease these things out, since most sites don't use semantic HTML5 -- and it would probably do a solid job, since it's easy to compare a bunch of pages from a single site and figure out what parts are changing. Then, if I actually started assuming that <main> or <article> was always the main/article part, it makes it easier for people to "game" the search engine with keyword-stuffing, etc. So, if I ran a search engine, I'd probably just ignore them completely and rely on my own heuristics. (For example, Google completely ignores HTML language attributes: "Keep in mind that Google ignores all code-level language information, from “lang” attributes to Document Type Definitions (DTD). Some web editing programs create these attributes automatically, and therefore they aren’t very reliable when trying to determine the language of a webpage." [1] So I wouldn't be surprised if semantic HTML is the same deal.) I've heard it endlessly repeated that semantic HTML helps SEO, and that's why you should use it. But I've never seen concrete evidence of this -- is there anything that actually backs it up? [1] http://googlewebmastercentral.blogspot.com/2010/03/working-with-multilingual-websites.html http://googlewebmastercentral.blogspot.com/2010/03/working-w...
- eli 13y ago
  Offtopic, but I'm not sure <article> means what you think it means. It could be an article like in a magazine, but according to the spec it's for any "self-contained composition in a document" like a widget or a comment. Each page could have many <article>s. It's definitely not intended to indicate "this is the main content of the page." Lots of people are confused though. This is one of the many problems with semantic markup in the real world.
- frenchy 13y ago
  From what I understand, the short answer is "No, they don't". The long answer is "They don't yet, but if we keep telling people they do and everyone starts using semantic HTML, they will".
  - 13y ago
thezilch 13y ago
Sure I do, and there are many more HTML5 tags not mentioned by the article (eg. figure and figcaption). MDN does a great job listing, describing, and stating browser support, for each: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML...
Andrex 13y ago
This is completely off-topic, but I wanted to say I love the font used for the headings on this site. "Quicksand," is it? Nice and playful without being completely unprofessional, very good pick.
jebblue 13y ago
The header goes inside of body now? If so then now header no longer means header. For that matter, main seems to be doing what body is supposed to do? Personally I think it should be: <header role="banner"> [...] </header> <body id="content" class="group" role="main"> <div id="divcontent1" class="aclass" role="arole"> [...] </div> </body> <footer role="contentinfo"> [...] </footer> Why change the expectations for where a header goes after around two decades?
- dukerutledge 13y ago
  Are you mistaking header and head?
  - jebblue 13y ago
    Yes, you're right, I got them mixed up, thanks.

The ﹤main﹥ element

164 points by thomasbachem 13y ago

robinduckett 13y ago

Down?

insertnickname 13y ago
Nope
- robinduckett 13y ago
  My internet sucks!

SCdF 13y ago

Has anyone used all of the HTML5 tags in anger? I've tried a couple of times to build something fully "semantic". I struggle to create something that looks good semantically (ie just reading the HTML) and is also laid out on the page in the way I wanted it to be. There seem to be lots of situations, even in just mildly complicated web pages, where you need to write HTML code solely for graphics / layout reasons that completely breaks the idea of having a purely semantic document. In the end it just seemed much faster and cleaner to be more flexible with those various structures and to give up on the whole "semantic" document ideal and smash divs around. I'm ready to fully accept that this is the tables->css revolution all over again and I'm just crap, though, if that's the case.

JonnieCache 13y ago
It really depends on what kind of page you're making. If you're doing a heavily optimised landing page where everything has to be just-so, you might need to smash a few divs. If you're just making a basic page that's not too designy, you can produce some beautiful looking html. It looks even better in haml. Write some sass for it and you will reach a higher state of markup consciousness.
hpaavola 13y ago
I think that CSS is the biggest failure here. Let's say I have a blog, so for article page markup should be something like this: <html><head></head><body> <article>lorem ipsum</article> <nav></nav> <form>search</form> <footer></footer> </body></html> That way screen readers, search engines, etc will get the important stuff first and less important stuff afterwards. But since the common way of presenting blog is more like this: <nav></nav> <form>search</form> <article></article> <footer></footer> I either have to do some hacky position:absolute things, crazy floats with negative everything, or just reorder the markup. Crazy and hacky is not fun to maintain, so I have to reorder the markup. That's because CSS is made for changing fonts and colors, and not for layouts.
- terabytest 13y ago
  I think you should try using WAI-ARIA standards[0] instead. That way you can keep your structure the same and give screen readers and such a better description of what's going on in your page. [0]: http://www.w3.org/WAI/intro/aria http://www.w3.org/WAI/intro/aria
  - guyguyguyguy 13y ago
    WAI-ARIA support is abysmal, not only does it vary between screen readers but also between various browsers using the same screen reader.
- jbri 13y ago
  Flexbox[1] addresses the issue you're talking about - of course, browser support is still a little lacking (No support for IE9 or below, and IE10 doesn't conform to the current spec). [1]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi...
  - nyrina 13y ago
    In other words, it's useless for now, and for a few more years. God, I wish IE 8 wasn't the latest thing on XP (Still a lot of users on windows XP) and that new features weren't added only in major releases that happens rarely for Microsoft. Rarely, that is, compared to other vendors on the market.
stan_rogers 13y ago
Much of the graphical froufrou can be done using the before and after pseudo elements (which is one of the reasons I'm sort of disappointed that the HTML for the newer designs on the CSS Zen Garden has remained the same, complete with extra divs and spans strictly for styling).
smackay 13y ago
I've tried and failed miserably (so far) to use the tags also. It seems they are optimized for a single use-case: single, magazine-style, pages or blog posts. Anything other than this and it starts to fall apart pretty rapidly. The alternative would appear to be micro (macro) formats which would offer more flexibility but obviously the chances of standardization on a widespread basis would appear to be remote. Given the diversity of web-page content perhaps the goal of a semantic web is simply unattainable - at least in the short-term.
rimantas 13y ago
> There seem to be lots of situations, even in just mildly > complicated web pages, where you need to write HTML code > solely for graphics / layout reasons It depends on the browsers support desired, but for reasonably modern browsers this should be rarely the case, except for really complex layout. Now when we have multiple backgrounds and background images and generated content there is less demand for extra elements.
Pxtl 13y ago
Yeah, I know we were all excited about the new elements when they were playing about with them, but I was kinda skeptical as a web newbie doing pure productivity apps... I mean, the web is prettymuch an application engine now and we're doubling down on the document metaphor? What? I still think that CSS in particular maps terribly to its usage as a complete layout system. I mean, you can do it, but you can code in BF or do incredible things with template metaprogramming in C++. Doesn't make it a clean, pleasant way to work, and doesn't really fit the designed purpose.
- SkyMarshal 13y ago
  >I mean, the web is pretty much an application engine now and we're doubling down on the document metaphor? What? I've been thinking similarly lately too. They're hardcoding semantics into HTML that may or may not change in the future. Better to avoid hardcoding things that could change or have subjective meaning whenever possible. Instead, keep HTML tags simple and enable optional, flexible semantics via attributes and properties, along the lines of schemas (http://schema.org/ http://schema.org/). Let the internet standardize among schemas, and replace obsolete ones with new and better ones as they arise. Or, if it's not requirement for your particular app, just don't bother with it at all.
coldtea 13y ago
>Has anyone used all of the HTML5 tags in anger? I've tried a couple of times to build something fully "semantic". Don't. Just use what you need and be pragmatic. The biggest proponents of semantic markup have been web designers, people that had no idea what semantic meant until they were told by hack W3C people. They tend to oversell the value of semantic markup, because they feel it makes them sound more intelligent and can help upsell their design offerings. In real life, nobody cares for semantic markup. Not Google (the main search engine that matters), nor browsers, and of course, not the clients. And as real life experiments with assistive technologies have shown, not even screen readers benefit that much from semantic markup or care about it. As for seperation of code and content and re-use -- that's what JSON, DBs, REST APIs etc are for. You are not supposed to reuse your HTML as is in other domains. It's mostly a snake oil business, based on an idea that sounds good in theory, but it's more trouble than is worth. And it has even less relevance nowadays, when web pages turn into web apps. What's a semantic "web app"? Why do we need semantics here, for something that in the native world we've always done with presentation code, from Interface Builder to Visual Studio?
designofhomes 13y ago
"Has anyone used all of the HTML5 tags in anger? I've tried a couple of times to build something fully "semantic". I struggle to create something that looks good semantically" I recently ditched Wordpress and decided to learn HTML and CSS by hand-coding my blog. I used many (but not all) of the new HTML 5 tags including main, section, article, nav, footer. Admittedly a blog is quite a structured type of site that lends itself well to simple semantic markup. I am using html5shiv.js to support IE 6-9 and the site renders mostly fine in those browsers. There are some isues with spacing, but the site is perfectly readable which is the main thing. Here's my site: http://www.designofhomes.co.uk http://www.designofhomes.co.uk (a blog about housing issues in the UK). Admittedly, it's not the most attractive design, but a reasonably clean and clear layout (I hope!) Any feedback on the appearance and structure is very welcome :-) Here's what the site looks like in Internet Explorer and Lynx using browsershots.org for testing (this link expires in a day or two) http://browsershots.org/http://www.designofhomes.co.uk/ http://browsershots.org/http://www.designofhomes.co.uk/
- jwdunne 13y ago
  If clean and clear is what you're going for, I personally think you've done a good job!
  - designofhomes 13y ago
    That's great to hear. Thanks :-)

wiradikusuma 13y ago

The good thing is it'll be easier for robots to crawl pages to find the, well, main content. E.g. scrapers for websites without RSS support. The bad thing is if the robot is a search engine spider, people will use try to serve different 'main'.

derefr 13y ago

Sounds convenient for one major use: letting web-scraping and readability-like tools know that everything outside of <main> is alright to throw away.

pestaa 13y ago
I consider navigation not alright to throw away, but wouldn't put it in <main> either.
- wtetzner 13y ago
  For something like Readability, you don't want to keep the navigation. The whole point is to get just the content, and make it readable.
- oneeyedpigeon 13y ago
  But if I'm using a readability tool to access your content, I certainly don't want the navigation to be a part of it.

chrisfarms 13y ago

The ARIA roles ideas seem to address the semantics/accessibility issues much better than semantic tags. Plus with the direction that the Web Components stuff is going, I think they should probably scrap all the semantic elements, just stick to a smaller set of HTML elements that are "functionally" different. Then tell everyone to create their own tag-semantics by extending the basic elements for their use-case and use the standard roles taxonomy to describe the intent of the user-created tags. It feel a bit like parts of the groups are not talking enough :)

phpnode 13y ago

it's annoying that it can't be used more than once per page. It would be useful to also have a <content> element, e.g. <article> <header>...</header> <content>...</content> <footer>...</footer> </article>

hober 13y ago
It can be used more than once per page: http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-main-element http://www.whatwg.org/specs/web-apps/current-work/multipage/...
- phpnode 13y ago
  W3C states explicitly that it can't so this is yet another instance where whatwg and w3c disagree leaving developers wondering what to do. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...
MLR 13y ago
Maybe using section there would be acceptable, it's the closest thing I can think of at least.

codeka 13y ago

Somewhat interesting, perhaps, is the fact that this page itself has the following markup: <main id="content" class="group" role="main"> <div class="main"> ... I, too, have tried to use semantic markup. Unfortunately, except for the most straight-forward of layouts, it's very hard to do. Though I guess there was also a time when non-table-based layouts was considered harder than it was worth...

Swizec 13y ago
Arguably most modern websites might as well be using tables considering how they use divs.
- grandalf 13y ago
  yes. this is an under-appreciated fact.
mmatants 13y ago
Semantic = for developers. I.e. not in the "make it nice for web crawlers" sense, but for readability of template code. So for my own workflow, I have been quite comfortable being a "semantic stickler", where markup is written first and with only a general wireframe. CSS classes are added sparingly, to mark separate areas of concern for LESS/SCSS grouping. And then styling work begins, during which I try to avoid adding presentational fluff to markup at all costs. It's hard, but CSS3 allows a surprising amount of power. The rule of thumb is: clean template code is worth dirty CSS hacks. CSS is going to be shit anyway, due to its inherent qualities as a language. So might as well make templates awesome. And again, this is for developers' sanity more than anything to do with "semantic web" or whatever.

Kiro 13y ago

I still haven't found one good reason to use any of the semantic HTML5 tags instead of just good old divs. This didn't convince me.

hober 13y ago
<header>…</header> header {…} is slightly shorter than <div class=header>…</div> .header {…}
- jacques_chester 13y ago
  And what does <main role="main"> buy us?
  - desas 13y ago
    You only have to specify the role for IE, once that complies you can use <main> rather than <div role="main"> or <main role="main">
    - jacques_chester 13y ago
      Thanks. I just thought I was having a Mugatu moment.
- talmand 13y ago
  It's easy to present a special use example as a benefit over the current trend. It doesn't mean it would hold up over multiple comparisons. Although, any example that I could provide that would show the exception would also likely be a special use example. So it turns into a your mileage may vary situation. But, I've not always seen a slightly shorter amount of typing as a benefit to this sort of thing.
aroberge 13y ago
The nightmare of divs makes it hard to find the end div unless someone is disciplined enough to indent the code consistently OR if comments are inserted at the end of divs as in <div class="header"> ... </div>  Using semantic tags makes it much easier to see the structure.

jpswade 13y ago

Firefox 21, Chrome 26, and a WebKit r140374 have all implemented basic support for <main>. They have all mapped the ARIA role="main" to the <main> element so assistive technologies can now recognise the <main> element without issue.

brokenparser 13y ago

I'm still waiting for some sort of <bull> or <hogwash> element to markup comments and other such tripe. E.g.: <user class="spam">Buy my pills!</user> It would be even more useful if something like this works: <user rel="nofollow">Buy pills <a href="fizz://example.net/pills">here!</a> </user> This is cleaner than putting the attribute on every anchor, I wouldn't mind crawlers skipping marked comment sections entirely either.

ajanuary 13y ago
Would be useful to also sandbox it against running any javascript etc. contained therein.
- phpnode 13y ago
  html5 iframe allows this [0], but i think it'll be difficult to shim in browsers that don't support it. [0] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox https://developer.mozilla.org/en-US/docs/Web/HTML/Element/if...
  - ajanuary 13y ago
    Thanks. I had a vague memory that there was something that did it, but couldn't remember what.

nilved 13y ago

I was honestly a little baffled to come into this thread and discover people were having trouble with semantic HTML. It's not hard to use, you just need to be inventive with your CSS. A page without divs, spans, strongs and bigs should be everyone's goal.

rorrr2 13y ago
Could you show us one of your websites "without divs, spans"?
- verisimilitude 13y ago
  Not easy, but doable, especially on a straightforward design: e.g. http://tumbledry.org/ http://tumbledry.org/
  - talmand 13y ago
    Straightforward design meaning a never-ending single column of content? I would be shocked for such a page to require any creative usage of divs/spans whatsoever. Also, just curious, what's the point in having a footer that I can never properly see because new content is injected as I scroll down the page?
    - nickloewen 13y ago
      Re: footer – if you turn js off, it means that a 'more' link appears at the end of the page, leading you to older pages.
      - talmand 13y ago
        I would rather that the footer either be sticky or the injection of new content not happen. One shouldn't have to disable Javascript to see content, even if it is the footer.
  - Groxx 13y ago
    Surprisingly readable, both human and machine. Thanks, that's enlightening :)

WayneDB 13y ago

When are we going to get tags that describe user interfaces instead of documents?

peferron 13y ago

Thanks for posting this. I just replaced the <section> I was using on one of my projects by a <main>. In the context of this project, this particular container was always meant to be unique anyway; and it had been bothering me a bit these past few days to know that I wasn't using <section> quite as intended. Using a <div class="main"> wasn't a very sexy alternative either. Quite sure that when I read the list of HTML5 elements a while back, <main> wasn't in the list! Glad it got added.

mvzink 13y ago

This is great news. However, all this discussion of "semantic this-or-that makes my site look like shit" or "semantic tags are just for template clarity" and "well at least web crawlers and Readability can make use of it" is really annoying. If you think <main> exists to make SEO easier for you, I'm willing to bet that around 7 million blind people in the US alone won't bother trying to use your site. Why? Because their screen reading software won't be able to make it through your mess of markup and get to the part that matters, for one. It's hard enough getting people to care about accessibility at all, but trying to drive ARIA adoption must be a complete nightmare. <main> is taking one of the most obvious, simple, and useful pieces from ARIA, which just happens to fit in quite sensibly with existing "semantic" tags, and allowing you to remove an important accessibility hurdle without even knowing about ARIA! I, for one, am extremely glad that I can now make my sites a bit more accessible with almost no extra effort.

WickyNilliams 13y ago

Why are people hating on HTML semantics? I fear it is out of some fundamental misunderstanding of how semantics work on the web... First let me be clear that there are (at least) two types of semantics on the web, one for machines (bots and screen readers) and one for meat (humans!). In writing HTML, the goal is not to use every semantically-rich tag available and avoid everything else like the plague. Where you can convey extra semantic meaning, use the most appropriate tag available; where you cannot, use a div or a span or something else. Use of divs does not make your page less semantic - it is not deductive. However use of the correct semantic tags will make your page more semantic - it is additive! In writing CSS, the goal is not to avoid classes/IDs altogether to keep your HTML "clean". The machines care not if your HTML is rammed full of classes; though you will certainly care when it comes to maintaining your pristine HTML. When writing CSS the goal isn't even to strive for "semantic" class names. CSS classes convey no semantics, at least not to machines. CSS classes should be used to convey semantics to the meat bags reading the code - devs, interested users etc. Nothing else matters with CSS, write it how you like, in as maintainable a fashion as possible and forget semantics in that domain. Excellent article discussing the fallacies around semantics: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a...

crazygringo 13y ago

Question: is there any evidence that search engines actually use/respect semantic tags like <main>, <footer>, <article>, etc.? Or anyone here who knows firsthand from Google? Just because, if I were writing a search engine, I would already have a bunch of "AI"/heuristics logic to tease these things out, since most sites don't use semantic HTML5 -- and it would probably do a solid job, since it's easy to compare a bunch of pages from a single site and figure out what parts are changing. Then, if I actually started assuming that <main> or <article> was always the main/article part, it makes it easier for people to "game" the search engine with keyword-stuffing, etc. So, if I ran a search engine, I'd probably just ignore them completely and rely on my own heuristics. (For example, Google completely ignores HTML language attributes: "Keep in mind that Google ignores all code-level language information, from “lang” attributes to Document Type Definitions (DTD). Some web editing programs create these attributes automatically, and therefore they aren’t very reliable when trying to determine the language of a webpage." [1] So I wouldn't be surprised if semantic HTML is the same deal.) I've heard it endlessly repeated that semantic HTML helps SEO, and that's why you should use it. But I've never seen concrete evidence of this -- is there anything that actually backs it up? [1] http://googlewebmastercentral.blogspot.com/2010/03/working-with-multilingual-websites.html http://googlewebmastercentral.blogspot.com/2010/03/working-w...

eli 13y ago
Offtopic, but I'm not sure <article> means what you think it means. It could be an article like in a magazine, but according to the spec it's for any "self-contained composition in a document" like a widget or a comment. Each page could have many <article>s. It's definitely not intended to indicate "this is the main content of the page." Lots of people are confused though. This is one of the many problems with semantic markup in the real world.
frenchy 13y ago
From what I understand, the short answer is "No, they don't". The long answer is "They don't yet, but if we keep telling people they do and everyone starts using semantic HTML, they will".
- 13y ago

thezilch 13y ago

Sure I do, and there are many more HTML5 tags not mentioned by the article (eg. figure and figcaption). MDN does a great job listing, describing, and stating browser support, for each: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML...

Andrex 13y ago

This is completely off-topic, but I wanted to say I love the font used for the headings on this site. "Quicksand," is it? Nice and playful without being completely unprofessional, very good pick.

jebblue 13y ago

The header goes inside of body now? If so then now header no longer means header. For that matter, main seems to be doing what body is supposed to do? Personally I think it should be: <header role="banner"> [...] </header> <body id="content" class="group" role="main"> <div id="divcontent1" class="aclass" role="arole"> [...] </div> </body> <footer role="contentinfo"> [...] </footer> Why change the expectations for where a header goes after around two decades?

dukerutledge 13y ago
Are you mistaking header and head?
- jebblue 13y ago
  Yes, you're right, I got them mixed up, thanks.