Yeni HTML 5 etiketlerinden biri olan ve h elementlerini gruplamak için kullanılan hgroup etiketine bakalım. Eğer içeriklerimiz birden fazla h elementi içeriyorsa bunları grup şeklinde tanımlayabiliriz.

h1,h2,h3,h4,h5,h6 başlık etiketlerini gruplamak için kullanabileceğimiz yeni html5 etiketi olan hgroup etiketinin kullanımına örneklerle bakalım.

Article etiketi altında bir başlık etiketini hgroup kullanmadan gösterme
<article>
<h1>Başlık 1</h1>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
</article>

Article etiketi altında header etiketini kullanarak yazdırma

Burada hgroup kullanmaya gerek yoktur. Başlık ve zaman bilgisini header da gösterildi.

<article><header>
<h1>Başlık 1</h1>
<p><time datetime="2015-09-29">29 Eylül 2015</time></p>
</header>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
</article>

Article etiketi altında başlık ve alt başlık kullanımı

Birden fazla başlık etiketi kullanacağımız için bu h etiketlerini hgroup etiketiyle bir gruplama yaptık.

<article><hgroup>
<h1>Başlık 1</h1>
<h2>Alt başlık</h2>
</hgroup>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur</p>
</article>

Article etiketi altında header etiketi altında gruplama yapma
<article><header><hgroup>
<h1>Başlık 1</h1>
<h2>Alt başlık</h2>
</hgroup><p><time datetime="2015-09-29">29 Eylül 2015</time></p>
</header>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur</p>
</article>

Özetle

Bu makalede, hgroup etiketinin nasıl kullanılacağını gösterdik. Tek bir başlık elemanı kullanılacaksa hgroup etiketini kullanmaya gerek olmaz. Eğer alt yazılar, birden fazla başlık varsa (h1- h6) bunları hgroup şeklinde gruplamak daha doğru bir davranış olur. Eğer altyazı ve bölüm veya makaleye dair bilgi bulunuyorsa header etiketiyle yapmanızı tavsiye ederiz.

Written by Sümeyra Akbıyık
hakkımdaki her şeyi bu blogda bulabilirsin. Haydi sende bir göz gezdirmeye ne dersin?

Leave a Comment