Önemli HTML5 Etiketleri

Bu dersimizde yapısal etiketlere ek olarak önemli bazı HTML5 etiketlerini göreceğiz.

<span> etiketi

Bazen <div>'lerin içinde yazılan bir kelimenin ya da cümlenin rengini değiştirmek isteyebiliriz. Bunun <span> etiketini kullanırız. Bunun dışında biz tasarımcılar metinlerin boş kalmaması için daima <span> etiketleri içine yazarız.

Aşağıdaki örnekte ne demek istediğimi daha iyi anlayacaksınız:

<div>
    <p>Bu <span style="color: blueviolet">kelime</span>nin rengini değiştirdim.</p>
</div>
<div>
    <span>Bu bir div'dir.</span>
</div>
<div>
    <span>Bu da başka bir div'dir.</span>
</div>
    

Çıktımız ise şu şekilde olacaktır:

İlk örnekte kelimenin rengini mavi eflatun olarak değiştirdim. style nedir diye takılmanıza gerek yok. CSS'e geçtiğimizde hepsini anlatacağım.

İkinci örnekte ise div'lerin içine span açarak metinlerin boş kalmasını engelledim.

<figcaption> etiketi

Bir önceki dersimizde <figure> elementi içinde bir resim belirtmiştik. <figcaption> elementi ile bu resmin açıklamalarını yazabiliriz. Kullanımı şu şekildedir:

<figure>
    <img src="http://www.zinzinzibidi.com/web_tasarim/Content/img/gun_batimi.jpg" alt="gün batımı"/>
    <figcaption>Gün batımı resmi</figcaption>
</figure>
    

Çıktısı işe şu şekildedir:

<button> etiketi

Anlamı düğmedir. Adından da anlaşılacağı gibi düğme oluşturmak için kullanılır.

<button>Bu bir düğmedir.</button>
    

Ekran görüntüsü ise şu şekildedir:

Biz tasarımcılar <button> etiketi yerine <input type="button"> etiketini kullanmayı tercih ederiz. HTML Form etiketleri konusunda bu konuya daha detaylı değineceğiz.

<code> ve <pre> etiketleri

<code> etiketi HTML kodları içine yazdığımız başka kodların kendi kodlarımız ile karışmaması için kullanılır. Eğer <code> etiketi içine HTML kodu yazıyorsak yine bir HTML çıktısı alacağız. Fakat <pre> durum biraz farklı. Bu etiketin içine yazdığımız HTML kodlarının ise kod halini göreceğiz. pre'nin açılımı preview'dir ve dilimizde önizleme anlamına gelmektedir. Bize yazdığımız kodların önizlemesini verir.

Aşağıdaki iki örnekte bunu daha rahat görebilirsiniz:

<pre>
    <p>HTML paragraf kodunu yazdım.</p>
</pre>
<code>
    <p>HTML paragraf kodunun çıktısı ise bu şekildedir.</p>
</code>
    

Çıktısı işe şu şekildedir:

<p>HTML paragraf kodunu yazdım.</p>

Ayrıca belirtmeliyim ki, <pre> içine yazılan karakter boşlukları ne kadar karakter boşluğu varsa o kadar görünür.

<mark> etiketi

Bazen cümle içindeki bir kelimeyi ya da sözcük öbeğini fosforlu kalemle çizilmiş gibi önplâna çıkartmak isteyebiliriz. Bunun için <mark> etiketini kullanabiliriz.

<p>Bu cümledeki vurgulanmış kelime <mark>elma</mark>dır.</p>
    

Çıktısı işe şu şekildedir: