HTML5 новите семантични елементи

[RRR]

Какво може да кажете за тях?Кога,защо и как да ги ползваме правилно?И каква е разликата между <div> и <section> && <section> и <article>.Ще се радвам и на примери.Благодаря!

[Avalanche]

Здрасти,

най-добра референция може да получиш в w3.org, където е описан стандарта. Та четейки от там:

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Или с две думи на майчин език, article тагът е за цялостно съдържание (страница, документ, приложение, т.н.), докато section служи за обозначване на отделните логически части в една страница.

Примерите са пак от w3.org:

Код: HTML

1. <article itemscope itemtype="http://schema.org/BlogPosting">
2.  <header>
3.   <h1 itemprop="headline">The Very First Rule of Life</h1>
4.   <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
5.   <link itemprop="url" href="?comments=0">
6.  </header>
7.  <p>If there's a microphone anywhere near you, assume it's hot and
8.  sending whatever you're saying to the world. Seriously.</p>
9.  <p>...</p>
10.  <section>
11.   <h1>Comments</h1>
12.   <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
13.    <link itemprop="url" href="#c1">
14.    <footer>
15.     <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
16.      <span itemprop="name">George Washington</span>
17.     </span></p>
18.     <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
19.    </footer>
20.    <p>Yeah! Especially when talking about your lobbyist friends!</p>
21.   </article>
22.   <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
23.    <link itemprop="url" href="#c2">
24.    <footer>
25.     <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
26.      <span itemprop="name">George Hammond</span>
27.     </span></p>
28.     <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
29.    </footer>
30.    <p>Hey, you have the same first name as me.</p>
31.   </article>
32.  </section>
33. </article>

[RRR]

Мерси!Помежду другото много хубав нов дизайн на сайта и забелязвам семантиката,за която говорим.Браво!

[Avalanche]

Благодаря много! Засега няма много оплаквания, така че предполагам че булшинството са доволни и лека-полека ще тръгнем нагоре пак.