HTML Öğeleri
Temel belge iskeletini zaten biliyorsunuz. Bu ders sayfanın içindeki yapı taşlarına odaklanır: HTML öğeleri. Her başlık, paragraf ve sayfanın diğer çoğu parçası birer öğedir.
HTML öğesi nedir?
HTML öğesi eksiksiz bir işaretleme birimidir. İçerik saran çoğu öğenin üç parçası vardır:
- Başlangıç etiketi — örneğin
<p> - İçerik — içindeki metin veya iç içe öğeler
- Bitiş etiketi — örneğin
</p>
Birlikte<p>Merhaba</p>bir paragraf öğesidir.
Doğrudan yanıt
HTML öğesi genellikle eşleşen bir başlangıç etiketi, isteğe bağlı içerik ve bitiş etiketi demektir. Tarayıcı bu çiftle öğenin nerede başlayıp bittiğini bilir. Bazı boş öğeler içerik sarmadığı için ayrı bitiş etiketi kullanmaz.
Başlangıç etiketi, içerik, bitiş etiketi olan öğe
html<p>Bu bir paragraf öğesidir.</p>
<h1>Bu bir başlık öğesidir.</h1>Örneği okumak
<p>bir paragraf öğesi açar- Etiketler arasındaki metin içeriktir
</p>paragrafı kapatır- Başlık aynı şekilde
<h1>ve</h1>ile çalışır
İç içe öğeler
Öğeler başka öğelerin içinde yer alabilir. Buna iç içe geçme denir. İç öğe, dış öğe kapanmadan önce tamamen açılıp kapanmalıdır.
İç içe öğeler
html<p>Bu paragraf <strong>önemli</strong> bir sözcük içerir.</p>Burada strong öğesi p öğesinin içine yuvalanmıştır. İç içe geçme, daha büyük içerik parçalarının içinde anlam işaretlemeye yarar. Ağacı temiz tutun: p açıp strong açıp sonra strong’dan önce p kapatarak etiketleri çakıştırmayın.
Boş (void) öğeler
Bazı öğeler içerik sarmaz. Sıkça boş veya void diye adlandırılırlar. Yeni başlayanlar için yaygın örnek satır sonudur:
Boş br öğesi
html<p>Satır bir.<br>Satır iki.</p><br> etiketi satır sonu oluşturur. Ayrı kapanış etiketi ve iç metin yoktur. Sonra görseller gibi başka boş öğelerle karşılaşacaksınız. Şimdilik unutmayın: her öğe başlangıç-içerik-bitiş sandviçi gibi görünmez.
Etiketler ve öğeler
İnsanlar bazen «etiket» ile «öğe»yi aynı sanır. Etiket açılı ayraçlar arasındaki işaretlemedir. Öğe tarayıcının anladığı bütün birimdir — çoğu zaman başlangıç etiketi + içerik + bitiş etiketi. «p öğesi» demek genellikle tüm paragraf birimini kasteder.
Kendiniz deneyin
- Temel HTML dosyanızı açın
- İç içe
strongmetinli bir paragraf ekleyin - İki kısa satır arasında
<br>kullanan ikinci bir paragraf ekleyin - Kaydedin ve tarayıcıyı yenileyin
- Kalın metin ve satır sonunun beklendiği gibi göründüğünü doğrulayın
Sık yapılan hatalar
- İhtiyaç duyan öğelerde kapanış etiketini unutmak
- Temiz iç içe geçme yerine etiketleri çakıştırmak
- Her etiketi içerik ve bitiş etiketi zorunluymuş gibi ele almak (boşlar farklıdır)
- Yanlış kapanış adı, örneğin
</p>ile<h1>eşleştirmek - Görünür sayfa içeriğini
bodydışına koymak
Özet
- Çoğu HTML öğesi başlangıç etiketi, içerik ve bitiş etiketi kullanır
- İç içe öğeler doğru sırada kapanmalıdır
brgibi boş öğeler içerik sarmaz- Etiket ayraçlı işaretçidir; öğe tam birimdir
- Sayfada iç içe geçme ve basit satır sonu pratik yapın
- Etiketlere ek bilgi ekleyen öznitelikler bir sonraki derste gelir
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek