HTML Dersleri 2 – HTML Elementler Nedir, Nasıl Kullanılır?

Bu ders, HTML’de elementlerin mantığını, yapısını ve kullanım biçimlerini sade ve örneklerle anlaşılır şekilde açıklar. HTML elementlerin ne olduğunu, nasıl yazıldığını ve sayfa yapısında nasıl yer aldığını öğrenerek web sayfası kodlama temelinizi güçlendireceksiniz.

HTML Dersleri 2 – HTML Elementler Nedir, Nasıl Kullanılır?
HTML Elementler Nedir

HTML Elementler Nedir?

HTML derslerine devam ederken bu bölümde HTML elementler konusuna odaklanıyoruz. Bir web sayfasındaki tüm içerikler HTML elementlerden oluşur. HTML element, tarayıcıya “bu bölüm nedir ve nasıl gösterilsin” bilgisini veren yapı birimidir.

Bir HTML elementinin temel yapısı şudur:

Örnek:

<p>Bu bir paragraftır.</p>

Bu örnekte <p> açılış etiketi, “Bu bir paragraftır.” içerik ve </p> kapanış etiketi HTML elementini oluşturur.


Elementlerin Yapısı ve Kullanımı

HTML elementlerinde dikkat edilmesi gereken temel noktalar:

  • Etiketler < ve > işaretleri arasında yazılır

  • Çoğu element açılış ve kapanış etiketine sahiptir

  • Bazı elementlerin içerikleri yoktur ve kapanış etiketi olmaz cilginyazilim.com

Örnek boş element:

<br>

<br> etiketi yeni satır oluşturur ve içeriğe ihtiyaç duymaz.


İç İçe HTML Elementler (Nested Elements)

HTML’de elementler birbirlerinin içine yerleştirilebilir. Bu sayede sayfanın yapısı hiyerarşik ve düzenli olur. İç içe element yapısına “parent (ebeveyn)” ve “child (çocuk)” ilişkisi denir 1Kodum.

Örnek:

<html>
  <body>
    <h1>Başlık</h1>
    <p>Paragraf</p>
  </body>
</html>

Yukarıdaki yapıda:

  • <html> en dış element

  • <body> onun içinde yer alan element

  • <h1> ve <p> içerik gösteren elementlerdir


HTML Element Çeşitleri

HTML elementler farklı görevlere sahiptir. Öne çıkan türler:

Metin Yapılandırma Elementleri

Web sayfasındaki yazıları düzenlemek için kullanılır:

  • <h1><h6> → Başlıklar

  • <p> → Paragraf

  • <strong> → Vurgu

  • <em> → Vurgulu metin cilginyazilim.com

Boş (Empty) Elementler

İçeriğe gerek duymayan elementlerdir:


Element Yazım Kuralları

HTML element yazarken dikkat edilmesi gereken bazı kurallar:

  • Etiketler büyük/küçük harf duyarlı değildir

  • Modern standart kullanımda küçük harf önerilir

  • Tüm açılış etiketlerinin eşleşen kapanış etiketi olmalıdır

  • Boş elementler doğru şekilde yazılmalıdır cilginyazilim.com


Elementler ile Basit Web Sayfası Örneği

Aşağıda HTML elementlerin farklı şekillerde nasıl kullanıldığını gösteren örnek bir HTML yapısı verilmiştir:


<!DOCTYPE html>
<html>
  <head>
    <title>Örnek Sayfa</title>
  </head>
  <body>
    <h1>Hoş Geldiniz!</h1>
    <p>Bu sayfa, HTML element örnekleri içerir.</p>
    <br>
    <p><strong>Dikkat:</strong> Etiket yapısını anlamak önemlidir!</p>
  </body>
</html>

Bu örnekte:

  • <title> sayfanın başlığını tanımlar

  • <h1> ana başlığı belirtir

  • <p> paragrafları oluşturur

  • <br> satır boşluğu sağlar


HTML Elementlerin Önemi

HTML elementler, sadece tarayıcıda içerik göstermenin ötesinde sayfanın anlamını da tanımlar. Arama motorları sayfanın yapısını HTML elementler üzerinden analiz eder. Bu yüzden doğru etiket kullanımı hem erişilebilirlik hem de SEO performansı açısından önemlidir.

HTML elementlerin ne olduğunu, nasıl çalıştığını ve sayfa yapısında nasıl kullanıldığını öğrendikten sonra artık bir sonraki temel adıma geçebiliriz. HTML elementleri oluşturan yapı taşlarının başında etiketler gelir. Etiketlerin nasıl yazıldığını, hangi amaçla kullanıldığını ve sayfa yapısına nasıl etki ettiğini detaylı şekilde öğrenmek için bir sonraki ders olan HTML Etiketler konusuna geçebilirsin.

? HTML Dersleri 3 – Etiketler
https://cilginyazilim.com/html-dersleri-3-etiketler