Hgroup etiketi, Html5 ile gelen bu özellik ile kullanacağımız başlık etiketleri olan h1..h6 arasındaki başlık etiketlerinden birden fazla kullandığımızda başlıklarımızı gruplamak için kullanabileceğimiz etikettir makalenin devamından bu yeni etiket hakkında bilgi alabilir ve örneğe gözatabilrisiniz.

İçerik göster

HTML5 İle Gelen Hgroup Etiketi Nedir Ve Kullanım Örneği

HTML Hgroup etiketi

h1,h2,h3,h4,h5,h6 başlık etiketlerini gruplamak için kullanabileceğimiz yeni html5 etiketi olan hgroup etiketini aşağıdaki örnek sözdimleri ile kullanabilirsiniz.

1.Örnek

Article etiketi altında bir başlık etiketini hgroup kullanmadanki sözdimine bakalım.

<article>
    <h1>Title goes here</h1>
    <p>Lorem Ipsum dolor set amet</p>
</article>

<h1>Title goes here</h1>

<p>Lorem Ipsum dolor set amet</p>

</article>

2.Örnek

Article etiketi altına header alanı oluşturup hem başlığı hemde time yani zaman bilgisini yazdıralım.

<article>
    <header>
        <h1>Title goes here</h1>
        <time datetime="2010-03-20">20th March, 2010</time>
    </header>
    <p>Lorem Ipsum dolor set amet</p>
</article>

<h1>Title goes here</h1>

<time datetime="2010-03-20">20th March, 2010</time>

</header>

<p>Lorem Ipsum dolor set amet</p>

</article>

3.Örnek

Header etiketi altında kullanacağımız h1,h2 etiketlerini hgroup içerisine alarak gruplayalım.

<article>
  <header>
    <hgroup>
      <h1>Title goes here</h1>
      <h2>Subtitle of article</h2>
    </hgroup>
    <p><time datetime="2010-03-20">20th March, 2010</time></p>
  </header>                
  <p>Lorem Ipsum dolor set amet</p>
</article>

<h1>Title goes here</h1>

<h2>Subtitle of article</h2>

</hgroup>

<p><time datetime="2010-03-20">20th March, 2010</time></p>

</header>

<p>Lorem Ipsum dolor set amet</p>

</article>

4/5 - (2 votes)

Kategoriler

Bloga e-posta ile abone ol

HTML5 İle Gelen Hgroup Etiketi Nedir Ve Kullanım Örneği