HTML Elementleri Nedir?
Daha önceki dersimizde web sayfasının iskeletini oluştururken tarayıcıya <h1>
ve <p>
gibi komutlar verdiğimizi öğrenmiştik. Bu komutlara "etiket" demiştik.
Bir etiketi, bütün içeriğiyle beraber bir bütün olarak düşündüğümüzde, ona "HTML Elementi" veya "HTML öğesi" diyoruz. Kısacası, etiket yapının sadece bir parçasıdır, element ise yapının kendisidir.
- Açılış Etiketi + İçerik + Kapanış Etiketi = HTML Elementi
Örnek:
<h1>İlk Başlığım</h1>
Bu satırı parçalarına ayırarak inceleyelim:
<h1>
: Bu, açılış etiketidir. Tarayıcıya "Burada başlık başlıyor" der.
İlk Başlığım
: Bu, içeriktir. Kullanıcının ekranda göreceği metindir.
</h1>
: Bu, kapanış etiketidir. Tarayıcıya "Başlık burada bitiyor" der.
İşte bu iç parçanın tamamı, bir araya geldiğinde <h1>
elementi oluşur. Aynı mantık <p>
gibi diğer elementler için de geçerlidir:
<p>İlk paragrafım.</p>
İç İçe HTML Elementleri
Bir binanın içinde odalar ve odaların içinde mobilyalar olması gibi, HTML elementleri de birbirinin içinde yer alabilmektedir. Aslında yazdığımız her HTML sayfası bu şekilde çalışır. Klasik bir örneği inceleyelim:
<!DOCTYPE html>
<html>
<body>
<h1>İlk Başlığım</h1>
<p>İlk paragrafım.</p>
</body>
</html>
- En dışta tüm sayfası kapsayan
<html>
elementi vardır. Onun içinde, sayfada görünecek her şeyi barındıran bir <body>
elementi bulunur. <body>
elementinin içinde ise <h1>
elementi ve bir <p>
elementi yer alır.
Bu hiyerarşik yapı, web sayfasının iskeletinin temelini oluşturmaktadır.
İçeriği Olmayan Elementler
Bazı elementler bir içerik taşımazlar ve bu yüzden kapanış etiketine de ihtiyaçları yoktur. Bunlara "boş elementler" denir.
En yaygın örneklerden bir tanesi <br>
etiketidir. Görevi sadece bir alt satıra geçmektir.
<p>Bu paragrafın<br>bu kısmı alt satırdadır.</p>
Gördüğünüz gibi <br>
etiketinin bir içeriği veya </br>
gibi bir kapanış etiketi yoktur. Diğer bir yaygın boş element ise resim eklerken kullandığımız <img>
elementidir.