En Çok Kullanılan HTML Etiketleri Nelerdir?

Bu yazının kısa özetini dinleyebilisin.

İçindekiler

HTML öğrenmeye başlamadan önce HTML etiketleri hangileridir bilmek çok önemlidir. Bu yazıda, web sayfalarında sıkça kullanılan <h1> – <h6> başlık etiketleri, <p> paragraf etiketi, <br> satır sonu, <hr> yatay çizgi, <b>, <i>, <strong>, <em> gibi metin biçimlendirme etiketleri hakkında bilgi edineceksiniz. Amaç, hem öğrenme hem de uygulama açısından HTML’nin temel yapı taşlarını anlamak ve web sayfanıza düzenli bir yapı kazandırmaktır.

Etiket Oluşturma Kuralları

HTML etiketlerinin yapısını anlamak, etkili kullanım için şarttır.

Etiketler <etiket> biçiminde açılır, içerik ardından </etiket> ile kapanır.
Kapatılmayacak bazı özel etiketler vardır: örneğin <br>, <hr>, <img> gibi.
Dosyanızın HTML olduğunu tarayıcıya bildirmek için sayfanın en başına <!DOCTYPE html> koyulmalıdır.

Bu kurallar, HTML etiketleri mantığını kavramanızı kolaylaştırır.

`<html>`, `<head>` ve `<body>` Etiketleri

`<html>`

Sayfanın HTML dilinde yazıldığını bildirir. Bu etiketin içine mutlaka <head> ve <body> etiketleri yerleştirilir.

`<head>`

Tarayıcıda doğrudan görünmeyen, ancak sayfa başlığı, karakter seti, stil/link/script gibi meta bilgilerinin yer aldığı bölümdür.
Örnek:

<head>
  <title>Sayfa Başlığı</title>
  <meta charset="UTF-8">
</head>

`<body>`

Ziyaretçilerin sayfada gördüğü tüm içerikler bu bölüm içine yazılır. Başlıklar, paragraflar, görseller vs. hepsi bu alanda yer alır.
Örnek:

<body>
  <h1>Merhaba!</h1>
  <p>Bu paragraf body etiketi içinde yer alır.</p>
</body>

Başlık Etiketleri `<h1>` – `<h6>`

Bu etiketler, sayfa içerisindeki içerikleri “başlık” olarak tanımlar ve hiyerarşik sıraya sahiptir. <h1> en büyük/önemli başlıktır, <h6> ise en küçük alternatifidir.

Neden önemlidir?

Arama motorları için SEO açısından başlık etiketi kullanımı kritik bir sinyaldir.
Kullanıcılar içeriği satırlar yerine mantıksal bloklarla daha kolay kavrarlar.
NLU/NLP sistemleri için: konu bölümleri, alt başlıklarla birlikte daha net anlaşılır.

Örnek:

<h1>Benim Web Sayfam</h1>
<h2>Hakkımda</h2>
<h3>Teknik Bilgiler</h3>

Paragraf Etiketi `<p>`

Text bloklarını paragraflara ayırmak için kullanılır. Web sayfasında okunabilirliği artırır.

Örnek:

<p>Merhaba! Ben web geliştiriciyim ve HTML öğreniyorum.</p>

Tarayıcılar <p> etiketi öncesinde ve sonrasında otomatik satır boşluğu bırakır; bu da içerik akışını daha okunabilir kılar.

Satır Sonu `<br>` & Yatay Çizgi `<hr>`

`<br>`

Satır atlatma, yani yeni satıra geçmek için kullanılır. Kapanış etiketi gerekmez.
Örnek:

<p>HTML öğrenmek<br>web dünyasına ilk adımı atmaktır.</p>

`<hr>`

Sayfa içinde konu değişimleri ya da içerik bölümleri arasında görsel bir ayrım yapmak için yatay çizgi ekler. Kapanış etiketi yoktur.
Örnek:

<p>Bölüm 1 içeriği.</p>
<hr>
<p>Bölüm 2 içeriği.</p>

Metin Biçimlendirme: `<b>`, `<strong>`, `<i>`, `<em>`

`<b>` ve `<strong>`

<b> etiketi: metni kalın yazdırır.
<strong> etiketi: semantik olarak “önemli metin” anlamı taşır, SEO ve erişilebilirlik açısından tercih edilir.
Örnek:

<p><strong>Önemli bilgi:</strong> Güvenlik her zaman önceliklidir.</p>

`<i>` ve `<em>`

<i> etiketi: metni italik yazdırır.
<em> etiketi: semantik olarak “vurgulanan metin” anlamı taşır.

