Menu
I’ve been dying to know what a <section> of a document is…..except for the header, footer, and nav….it’s basically been a replacement for <div> for me.
What does everybody else use it for?
[code=html]
<header></header>
<article>
<section id="article-info"></section>
<section id="article-main"></section>
<section id="sidebar"></section>
</article>
<footer></footer>
[/code]Thanks to everyone.
LiveCity, I am aware that the tag was created for semantic purposes, I just don't understand the difference in semantics between a div and a section - they actually seem semantically equivalent to me - a div divides your page into [B]sections[/B].
But I started this thread to see what/if I was missing anything and see what everybody else uses section for, not really get a definition.[/QUOTE]
....because it's a whole different tag for a specific purpose.
[/quote]
[B]But what is the specific purpose of a div vs the specific purpose of section?[/B] My point is, I don't see any difference whatsoever.
A div contains a section of your page.....so will a section tag....[/QUOTE]
I think Gomhon, and myself included think this way as well.[/QUOTE]
Valid point. Allow me to clarify.
Let's say that you use only DIVs in your layout. The webpage itself is wrapped with a wrapper, within which there's a DIV for the header (which may contain additional DIVs for content), another DIV for the body of the website, which in turn contains a DIV for the side menu and the content itself (don't forget that every menu item is a DIV, and the content itself is filled with them also).
Too many DIVs, don't you think? They may be used properly, but the code is difficult to understand.
When using designated tags, you have a specific container for every type of content - wrap your header with a HEADER tag, same for the FOOTER, use SECTIONS whenever needed, and so on. The code produced that way is much more readable.
Also, consider screen readers for the visually-impaired. It would be much easier for them to know that the element they're rendering is a HEADER, rather than a DIV that was designated to serve such a purpose.[/QUOTE]
I just keep wondering whether there's really a point. I mean, most sites that require a team of folks to develop will likely be separated from the HTML anyway. They'll be tossing data structures at a header object, a footer object, a navigation object, etc. The tags that represent that data are probably somewhat irrelevant. And the class, structure, and variable names in the back-end code will hold much greater semantic value than a header tag will -- the backend objects will be things like RecipeName, Ingredient { Name, Amount, UoM }, Step { ActionDescription, IngredientList }, NutritionalInfo { VitaminList { .. } }, etc.
And honestly, if I were using the aforementioned list of objects, I might just use tag names that suit my application. Treat my document more like an XML document where I can give my tags true semantic value rather than the [I]lite[/I] semantic value offered by many of the new HTML5 tags.[/QUOTE]
On another note, here's an interesting analysis of the semantic tags:http://diveintohtml5.org/semantics.html#new-elements [/QUOTE]
[CODE]
<section id="a">
<article>Some content</article>
<article>Some content</article>
</section>
<section id="b">
<article>Some content</article>
<article>Some content</article>
</section>
[/CODE]I use sections as container elements to split up my page. For example my page will be structured like this:
[code=html]
<header></header>
<article>
<section id="article-info"></section>
<section id="article-main"></section>
<section id="sidebar"></section>
</article>
<footer></footer>
[/code]
I only use divs for wrapping elements that need something around it.[/QUOTE]
In the following example, we see an article (part of a larger Web page) about apples, containing two short sections.
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>[/QUOTE]
Yes it appears that you and Big O were correct. Poor naming in my opinion. I had though it was like a "section in a newspaper" that contained "multiple articles", but I guess that is a poor analogy since it goes the other way round.[/QUOTE]
0.1.9 — BETA 5.24