HTML5 Hgroup Nedir?

HTML5 Hgroup Nedir? :Başlık gruplama anlamına gelen Hgroup etiketi arama motorları listelenmesi açısından oldukça iyi bir yere sahiptir. Hgroup etiketi kullanımı kullanıcı tarafından gözükmese de arama motoru optimizasyonlarında yeri oldukça yüksektir. Kullanılmasını tavsiye etmekteyim.

Html5 yenilikleri arasında gelen bu özellik çoğu özelliği arasında pek bilinmese de öneminin oldukça yüksek olduğu bir etikettir bu etiketin kullanımı oldukça basittir ve kullanımı gerek örnekleriyle beraber gerekse örneklere yorumlarımı katarak anlatmaya çalışacağım.

HTML5 Hgroup Örneği
HTML5 Hgroup Örneği

HTML5 Hgroup Neden Kullanılır?

Siz de bilirsiniz ki Html5 ile Web dünyasına bir çok yeni özellik gelmiştir. Bu özelliklerin arasında kullanımı arama motorları optimizasyonuyla eş zamanlı ilerleyen etiketler vardır. Bunların bir çoğunu zaten biliyorsunuz. Bir kaç tanesini örnek verecek olursak şöyle ki;

  • Başlık etiketlerinin kullanılması <h1> -…- <h6>
  • Paragraf etiketinin kullanılması <p>
  • Listeleme etiketlerinin kullanımı <ol><ul><li> …
  • Başlangıç, Gövde ve Bitiş etiketlerinin kullanımı <header> <body> <footer>

gibi etiketlerin kullanımının Web tasarım yapan kişinin avantajı’na olduğu zaten biliyoruz. Bunun yanına yeni gelen özellikler de eklemiştir ve hgroup etiketi de hayata geçmiştir. Kullanmanız web sitenize artı değer katacaktır.

 

HTML5 Hgroup Etiketi Nasıl Kullanılır?

Html5 Hgroup etiketinin kullanımı yukarıda da bahsettiğim gibi oldukça basittir sadece mantığını kavramanız ve neden kullanıldığını bilmeniz sizlere yeterli olacaktır. Aşağıda da sizlere yaptığım örneği Html kodlarıyla paylaşıyorum.

Örnek;

<!DOCTYPE html>
<html>
<head>
	<title>Form Örnekleri</title>
</head>
<body>
	<hgroup class="baslik-grubu">
		<h1>Form Örnekleri</h1>
		<h2>Textarea Kullanım Örnekleri</h2>
	</hgroup>
	
	<p>Deneme paragraf içeriği</p>
</body>
</html>

Açıklama; Görüldüğü üzere h1 ve h2 etiketlerinin birlikte kullanımı ile bir hgroup etiketi örneği oluşturduk ve h1 ana sayfa başlığı olacak şekilde h2’de ana başlıkla alakalı olacak şekilde konu başlığı olarak seçilmelidir.

 

Not: Ayrıca size bu konu hakkında bir detaydan daha bahsetmek isterim hgroup etiketinin içine h1 etiketi ve h2’yi aynı anda yazmanız bir gereklilik değildir hgroup etiketi içinde sadece h1 geçirip hemen altına konuyla alakalı o konuyu tanıtacak içerikli bir p etiketi de kullanabilirsiniz. Aşağıda bununla alakalı bir örnek daha yapıyor olacağım.

Örnek;

<hgroup class="baslik-grubu">
	<h1>Form Örnekleri</h1>
	<p>Konuyla alakalı özet içerik.</p>
</hgroup>

Açıklama; Gördüğünüz gibi bu konuyla alakalı özet içeriği de aynı şekilde hgroup içinde p etiketinde kullanabilirim.

Bu konuyla alakalı sormak istediğiniz soruları aşağıdaki form üzerinden bana yönlendirebilirsiniz. Sizlere mümkün olduğunca kısa süre içinde cevap vermeye çalışacağım. Hepinize iyi çalışmalar. Web tasarımlı günler diliyorum.

HTML5 Hgroup Nedir?
Etiketlendi: