Groups keyboard shortcuts have been updated
Dismiss
See shortcuts

[uf-discuss] Semantic naming of HTML document layout elements

5 views
Skip to first unread message

Robin Winslow

unread,
Dec 23, 2011, 8:23:53 AM12/23/11
to microforma...@microformats.org
Hi. I was wondering if there are standards in marking-up layout
elements for common regions in HTML documents.

I know HTML5 defines <header>, <footer>, <nav> and <article>, and
that's very helpful. But also many websites have a <div
class="container"> that encloses everything, to squeeze the content
into the middle of the page, and I'm never sure if I should, put the
<nav> inside the <header> or after it, and how should left and right
columns be marked-up? Should they be within the <article> element? Or
not? And I thought of using <aside> to denote left and right columns,
with classes like "pre" and "post" but I don't know if this is
standard either.

Does anyone know if anyone has come up with any standards for this
sort of thing?

I did post this question on stackoverflow.com, but thought you guys
might know more than the people that have answered so far:
http://stackoverflow.com/questions/8615464/standards-for-html-layout-element-class-names

Thanks,
Robin.
_______________________________________________
microformats-discuss mailing list
microforma...@microformats.org
http://microformats.org/mailman/listinfo/microformats-discuss

Stephen Paul Weber

unread,
Dec 23, 2011, 1:58:12 PM12/23/11
to Microformats Discuss
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA256

Somebody claiming to be Robin Winslow wrote:
>I know HTML5 defines <header>, <footer>, <nav> and <article>, and
>that's very helpful. But also many websites have a <div
>class="container"> that encloses everything, to squeeze the content
>into the middle of the page

The correct solution is not not have such a hackish element in your markup.
I never do. CSS is powerful enough that you don't need it, it just wastes
space.

><nav> inside the <header> or after it

Is the nav part of the header (in your concept of the page) or not? There's
your answer.

>and how should left and right
>columns be marked-up? Should they be within the <article> element? Or
>not?

Almost certainly not. Sidebars are often <aside> (if they are content that
is tangential to the main content, as they often are) and are also often
<nav>. Sometimes they are neither.

- --
Stephen Paul Weber, @singpolyma
See <http://singpolyma.net> for how I prefer to be contacted
edition right joseph
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iQIcBAEBCAAGBQJO9M9DAAoJENEcKRHOUZzes8MQAKM6hYRLU/awWnm8LLFZXhXA
lGRyFQC/wezRWVfCVAgNzddCURHXt/qAuQD3yKQRvmBEeUql1jzSxlXYrOH5H5sO
kfLZtwx9tV38LcDl4pxqhPjkgbEynmCQ9s4nIa/vj8+8ES6u/oztyniq7C7fM6bB
V/ksW9HtfmAXzWKO3+b8pjtEi4+t9vXr1JSTpLxDwszN1W4D74g7lGAAobOI3ENf
vHe6QENgJkivgKITk2Q8q+hzfaeO+IrK12zqLUvbzv0qSFw0F3qxD+BBH6zzNmou
2pap2XslI7BCIrPz1Sk4qu5TMbsdSb1oiwkAMkT9YwlO1cdDH4xZQFe84wP9oCqF
vsNRZUSx9gTOI8JnA4RuzijpT5bz9J84I/R+1o6w+ZObnmmaWtk+0eXvm3rtsRCP
AhdA5cnKL2VavO17sqNyHDALUBhopmk5hlSPkVT8f6AAq5PGxe+NyfeygUDRHvrh
YP59mbcKGjPAGU3zPt5j5dnqx8Jh9ocy8v7h3JRhtgNnjj7zeDT+agWTCF82Or1k
1bHWRQWsKtOpxL6Xl2vosEceNKZhtN3z7Xww2XUo+yRR4deT4LX/0GgXueAuV2SK
zl9CpxMD6u46BjWFXC020sm/mOwH7RxOeE8JMb758YOEeNKjO9miK0mEnQ6JUMyZ
d/urKuuBuAc1a1u+uig5
=uN2b
-----END PGP SIGNATURE-----

siegfried

unread,
Dec 27, 2011, 5:24:18 AM12/27/11
to microforma...@microformats.org
Am 23.12.2011 19:58, schrieb Stephen Paul Weber:
> Somebody claiming to be Robin Winslow wrote:
>> I know HTML5 defines <header>, <footer>, <nav> and <article>, and
>> that's very helpful. But also many websites have a <div
>> class="container"> that encloses everything, to squeeze the content
>> into the middle of the page
>
> The correct solution is not not have such a hackish element in your markup.
> I never do. CSS is powerful enough that you don't need it, it just wastes
> space.
Indeed. There already exists such an overall container: body.

