Ders10- HTML 5 Article Etiketi Kullanımı


HTML 5 içerisinde kullanılan yeni yapısal etiketlerden biri de article etiketidir. Yapı olarak önceki derste bahsettiğimiz section ve div’e benzerlik gösterir. Article etiketi bir sayfa, uygulama ya da belgede kendi içinde bir düzen oluşturabilen bir bileşeni temsil eder. Article bileşeni sayfa içinde yeniden kullanılabilen şeklinde tasarlanmıştır. Bir forumda açılan bir konu, bir dergi ya da gazetedeki makale gibi sayfadan bağımsız nesneleri tutabilen ve organize edebilen bir yapıya sahiptir. Bununla birlikte statik sayfalarda da kullanabilir.

Özet olarak article etiketi sayfamızda yer alan içeriği gruplandırarak ve css ile şekillendirebildiğimiz bir bölümdür.

article

Bir önceki örneğimize article etiketi ekleyerek devam edelim. Section etiketimizin içine article etiketi koyalım ve id verelim. Ardından buraya başlık kısmımızı da ekleyerek

etiketiyle de paragrafımızı yazalım. Daha sonrada CSS kodumuz ile article etiketimize biraz canlılık getirelim. İşte şimdi kodlarımıza bakalım ve Çıktımızı görelim.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
section#ust{background-color:#09C;}
section#sol{background-color:#909;
width:50%;
float:left;
}
section#sag{background-color:#C63;}
article#icerik{color:#090;}
article#icerik header{background-color:#993;}
</style>
</head>
<body>
<div id="sayfa">
<section id="ust">
<h1>burası sayfamızın üst kısmıdır.</h1>
</section>

<section id="sol">
<article id="icerik">
<header>
<h1>burası sayfamızın article kısmıdır.</h1>
</header>
<p>burası sayfamızın sol tarafıdır.. sumeyraakbiyik.com ile HTML 5 öğreniyorum. Article ile section dan burayı ayırdır.  </p>
</article>
</section>
<section id="sag">
<p>burası sayfamızın sağ tarafıdır.. sumeyraakbiyik.com ile HTML 5 öğreniyorum.</p>
</section>
</div>
</body>
</html>

Çıktısı

 

header etiketimiz ile bu bölümümüzün bir başlık olduğunu ifade ediyoruz. Article etiketleri içinde bu şekilde bir başlık etiketi de kullanılabilir. Bu etiketler makalemizi bölümlendirmeye ve her bölüme ayrıca ulaşabilmeye olanak sağlar.

CSS kısmında ayrıca article için bir biçimlendirme yapalım ve içindeki header kısmı için style kodlarımızı da tamamlayalım.

Gördüğümüz gibi article etiketi section etiketine benzer olarak bölümlendirmeye yarar. Section’dan farklı olarak sadece içeriklerin gruplandırılması article etiketi ile sağlanır.
Bu yeni etiketlerin çoğu çok fazla sayıda oluşturduğumuz div etiketlere alternatif oluşturup bu bölümlere daha rahat ulaşmamızı sağlar.

Bir yorum ekleyin

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir