HTML5 ile gelen yeni semantic (anlamsal) elementler aşağıdaki gibidir :
W3 spesifikasyonunda section elementi aşağıdaki şekilde tanımlanmıştır :
"The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading"
Örnek kullanım için aşağıdakileri örnekleri vermiştir :
"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."
Article elementi ile karıştırılmaması için aşağıdaki uyarı yapılmıştır :
"Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element"
Section elementinin div elementi gibi kullanılmaması için aşağıdaki uyarıyapılmıştır :
"The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline"
Not : http://www.w3.org/TR/html5/the-section-element.html#the-section-element adresinden detaylı açıklamaya ulaşabilirsiniz
W3 spesifikasyonunda article elementi aşağıdaki şekilde tanımlanmıştır :
"The article element represents a 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.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry."
Aşağıda bir article ve article içinde iki section bulunanan bir örnek bulunmaktadır :
<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>
Aşağıda bir kitap ve bölümleri hakkında bilgi veren bir sayfa örneği görülmektedir :
<article class="book"> <style> section { border: double medium; margin: 2em; } section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; } section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; } </style> <header> <hgroup> <h1>My Book</h1> <h2>A sample with not much content</h2> </hgroup> <p><small>Published by Dummy Publicorp Ltd.</small></p> </header> <section class="chapter"> <h1>My First Chapter</h1> <p>This is the first of my chapters. It doesn't say much.</p> <p>But it has two paragraphs!</p> </section> <section class="chapter"> <h1>It Continutes: The Second Chapter</h1> <p>Bla dee bla, dee bla dee bla. Boom.</p> </section> <section class="chapter"> <h1>Chapter Three: A Further Example</h1> <p>It's not like a battle between brightness and earthtones would go unnoticed.</p> <p>But it might ruin my story.</p> </section> <section class="appendix"> <h1>Appendix A: Overview of Examples</h1> <p>These are demonstrations.</p> </section> <section class="appendix"> <h1>Appendix B: Some Closing Remarks</h1> <p>Hopefully this long example shows that you <em>can</em> style sections, so long as they are used to indicate actual sections.</p> </section> </article>
Burada article bir kitabı belirtirken, section ise chapter ve appendix bölümlerini belirtmek içindir
Aşağıda article elementi ve schema.org sitesinde tanımlı microdata elementlerinin kullanıldığı örnek görülmektedir :
<article itemscope itemtype="http://schema.org/BlogPosting"> <header> <h1 itemprop="headline">The Very First Rule of Life</h1> <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p> <link itemprop="url" href="?comments=0"> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <footer> <a itemprop="discussionUrl" href="?comments=1">Show comments...</a> </footer> </article>
Yukarıda örnekte bir article içinde schema.org'taki item'lardan BlogPosting tanımlanmıştır
Aşağıda bir blog ve yorumlarını içi içe article elementleri ile yapıldığı örnek görülmektedir. Blog schema.org'larda tanımlı item'lardan BlogPosting ile ilgili microdata tanımları yapılmıştır :
<article itemscope itemtype="http://schema.org/BlogPosting"> <header> <h1 itemprop="headline">The Very First Rule of Life</h1> <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p> <link itemprop="url" href="?comments=0"> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p>
<section> <h1>Comments</h1> <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1"> <link itemprop="url" href="#c1"> <footer> <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">George Washington</span> </span></p> <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2"> <link itemprop="url" href="#c2"> <footer> <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">George Hammond</span> </span></p> <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p> </footer> <p>Hey, you have the same first name as me.</p> </article> </section> </article>
Yukarıda görüldüğü gibi Article içinde article'lar ve section'lar olabilmektedir
Aşağıda HTML5 sematic elementlerin çoğunluğunun kullanıldığı blog yazı örneği görülmektedir :
<!DOCTYPE html> <html lang="tr"> <head> <title>Blog Başlığı</title> </head> <body> <table> <tr> <td> <nav> <table> <tr> <td><a href="#">Makaleler</a></td> <td><a href="#"><<İlk Makale</a></td> <td><a href="#"><Önceki Makale</a></td> <td><a href="#">Sonraki Makale></a></td> <td><a href="#">Son Makale>></a></td> </tr> </table> </nav> <article> <header> <h1>Blog Başlığı Buraya</h1> <p>Yazar : Ali Bilmemne</p> </header> <hgroup> <div style="background:#cccccc"> <h2>İçindekiler</h2> <h3 style="margin-left:10px">Blog Başlığı Buraya</h3> <h4 style="margin-left:20px">İlk Bölüm</h4> <h5 style="margin-left:30px">Figure1</h5> <h5 style="margin-left:30px">Figure2</h5> <h4 style="margin-left:20px">Sonuç Bölümü</h4> </div> </hgroup> <section> <p><strong>Blog hakkında özet bir yazı buraya gelir. Blog hakkında özet bir yazı buraya gelir Blog hakkında özet bir yazı buraya gelir Blog hakkında özet bir yazı buraya gelir<strong></p> </section> <section> <header> <h1>İlk Bölüm</h1> </header> <p>İlk Bölüm ile ilgili yazı. İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazıİlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı</p> <figure id="Figure_1"> <img src="http://www.fibiler.com/Client/Image/logo_beta.jpg"> <figcaption>Resim Fugure 1</figcaption> </figure> <p>İlk Bölüm ile ilgili yazı. İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazıİlk Bölüm ile ilgili yazı İlk Bölüm ile ilgili yazı</p> <figure id="l4"> <pre><code> public void main(String[] args){ } </code></pre> <figcaption>Kod Figure 2</figcaption> </figure> </section> <section> <header> <h1>Sonuç Bölümü</h1> </header> <p>Sonuç bölümü yazı. Sonuç bölümü yazı.. Sonuç bölümü yazı.. Sonuç bölümü yazı .. Sonuç bölümü yazı.. Sonuç bölümü yazı.. Sonuç bölümü yazı.. Sonuç bölümü yazı..Sonuç bölümü yazı..Sonuç bölümü yazı. Sonuç bölümü yazı.. Sonuç bölümü yazı</p> </section> <section style="background:#cccccc"> <header> <h1>Yorumlar</h1> </header> <article> <header><h1>Güzel Bir Yazı</h1></header> <p>Yazıı güzel..Yazıyı güzel.. Yazıyı güzel.. Yazıyı güzel.. Yazıyı güzel.. Yazıyı güzel.. Yazıı güzel..Yazıyı güzel.. Yazıyı güzel.. Yazıyı güzel.. Yazıyı güzel..</p> <footer><p>04.10.2012 tarihinde eklendi</p></footer> </article> <hr/> <article> <header><h1>Köt ve Yanlış Bir Yazı</h1></header> <p>Yanlış yazı. Yanlış yazı. Yanlış yazı. Yanlış yazıYanlış yazı. Yanlış yazı Yanlış yazı. Yanlış yazıYanlış yazı. Yanlış yazıYanlış yazı. Yanlış yazıYanlış yazı. Yanlış yazıYanlış yazı. Yanlış yazıYanlış yazı. Yanlış yazı Yanlış yazı</p> <footer><p>04.10.2012 tarihinde eklendi</p></footer> </article> </section> <footer> <p><em> Footer bölümü . Yazar, Ali Bilmemne XYZ firmasında çalışmaktadır</em></p> </footer> </article> </td> <td valign="top"> <aside> <h1>Ana yazıya ek olan, ana yazı dışında olan bölüm</h1> <p>Yazar , X doğumludur ve Y firmasında çalışmaktadır. Bu yazıyı asdfdslşdsa lşadslşadsl adslasdlş aslşdaslşd lşasdlşaslşd asşldaslşdşl asd asdlşasdlş asd şald şlads</p> <ul>Yazarın Kitaplar : <li>Kitap 1 </li> <li>Kitap 1</li> <li>Kitap 1</li> </ul> <Address> İletişim : <a href="#">a@b.com</a>, <a href="#">Twitter</a></Address> </aside> </td> </tr> </table> </body> </html>
Sayfa bir blog yazısı. En üste navigasyon bağlantıları bulunmakta. Sağ bölümde ise Yazar hakkında blog yazısı ile dışında kalan ek bilgiler verilmekte. Blog için her yorumun ayrı bir article'a alınmıştır. İçindekiler (hgroup ile yapılan) ve yorumlar bölümü belirli olması için background'u gri yapılmştır
