Heading Etiketi Nedir? Nasıl Kullanılır?

Tarih: 08-Subat-2018
Görüntülenme: 182

Ders 8 de Temel etiketleri incelemiştik ve bu derste de devam ediyoruz.

<h1> … <h2> … <h6> Heading Etiketi Nedir? Nasıl Kullanılır?

Heading etiketlerini bilmeyen yoktur elbette ama özellikle bazı yanlışlıkları düzeltmek adına burada paylaşmak istedim. Heading etiketleri sayfalarımızdaki içeriği hiyerarşik sıraya göre düzenlememize yarar. Arama motorlarınında yazısal içeriklerde aradığı kriterlerden birisi heading etiketi düzenidir.

Bir makalede başlık, alt başlık alt başlığın alt başlığı ve tekrar alt başlık olabilir. Bunu biz arama motorlarına heading etiketleri ile gösterebiliriz ki o zaman neyin ne kadar önemli olduğunu anlayabilirler.

Örnek vermek gerekirse

<h1>Burası Makalemizin Başlığı</h1>

                <p>bu kısım makalenin genel açıklaması</p>

                               <h2>burası makalemizin alt başlığı</h2>

                               <p>burası makalenin alt başlığının içeriği</p>

                                                               <h3>Burası Alt başlığın alt başlığı</h3>

                                                               <p>burası alt başlığın alt başlığının içeriği</p>

                               <h2>Burası 2. Alt Başlık</h2>

                               <p>burası 2. Alt Başlığın İçeriği</p>

Yukarıdaki Örnek heading taglarının nasıl kullanılması gerektiğini gösteriyor umarım anlaşılmıştır.

<hgroup> … </hgroup> HTML5 Temel Etiketi Nedir? Nasıl Kullanılır?

<hgroup> Etiketi adından da anlaşılacağı gibi gruplamak için kullanılır. Yukarıda bahsettiğim heading taglarının çevreleyicisidir ve onları içine alır. Yukarıdaki örneği aynen alacak olursam.

Kullanımı

<hgroup>

<h1>Burası Makalemizin Başlığı</h1>

                <p>bu kısım makalenin genel açıklaması</p>

                               <h2>burası makalemizin alt başlığı</h2>

                               <p>burası makalenin alt başlığının içeriği</p>

                                                               <h3>Burası Alt başlığın alt başlığı</h3>

                                                               <p>burası alt başlığın alt başlığının içeriği</p>

                               <h2>Burası 2. Alt Başlık</h2>

                               <p>burası 2. Alt Başlığın İçeriği</p>

</hgroup>

<i> … </i> HTML5 Temel Etiketi nedir? Nasıl Kullanılır?

<i> etiketi italik yapmak istediğiniz metinler için kullanılır.

Kullanımı

<p> Burası bir paragraf alanıdır <i> bu kısım italik olarak çıktı verecektir </i> burası normal font style ile gösterilecektir </p>

<mark> … </mark> HTML5 Temel Etiketi Nedir? Nasıl Kullanılır?

<mark> Etiketi vurgulamak veya özellikle altını çizmek istediğiniz metinler için kullanılmaktadır.

Kullanımı:

<p> Burası bir paragraf alanıdır <mark> bu kısım vurgulanmak istenilen metin alanıdır </mark> burası normal font style ile gösterilecektir </p>

<menu> … </menu> HTML5 Etiketi Nedir? Nasıl Kullanılır?

HTML5 İle gelen yeni etiketlerden olan <menu> etiketi, özellikle form elemanlarında listeler oluşturulduğunda onlar için çevreleyici ve belirtici görevi görür. Tabi ki normal ul – li yapılarında da kullanılmaktadır.

Kullanımı

<menu>

                <ul>

                               <li> Menu 1 </li>

                               <li> Menu 2 </li>

                               <li> Menu 3 </li>

                                <li> Menu 4 </li>

                               <li> Menu 5 </li>

                </ul>

</menu>

<meter> … </meter> HTML5 Temel Etiketi Nedir? Nasıl Kullanılır?

<meter> Elemanı bilinen bir aralık içinde bir skaler ölçüm ya da kesirli bir değeri temsil eder. Bu aynı zamanda bir gösterge olarak da kullanılır.

Kullanımı

<p> Disk Kullanımı: <meter  value="0.8"> % 80 </meter> </p>

<p> Toplam Puan: <meter  value="6"  min="0"  maks="10"> 10'dan 6'sı </meter> </p>

<p> Kirlilik Seviyesi: <meter  low = "60"  height = "80"  maks = "100"  value = "85" > Çok Yüksek </meter> </p>

Html-5 Temel etiketlerine bir sonraki dersimizde devam edeceğiz. İyi çalışmalar dilerim.


YORUMLAR
Bu konuya henüz yorum yapılmamıştır. İlk yorumu sen yaz.
YORUM YAZIN...