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