Yorum Satırları ``

HTML kodu içerisinde geliştiriciye özel notlar almak ya da ileride düzenleme yapmak için kullanılır. Tarayıcı tarafından işlenmez, kullanıcıya gösterilmez.
Örnek:

<!-- Kodlarınızı her zaman yorum satırlarıyla destekleyin -->

Diğer Yaygın Etiketler

`<a>` (Link Etiketi)

Bağlantı oluşturmak için kullanılır. href özniteliği ile hedef URL belirtilir.
Örnek:

<a href="https://www.ornek.com">Örnek Site</a>

`<ul>`, `<ol>`, `<li>` (Listeler)

<ul>: sırasız liste
<ol>: sıralı liste
<li>: liste elemanı
Örnek:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

`<img>` (Görsel Etiketi)

Sayfaya resim eklemek için kullanılır. src ile görsel kaynağı, alt ile alternatif açıklama verilir. Kapanış etiketi gerekmez.
Örnek:

<img src="resim.jpg" alt="Örnek resim">

`<iframe>`

Bir sayfa içinde başka bir belgeyi veya video gibi içeriği gömme amacıyla kullanılır.
Örnek:

<iframe width="560" height="315" src="https://www.youtube.com/embed/örnekvideo" frameborder="0" allowfullscreen></iframe>

Örnek Uygulama: Basit Kişisel Tanıtım Sayfası

Tüm öğrendiğimiz etiketleri birleştiren bir örnek:

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tanıtım</title>
</head>

<body>
    <h1>Steve Jobs</h1>
    <hr>
    <h2>Hakkında</h2>
    <p><strong>Steve Jobs</strong>, Apple’ın kurucularından biri olarak teknoloji ve tasarım dünyasında büyük bir etki yaratmıştır.</p>
    <h2>Başarıları</h2>
    <p>Steve Jobs, <em>iPhone</em>, <em>iPad</em> ve <em>Mac</em> gibi ürünlerin geliştirilmesinde öncü olmuştur.<br>Yenilikçi vizyonu ve yaratıcı yaklaşımı ile teknoloji dünyasında iz bırakmıştır.</p>
    <!-- Sosyal medya veya kaynak bağlantıları -->
    <a href="https://en.wikipedia.org/wiki/Steve_Jobs">Daha fazla bilgi</a>
</body>

</html>

HTML etiketleri, başlıklar (<h1>–<h6>), paragraflar (<p>), satır atlama (<br>), yatay çizgi (<hr>), metin biçimlendirme (<b>, <strong>, <i>, <em>), yorum satırları () gibi yapı taşlarını ele aldık.
Ayrıca diğer yaygın etiketler (<a>, <ul>, <ol>, <li>, <img>, <iframe>) ile sayfa içeriğini zenginleştirmenin yollarını öğrendik.
Bu bilgiler hem kullanıcılar için daha okunabilir bir içerik sunmamıza hem de arama motorlarının içeriği daha iyi anlamasına olanak tanır.
Artık kendi proje ve sayfalarınızda bu etiketleri bilinçli bir şekilde kullanarak, hem yapısal anlamda sağlam hem içerik açısından optimize edilmiş bir HTML temeli oluşturabilirsiniz.

Etiketler: HTML HTML Etiketleri

Paylaş:

Tayyip Bölük

Merhaba, ben Tayyip Bölük. Profesyonel bir yazılım geliştiricisi olarak, özellikle PHP tabanlı web projeleri geliştirme konusunda uzmanlaşmış durumdayım. Yazılım dünyasındaki yolculuğuma, yaratıcı çözümler üreterek ve kullanıcı odaklı projeler geliştirerek devam ediyorum.Blog sitemde yazılım ve teknolojiye dair güncel bilgileri, yenilikleri ve ipuçlarını paylaşıyorum. Amacım, yazılım dünyasına ilgi duyan herkese faydalı içerikler sunarak bilgi birikimimi paylaşmak ve sektörel gelişmelere ışık tutmak.PHP’nin yanı sıra, React, Bootstrap, Tailwind, Jquery gibi modern araçları kullanarak dinamik, kullanıcı dostu ve performanslı web siteleri geliştirme üzerine çalışıyorum. Ayrıca, öğretmenlere ve öğrencilere yönelik inovatif projeler geliştirme konusundaki tutkum sayesinde, eğitim ve yazılımı birleştiren projeler üretmeyi hedefliyorum.Eğer siz de yazılım ve teknoloji konularına ilgi duyuyorsanız, bloğumda sizin için ilham kaynağı olabilecek içerikler bulabilirsiniz.