There is just one thing to remember: There is a difference between html
and xhtml here. In html, body is the root element, in xhtml, html is the
root element. This may cause diffrences when using body as the central
overall container.

BTW: such a "hackish" element does not only waste space. Every class
attribute classifies its content. So what does it mean, if the content
of the container is classified "container"? The only logically correct
semantic would be, that the content itself is a container of something.
Since any html element is a container of some sort, and
class="container" does not classify the type of the content (i.e. adds
nothing to the semantic of its content), this information is unnecessary.

Instead, as stated:
>> [...] to squeeze the content


>> into the middle of the page

This shows presentational markup. To squeeze the content into the middle
of the page is 100% presentational aspect. So this belongs 100% to css.

siegfried

unread,
Dec 27, 2011, 5:33:59 AM12/27/11
to Microformats Discuss
Am 23.12.2011 14:23, schrieb Robin Winslow:
> not? And I thought of using <aside> to denote left and right columns,
> with classes like "pre" and "post" but I don't know if this is
> standard either.

It's not standard, but the idea is interesting. At least, as long as the
2 aside containers contain side-notes to the article or something
similar. Aside is not meant as a presentational positioning but as a
logical grouping.

I do often use the w3c aria landmark role values as class values
http://www.w3.org/TR/wai-aria/roles#landmark_roles

Additionally it might be an idea to check RDFa and f.ex. dublin core for
more useful class names.

Robin Winslow

unread,
Dec 29, 2011, 10:24:01 PM12/29/11
to microforma...@microformats.org
Stephen Paul Weber wrote:
> The correct solution is not not have such a hackish element in your markup.
> I never do. CSS is powerful enough that you don't need it, it just wastes
> space.

I completely agree that it would be lovely not to have any "hacky"
elements in my mark-up, and just have "header", "aside", "article" ,
"footer" as my container elements, but I don't know of any way to
achieve a centralised and squeezed layout without a container element.
E.g.:
http://jsfiddle.net/nottrobin/qcqzC/3/

> Is the nav part of the header (in your concept of the page) or not? There's
> your answer.

My question was whether the nav should be part of the header in the
accepted semantic meaning of the elements. But since they put <nav>
inside <header> in the W3C's example
(http://dev.w3.org/html5/spec/Overview.html#the-header-element) I
guess it should be.

> Sidebars are often <aside> (if they are content that
> is tangential to the main content, as they often are) and are also often
> <nav>. Sometimes they are neither.

Absolutely. I found a good article about <aside> and sidebars:
http://html5doctor.com/aside-revisited/

siegfried wrote:
> BTW: such a "hackish" element does not only waste space. Every class
> attribute classifies its content. So what does it mean, if the content
> of the container is classified "container"? The only logically correct
> semantic would be, that the content itself is a container of something.
> Since any html element is a container of some sort, and
> class="container" does not classify the type of the content (i.e. adds
> nothing to the semantic of its content), this information is unnecessary.

This is an accurate point. However, since (as mentioned above) I have
yet to see a solution for the layout I'm looking for (and which is
quite common - used on html5doctor.com for example) without using a
container element of some kind, I need to have one and I need to call
it something. I could call it "meaningless"...

> I do often use the w3c aria landmark role values as class values
> http://www.w3.org/TR/wai-aria/roles#landmark_roles

I like this idea, although the available roles don't seem that useful.

> Additionally it might be an idea to check RDFa and f.ex. dublin core for
> more useful class names.

Unfortunately I haven't found examples of RDFa or Dublin Core being
used to add semantics to structure.

In conclusion I don't think there does exist a standard for
ordering/structure of container elements, and it seems that's probably
a good thing. I do agree that it would be nice if I could eliminate
"container" elements, so I'm now going to try to work out how to do
that.

David Mead

unread,
Dec 29, 2011, 11:47:33 PM12/29/11
to Microformats Discuss
Hi Robin,

> but I don't know of any way to> achieve a centralised and squeezed layout without a container element.
I think what Stephen was saying is that the "container" div isn't
needed because your container can either be the html or the body
element, depending on which flavor of doctype you're using.
Both of these can be styled using CSS, so you could use either of
these to squeeze your content.
Though I don't want to put words into his mouth.
Dave

------------------------------------------------
David Mead
------------------------------------------------
http://twitter.com/davidmead
http://davidjohnmead.com
http://dmwebsites.com

Stephen Paul Weber

unread,
Jan 2, 2012, 9:12:53 AM1/2/12
to Microformats Discuss
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA256

