Önemli HTML5 Etiketleri


Yazımız en son 11 Eylül 2015 tarihinde güncellenmiş ve 79 defa okunmuş.

Bu yazıda, web için önemli HTML5 etiketleri ve kullanım örneklerini inceleyeceğ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>

Sonuç ise aşağıdaki gibi olacaktır:

Önemli HTML5 Etiketleri

İlk örnekte kelimenin rengini mavi eflatun olarak değiştirdim. İkinci örnekte ise div’lerin içine span açarak metinlerin boş kalmasını engelledim.

<figcaption> etiketi

Bir resim için açıklama yazılır. Kullanımı:

<figure>
<img src=”https://www.fatihbasaran.com.tr/icerik/gunbatimi.jpg” alt=”gün batımı”/>
<figcaption>Gün batımı resmi</figcaption>
</figure>

Çıktı ise şu şekilde:

Önemli HTML5 Etiketleri

<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>

Önemli HTML5 Etiketleri

Biz tasarımcılar <button> etiketi yerine <input type=”button”> etiketini kullanmayı tercih ederiz.

<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:

Önemli HTML5 Etiketleri

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>

Önemli HTML5 Etiketleri

 

Sonraki yazılarda görüşmek üzere..