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
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-----
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.
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.
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
------------------------------------------------
http://twitter.com/davidmead
http://davidjohnmead.com
http://dmwebsites.com
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-----
>> 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
> 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