Somebody claiming to be Robin Winslow wrote:
>Stephen Paul Weber wrote:
>> The correct solution is not not have such a hackish element in your markup.
>> I never do. CSS is powerful enough that you don't need it, it just wastes
>> space.
>
>I completely agree that it would be lovely not to have any "hacky"
>elements in my mark-up, and just have "header", "aside", "article" ,
>"footer" as my container elements, but I don't know of any way to
>achieve a centralised and squeezed layout without a container element.
>E.g.:
>http://jsfiddle.net/nottrobin/qcqzC/3/

Try this on for size (there are other ways):
<http://jsfiddle.net/BQkSv/1/>

- --
Stephen Paul Weber, @singpolyma
See <http://singpolyma.net> for how I prefer to be contacted
edition right joseph
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iQIcBAEBCAAGBQJPAbtkAAoJENEcKRHOUZzeScAQAKmj+jlq/RzunEJqd97V7rHV
f0p2CKLqbtW+S2ZyQGjSDD7rQJRuV9ksiz+OWtEZvLd7WgiM+o3crZgPPtjjZVxv
/6Iunkp9llx+MJKHPN8GjoqTJTKN4CZthCcNDw1dMNCeOSnt5pAO3bW/tii0ybSR
NbgBjAX47lArNx4S3FKJyLVwdujQYhtjQCsrRVa7CfyZFSN6NrDKfUy3iLB8Ub6C
OxKIMepue7ZFtysjKQ3zVevdU5ruOGXc54bquKqLapNXA9dhHZw+WSLj8JwiPaJN
8bzInFaqgav8Pl6koeQoesVO50qCfto/5JnoQDvIgIKf+VjNuaHAYhfkAlbiEjnf
afFAxceqd+E4TuVPs5Y2lMyT/n0rY3t0Pf4WnwH37szXJIamfh/J4zhGM06Zzmfy
HXmqHmhhfZPisu8WSAN9WStczyUk7ktd8W8Sk7pkdacSEmxOlYAQ51e9LHiJIjEw
EHV+mtA2hpDokOAUmAsULbIZz3BIFrvheoIJVwXKhIDWtRryfuWxLBa0shBwLncN
zxODN6mxYazrTGUB+NLMnBtvk7AMblwvybWRqh7RMVZUpKaYKbDezEgbhZFHmT5d
mcOO+b13erXCFw3piqfkDuaeferNl3gHmC//hxa1pMxee5hYQOXmcmcoOF8HT1+P
TNNrMiGtJZsgOtFcnOk4
=1vrc
-----END PGP SIGNATURE-----

siegfried

unread,
Apr 19, 2012, 4:27:39 AM4/19/12
to Microformats Discuss
Am 02.01.2012 15:12, schrieb Stephen Paul Weber:

>> I completely agree that it would be lovely not to have any "hacky"
>> elements in my mark-up, and just have "header", "aside", "article" ,
>> "footer" as my container elements, but I don't know of any way to
>> achieve a centralised and squeezed layout without a container element.
>> E.g.:
>> http://jsfiddle.net/nottrobin/qcqzC/3/

Well, as far as i know, there is such a container element. It is named
"body". I don't think that there is any need of another such element.

regards
Siegfried

siegfried

unread,
Apr 19, 2012, 4:38:18 AM4/19/12
to Microformats Discuss
Am 30.12.2011 04:24, schrieb Robin Winslow:

> This is an accurate point. However, since (as mentioned above) I have
> yet to see a solution for the layout I'm looking for (and which is
> quite common - used on html5doctor.com for example) without using a
> container element of some kind, I need to have one and I need to call
> it something. I could call it "meaningless"...

Sorry for answering that late. Since january i have a new job and too
much to work and too less time :)

So, if you need a "meaningless" container, just beeing a "container" of
no other meaning than beeing a container, then a div without any class
would be correct.

If you need to style it, just use body > div

But if you just use the body element for styleing, this would make such
a wrapper container obsolete. You might want to assign margin oder
padding to the body.

There is just one thing to mention: body is different in meaning in html
and xhtml. In html, it is the root element and as such, any styling of
the body impacts the whole page/viewport. In xhtml, the html element
instead is the root element. Any styling of the body only impacts
everything the body covers. If f.ex. the body only contains 1 word, and
you would set background-color to black, in xhtml this would only set
the background color of this single word to black. In html this would
set the whole viewport background to black. So if you have a
background-color other than white it makes a difference if you use
margin or padding. The margin does not get the background color, the
padding does.

BTW: xhtml sent as text/html is no xhtml, but slightly buggy html!

regards
Siegfried

Reply all
Reply to author
Forward
0 new messages