Merhaba,

Bu bölüme kadar aslında bir çok HTML etiketi gördük ve kullandık. Bu bölümde ise etiketlerin yapısı ile ilgili daha fazla bilgi edineceğiz.

Block ve Inline

HTML etiketlerini block ve inline olarak 2 ye ayırmak mümkün. Şimdiye kadar <body> içerisinde kullandığımız <section> , <article> , <p> gibi etiketler block kullanıma örnekti. Block etiketler içeriğinizi bloklar halinde böler ve aksi bir düzenleme yapmadığınız takdirde bulunduğu satırda yalnızca kendisi yer alır. Block etiketten sonra başka bir etiket yazdığınız zaman tarayıcıda bir alt satırda görüntülenir. Inline, yani satır içi elementler ise genellikle bir metnin bir bölümünü ayırt etmek veya bir işlev kazandırmak, için kullanılır.

Örnek olarak <p> etiketi block kullanıma bir örnektir. Nasıl ki bir paragraf bitip ikinci bir paragrafa başladığınızda alt satırdan devam edersiniz, burada da yapı aynı şekildedir. Ancak eğer bu paragrafın içinde bir kelimeyi, bir cümleyi kalın yazmak istediniz (<b>) veya bir kelimeye tıklayınca başka bir sayfaya yönlendirme yapmak istediniz (<a>). Kalınlaştırma işlemi bir öge değil bir biçimlendirme olduğu için satırı kaplaması beklenemez ve sadece bulunduğu yere etki eder.

<p>Yarın yaparım deme! Bugün de dünün yarınıydı. <b>Ne yapabildin?</b></p>

Buradaki kullanımda bir paragraf oluşturduk ve paragrafın içindeki bir cümleyi vurgulamak için kalın yazmak istedik. Kalın yazmak istediğimiz cümlenin başına <b> etiketi koyduk ve buradan itibaren kalın yazmasını istiyoruz dedik. Kalınlaştırmak istediğimiz cümlenin sonuna geldiğimizde ise </b> kapanış etiketimizi koyarak kalın yazmak istediğim kısım bitti demiş olduk.

Eğer burada yazdığımız <b> etiketi block bir etiket olsaydı, kodumuzu web tarayıcıda çalıştırdığımızda aşağıdaki gibi görünürdü:

Yarın yaparım deme! Bugün de dünün yarınıydı.

Ne yapabildin?

Ancak <b> inline bir etiket olduğu için kodumuz tam olarak istediğimiz gibi bir sonuç verdi.

İç İçe Etiketler

HTML kodlarıyla sayfamızı oluştururken fark etmiş olabileceğiniz gibi iç içe etiketler kullanmak durumunda kalıyoruz. <html> etiketi, <head> ve <body> etiketlerini kapsıyordu. Son örneğimizde ise <p> etiketi içerisinde <b> etiketini kapsıyordu. Burada etiketlerin başlangıç ve bitişlerine dikkat etmemiz gerekir.

<p>Yarın yaparım deme! Bugün de dünün yarınıydı.<b>Ne yapabildin?</p></b>

Yukarıdaki şekilde bir kullanım yanlış olurdu. Çünkü <b> etiketini kapsayan <p> etiketidir. Yazımıda önce <b> etiketini </b> ile kapatmamız gerekir, ondan sonra </p> kullanarak paragrafımızı bitirmemiz gerekir.

Hangi Etiket?

HTML’de aynı işlevi farklı etiketleri kullanarak görebilirsiniz. Örnek olarak bir yazızı kalınlaştırmak için <b> </b> etiketleri kullanabileceğiniz gibi <strong> </strong> etiketleri arasına yazdığınız metinler de kalın şekilde yazılır. İkisi arasındaki fark, <b> etiketinin işlevi yazıyı bold yani kalınlaştırmak iken, <strong> etiketi yazının o bölümünün önemli olduğunu vurgulamak için kullanılır. Temiz ve düzgün bir kod yapısı için her zaman etiketleri kendi amacına uygun kullanmamız gerekir. Bu sebeple HTML etiketlerini ve işlevlerini fırsat buldukça incelemek faydalı olacaktır. Tüm HTML etiketlerinin işlevlerini BURAYA TIKLAYARAK açılacak sayfadan inceleyebilirsiniz. (İngilizce)

Etiketler hakkında genel bir fikir sahibi olduğumuza göre artık sayfamızı oluşturan etiketleri bir sonraki yazımızda öğrenmeye başlayabiliriz.