

The ﹤main﹥ element - thomasbachem
http://html5doctor.com/the-main-element/

======
SCdF
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.

~~~
hpaavola
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.

~~~
laumars
Excuse my ignorance, but can you not use div layers to position your data as
well as the header / footer tags?

~~~
hpaavola
Depends on the meaning of "can" and "div layers". Technically speaking I can
do many things, it's just that CSS (before flexbox, as mentioned in the
comments) does not have any nice way to say that this element should be
displayed before that element and so on.

Not sure what you ment with the layer thing.

~~~
laumars
In the testing I've done with the aforementioned tags, the display ordering
happens correctly on all the desktop and mobile browsers I had to hand, when I
wrapped the content in div tags as well as the article et al tags. So I'm
wondering if what I've done is: 1) "valid" syntax, 2) would still break in the
clients being discussed earlier and thus I was testing the wrong clients or 3)
missing the point entirely.

I'm still learning my way through HTML5 (I have had some experience with the
markups that proceeded it though), so I just wanted to be clear on the issue
:)

re "div layers", that was a foobar on my part. I meant "div tags". Sorry for
the confusion.

~~~
nilliams
Unfortunately I think it's 3), you've missed parent's point :) They are not
saying that HTML5 tags do not order correctly. They are saying that it's
difficult to create a _semantic_ document, where the order of the tags suits
screen-readers (i.e. article before nav, as the article is the important part)
but the resulting webpage (when styled with CSS) suits viewers (nav at left of
article).

~~~
laumars
Ahhh I see. Thank you for the clarification.

------
crazygringo
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-w...](http://googlewebmastercentral.blogspot.com/2010/03/working-
with-multilingual-websites.html)

~~~
frenchy
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".

~~~
tghw
> _and everyone starts using semantic HTML, they will_

Eh, I doubt it. The problem with the "semantic web" is that your semantics
might not match my semantics. You might use <article> only for the main
content of an article-like page, whereas I might use it for each separate
piece of text.

------
WickyNilliams
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-a...](http://nicolasgallagher.com/about-html-semantics-front-end-
architecture/)

------
codeka
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
Arguably most modern websites might as well be using tables considering how
they use divs.

~~~
grandalf
yes. this is an under-appreciated fact.

------
brokenparser
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
Would be useful to also sandbox it against running any javascript etc.
contained therein.

~~~
phpnode
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/if...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/iframe#attr-sandbox)

~~~
ajanuary
Thanks. I had a vague memory that there was something that did it, but
couldn't remember what.

------
nilved
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
Could you show us one of your websites "without divs, spans"?

~~~
verisimilitude
Not easy, but doable, especially on a straightforward design: e.g.
[http://tumbledry.org/](http://tumbledry.org/)

~~~
talmand
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
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
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.

------
chrisfarms
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 :)

------
mvzink
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.

------
Kiro
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
<header>…</header> header {…}

is slightly shorter than

<div class=header>…</div> .header {…}

~~~
jacques_chester
And what does

    
    
        <main role="main"> 
    

buy us?

~~~
desas
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
Thanks. I just thought I was having a Mugatu moment.

------
peferron
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.

------
jpswade
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.

------
wiradikusuma
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'.

------
jebblue
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
Are you mistaking header and head?

~~~
jebblue
Yes, you're right, I got them mixed up, thanks.

------
thezilch
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/HTML...](https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/HTML5/HTML5_element_list)

------
phpnode
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
It can be used more than once per page: [http://www.whatwg.org/specs/web-
apps/current-work/multipage/...](http://www.whatwg.org/specs/web-apps/current-
work/multipage/grouping-content.html#the-main-element)

~~~
phpnode
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/ma...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/main)

------
Andrex
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.

------
derefr
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
I consider navigation not alright to throw away, but wouldn't put it in <main>
either.

~~~
wtetzner
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.

------
robinduckett
Down?

~~~
insertnickname
Nope

~~~
robinduckett
My internet sucks!

