HTML Etiketler - Kod Kampüsü

Trang chủ » Html S Etiketi » HTML Etiketler - Kod Kampüsü

Có thể bạn quan tâm

HTML, modern web tasarımının temel taşıdır ve web sayfalarının yapılandırılmasında en kritik rolü oynar. Bu rehberde, HTML etiketlerinin temel özelliklerini, kullanım alanlarını ve ipuçlarını detaylı bir şekilde inceleyeceğiz. HTML öğrenmek isteyenler veya HTML etiketleri konusunda bilgilerini derinleştirmek isteyenler için bu yazı rehber niteliğinde olacaktır.

HTML etiketler, web tarayıcılarına içeriklerin nasıl görüntüleneceğini belirtir. HTML etiketler genellikle <etiket> biçiminde başlar ve </etiket> ile sonlandırılır.

Konu Başlıkları

Toggle
  • Temel HTML İskeleti
    • <html> Etiketi
    • <head> Etiketi
    • <title> Etiketi
    • <body> Etiketi
    • <footer> Etiketi
    • <style> Etiketi
    • <script> Etiketi
    • <link> Etiketi
    • <main> Etiketi
    • <section> Etiketi
    • <article> Etiketi
    • <aside> Etiketi
    • <nav> Etiketi
    • <meta> Etiketi
    • <table> Etiketi
    • <form> Etiketi
    • <iframe> Etiketi
    • <embed> Etiketi
    • <object> Etiketi
    • <h1> – <h6> Etiketleri
    • <p> Etiketi
    • <br> Etiketi
    • <hr> Etiketi
    • <b> Etiketi (Kalın Metin Etiketi)
    • <strong> Etiketi
    • <i> Etiketi
    • <em> Etiketi
    • <u> Etiketi
    • <small> Etiketi
    • <sup> ve <sub> Etiketleri
    • <pre> Etiketi
    • <blockquote> Etiketi
    • <cite> Etiketi
    • <code> Etiketi
    • <span> Etiketi
    • <mark> Etiketi
    • <del> Etiketi
    • <ins> Etiketi
    • <abbr> Etiketi
    • <address> Etiketi
    • <bdi> Etiketi
    • <bdo> Etiketi
    • <q> Etiketi
    • <time> Etiketi
    • <s> Etiketi
    • <var> Etiketi
    • <kbd> Etiketi
    • <samp> Etiketi
    • <details> Etiketi
    • <ruby>, <rt>, <rp> Etiketleri
  • Temel HTML İskeleti
    • <html> Etiketi
    • <head> Etiketi
    • <title> Etiketi
    • <meta> Etiketi
    • <body> Etiketi
  • Bölümleme ve Anlamsal (Semantic) Etiketler
    • <header> Etiketi
    • <nav> Etiketi
    • <main> Etiketi
    • <section> Etiketi
    • <article> Etiketi
    • <aside> Etiketi
    • <footer> Etiketi
    • <div> ve <span> Etiketleri
  • Metin Biçimlendirme Etiketleri
    • <h1> – <h6> Başlık Etiketleri
    • <p>, <br> ve <hr> Etiketleri
    • Vurgu ve Stil Etiketleri (<strong>, <em>, <b>, <i>, <u>)
    • Alıntı, Alt/Üst Simge ve Kısaltmalar
    • Kod ve Bilgisayar Çıktıları
  • Bağlantılar ve Listeler
    • <a> Etiketi (Link/Bağlantı)
    • Liste Etiketleri (<ul>, <ol>, <li>, <dl>)
  • Medya ve Gömülü İçerikler
    • <img> Etiketi (Resim)
    • <figure> ve <figcaption> Etiketleri
    • <video> ve <audio> Etiketleri
    • Gömme Etiketleri (<iframe>, <embed>, <object>)
  • Tablo ve Form İşlemleri
    • <table> Etiketi (Tablolar)
    • <form> ve Girdi Etiketleri
  • Etkileşimli (Interactive) Etiketler
    • <details> ve <summary> Etiketleri
    • <progress> ve <meter> Etiketleri
    • <dialog> Etiketi
  • Dahil Etme (Bağlama) Etiketleri
    • <style>, <link> ve <script>

Temel HTML İskeleti

Bir HTML sayfasının temel yapısı şu şekildedir:

<html> <head> <title>Sayfa Başlığı</title> </head> <body> <p>Bu bir örnek HTML iskeletidir.</p> </body> <footer> <p>Copyright © 2025</p> </footer> </html>
1234567891011<html><head><title>Sayfa Başlığı</title></head><body><p>Bu bir örnek HTML iskeletidir.</p></body><footer><p>Copyright © 2025</p></footer></html>

<html> Etiketi

<html lang="tr"> <!-- HTML kodlarının tamamı buraya yazılır --> </html>
123<html lang="tr"><!-- HTML kodlarının tamamı buraya yazılır --></html>
  • <html> etiketi, bir HTML dokümanının en dış kapsayıcı etiketidir.
  • Tarayıcı, bu etiketin içindekileri yorumlar ve ekrana yansıtır.

<head> Etiketi

<head> <!-- Meta bilgiler, başlık, CSS ve JavaScript dosyaları buraya eklenir --> </head>
123<head><!-- Meta bilgiler, başlık, CSS ve JavaScript dosyaları buraya eklenir --></head>
  • Sayfanın görünmeyen ancak önemli olan bilgilerinin bulunduğu kısımdır.
  • Bu etikette <title>, <meta>, <link> ve <script> gibi diğer etiketler kullanılır.

<title> Etiketi

<title>Sayfa Başlığı</title>
1<title>Sayfa Başlığı</title>
  • Web sayfasının başlığını belirler.
  • Tarayıcı sekmesinde görüntülenir.

<body> Etiketi

<body> <!-- Kullanıcıya gösterilecek içerikler buraya yazılır --> </body>
123<body><!-- Kullanıcıya gösterilecek içerikler buraya yazılır --></body>
  • Web sayfasında görünen tüm içeriklerin bulunduğu bölümdür.
  • Metinler, resimler, videolar, listeler, tablolar gibi tüm öğeler burada yer alır.

<footer> Etiketi

<footer> <p>Copyright © 2025</p> </footer>
123<footer><p>Copyright © 2025</p></footer>
  • Sayfa veya bölümün alt kısmını tanımlar.
  • Genellikle telif hakkı bilgileri veya iletişim bilgileri içerir.

<style> Etiketi

<style> body { background-color: lightblue; } h1 { color: darkblue; text-align: center; } </style>
123456789<style>body {background-color:lightblue;}h1 {color:darkblue;text-align:center;}</style>
  • HTML dosyasının içine CSS kodları eklemek için kullanılır.
  • <style> etiketi genellikle <head> bölümünde yer alır ve bir sayfanın görünümünü düzenlemek için kullanılır.

<script> Etiketi

<script> echo('Merhaba Dünya!'); </script>
123<script>echo('Merhaba Dünya!');</script>
  • Web sayfasına JavaScript eklemek için kullanılır.
  • Dinamik işlemler (örneğin bir butona tıklandığında bir mesaj gösterme) için idealdir.
  • <script> etiketi hem <head> bölümünde hem de <body> içinde kullanılabilir.

<link> Etiketi

<link rel="stylesheet" href="styles.css">
1<link rel="stylesheet"href="styles.css">
  • Harici kaynakları (örneğin CSS dosyaları) HTML’e bağlar.
  • rel özelliği, bağlantının türünü belirtir.

<main> Etiketi

<main> <h2>Öne Çıkan Yazı</h2> <p>Bu bölüm, ana içeriği temsil eder.</p> </main>
1234<main><h2>Öne Çıkan Yazı</h2><p>Bu bölüm, ana içeriği temsil eder.</p></main>
  • Sayfanın ana içeriğini tanımlar.
  • Birden fazla <main> etiketi kullanılmaz.

<section> Etiketi

<section> <h2>Hakkımızda</h2> <p>Şirketimiz 2024 yılında kurulmuştur.</p> </section>
1234<section><h2>Hakkımızda</h2><p>Şirketimiz 2024 yılında kurulmuştur.</p></section>
  • Tematik bir içerik grubunu tanımlar.
  • Her <section> belirli bir bölümü temsil eder.

<article> Etiketi

<article> <h2>Son Blog Yazısı</h2> <p>Bu bir blog yazısı örneğidir.</p> </article>
1234<article><h2>Son Blog Yazısı</h2><p>Bu bir blog yazısı örneğidir.</p></article>
  • Bağımsız, kendi başına anlam ifade eden içerikleri temsil eder.
  • Örneğin blog yazıları veya haber makaleleri için idealdir.

<aside> Etiketi

<aside> <h3>Yan Bilgi</h3> <p>Bu bölüm ek bilgiler içindir.</p> </aside>
1234<aside><h3>Yan Bilgi</h3><p>Bubölümek bilgileriçindir.</p></aside>
  • Ana içeriğe ek bilgiler sağlar.
  • Genellikle bir kenar çubuğu olarak kullanılır.

<nav> Etiketi

<nav> <ul> <li><a href="#ana">Ana Sayfa</a></li> <li><a href="#iletisim">İletişim</a></li> </ul> </nav>
123456<nav><ul><li><a href="#ana">Ana Sayfa</a></li><li><a href="#iletisim">İletişim</a></li></ul></nav>
  • Gezinme bağlantıları grubu oluşturur.

<meta> Etiketi

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Web sayfası açıklaması"> <meta name="author" content="Kodkampusu">
1234<meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><meta name="description"content="Web sayfası açıklaması"><meta name="author"content="Kodkampusu">
  • Meta veriler sağlar.
  • charset: Sayfanın karakter setini belirtir. (UTF-8 en yaygın olanıdır.)
  • name ve content: Arama motorları ve tarayıcılar için bilgi sağlar (örneğin, açıklama, yazar bilgisi).
  • viewport: Sayfanın mobil cihazlarda nasıl görüntüleneceğini ayarlar.

<table> Etiketi

<table border="1"> <tr> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> </tr> <tr> <td>Ali</td> <td>Yılmaz</td> <td>25</td> </tr> </table>
123456789101112<table border="1"><tr><th>Ad</th><th>Soyad</th><th>Yaş</th></tr><tr><td>Ali</td><td>Yılmaz</td><td>25</td></tr></table>
  • Tablo oluşturmak için kullanılır.
  • border özelliği, tabloya kenarlık ekler.
  • İçinde <tr> (satır), <th> (başlık hücresi), <td> (hücre) etiketleri bulunur.

<form> Etiketi

<form action="/submit" method="post"> <label for="isim">İsim:</label> <input type="text" id="isim" name="isim"> <button type="submit">Gönder</button> </form>
12345<form action="/submit"method="post"><label for="isim">İsim:</label><input type="text"id="isim"name="isim"><button type="submit">Gönder</button></form>
  • Kullanıcıdan veri almak için form alanı oluşturur.
  • action özelliği, verinin gönderileceği adresi belirtir.
  • method özelliği, HTTP metodunu belirler (GET veya POST).

<iframe> Etiketi

<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen></iframe>
1<iframe src="https://www.youtube.com/embed/VIDEO_ID"width="560"height="315"frameborder="0"allowfullscreen></iframe>
  • Bir başka HTML sayfasını veya içeriği mevcut sayfaya gömer.
  • src: Gömülecek içeriğin URL’sini belirtir.
  • allowfullscreen: Videolar için tam ekran özelliğini etkinleştirir.

<embed> Etiketi

<embed src="dosya.pdf" width="600" height="400" type="application/pdf">
1<embed src="dosya.pdf"width="600"height="400"type="application/pdf">
  • Harici bir kaynağı (örneğin, bir PDF dosyası veya medya) gömer.
  • src: Kaynak dosyasının yolunu belirtir.
  • type: Kaynağın türünü tanımlar (örneğin, application/pdf).

<object> Etiketi

<object data="animasyon.swf" width="400" height="300"></object>
1<object data="animasyon.swf"width="400"height="300"></object>
  • Harici bir kaynağı (örneğin, Flash animasyonu) gömer.
  • data: Kaynağın yolunu belirtir.
  • type: İçeriğin türünü tanımlar.

<h1> – <h6> Etiketleri

<h1>Başlık 1</h1> <h2>Başlık 2</h2> <h3>Başlık 3</h3> <h4>Başlık 4</h4> <h5>Başlık 5</h5> <h6>Başlık 6</h6>
123456<h1>Başlık 1</h1><h2>Başlık 2</h2><h3>Başlık 3</h3><h4>Başlık 4</h4><h5>Başlık 5</h5><h6>Başlık 6</h6>
  • <h1>: En büyük ve en önemli başlık.
  • <h6>: En küçük ve en az önemli başlık.
  • Başlık etiketleri, içeriği hiyerarşik bir yapıya oturtmak için kullanılır.

<p> Etiketi

<p>Bu bir paragraf örneğidir. HTML öğrenmek oldukça eğlencelidir!</p>
1<p>Bu bir paragraf örneğidir. HTML öğrenmek oldukça eğlencelidir!</p>
  • Bir paragraf metni oluşturur.
  • <p> etiketleri arasında boşluklar, satır başı ve hizalama otomatik olarak eklenir.
  • Paragraflar, metni düzenlemek ve okunabilirliği artırmak için kullanılır.

<br> Etiketi

Birinci satır<br>İkinci satır
1Birincisatır<br>İkincisatır
  • Metinde bir satır sonu oluşturur.
  • <br> tek başına bir etikettir ve kapanış etiketi yoktur.

<hr> Etiketi

<p>Birinci paragraf</p> <hr> <p>İkinci paragraf</p>
123<p>Birinci paragraf</p><hr><p>İkinci paragraf</p>
  • İçerik arasında yatay bir çizgi ekler.
  • Bölümleri görsel olarak ayırmak için kullanılır.
  • Çizginin kalınlığı ve rengi CSS ile düzenlenebilir.

<b> Etiketi (Kalın Metin Etiketi)

<p>Bu metin <b>kalın</b> yazılmıştır.</p>
1<p>Bu metin <b>kalın</b> yazılmıştır.</p>
  • Metni kalın yapar.
  • Anlam veya vurgu olmadan sadece görsel olarak kalınlık sağlar.

<strong> Etiketi

<p>Bu metin <strong>önemli</strong> bir bilgiyi vurgular.</p>
1<p>Bu metin <strong>önemli</strong> bir bilgiyi vurgular.</p>
  • Metni kalın yapar ve vurgulu olduğunu belirtir.
  • Arama motorları bu etiketi, metnin önemli olduğu şeklinde algılar.

<i> Etiketi

<p>Bu metin <i>italik</i> olarak yazılmıştır.</p>
1<p>Bu metin <i>italik</i> olarak yazılmıştır.</p>
  • Metni eğik yazı (italik) yapar.
  • Genellikle yabancı kelimeler, düşünceler veya vurgular için kullanılır.

<em> Etiketi

<p>Bu metin <em>önemli</em> bir vurguyu ifade eder.</p>
1<p>Bu metin <em>önemli</em> bir vurguyu ifade eder.</p>
  • Metni italik yapar ve anlamına vurgu ekler.
  • Ekran okuyucular genellikle bu metni vurgulu bir şekilde okur.

<u> Etiketi

<p>Bu metin <u>altı çizili</u> bir örnektir.</p>
1<p>Bu metin <u>altı çizili</u> bir örnektir.</p>
  • Metnin altını çizer.
  • Altı çizili metin genellikle bağlantı metni ile karıştırılmamalıdır.

<small> Etiketi

<p>Bu metin <small>küçük</small> boyutta yazılmıştır.</p>
1<p>Bu metin <small>küçük</small> boyutta yazılmıştır.</p>
  • Metni daha küçük bir yazı tipiyle gösterir.
  • Dipnotlar veya önemsiz bilgiler için kullanılabilir.

<sup> ve <sub> Etiketleri

<p>Üst simge örneği: 10<sup>2</sup></p> <p>Alt simge örneği: H<sub>2</sub>O</p>
12<p>Üst simge örneği: 10<sup>2</sup></p><p>Alt simge örneği: H<sub>2</sub>O</p>
  • <sup>: Metni üst simgeye taşır (örneğin, üst indisli ifadeler).
  • <sub>: Metni alt simgeye taşır (örneğin, kimyasal formüller).

<pre> Etiketi

<pre> Bu metin önceden biçimlendirilmiştir. </pre>
1234<pre>Bu metinönceden biçimlendirilmiştir.</pre>
  • Metni olduğu gibi (boşluklar, satır başları dahil) gösterir.
  • Kod parçaları veya sabit genişlikte metinler için kullanılır.

<blockquote> Etiketi

<blockquote cite="https://example.com"> Bu bir alıntı metindir. </blockquote>
123<blockquote cite="https://example.com">Bu bir alıntı metindir.</blockquote>
  • Uzun alıntılar için kullanılır.
  • cite: Alıntının kaynağını belirtir (isteğe bağlıdır).

<cite> Etiketi

<p>Bu ifade <cite>HTML Belgesi</cite> adlı bir kaynaktan alınmıştır.</p>
1<p>Bu ifade <cite>HTML Belgesi</cite> adlı bir kaynaktan alınmıştır.</p>
  • Bir kaynağı, başlığı veya eseri belirtmek için kullanılır.
  • Metni genellikle italik olarak gösterir.

<code> Etiketi

<p>Bir Python örneği: <code>print("Merhaba Dünya")</code></p>
1<p>Bir Python örneği: <code>print("Merhaba Dünya")</code></p>
  • Kod parçalarını göstermek için kullanılır.
  • Sabit genişlikte yazı tipi ile görüntülenir.

<span> Etiketi

<p>Bu metnin <span style="color:red;">kırmızı</span> kısmı.</p>
1<p>Bu metnin <span style="color:red;">kırmızı</span> kısmı.</p>
  • Belirli bir metin parçasını gruplamak veya biçimlendirmek için kullanılır.
  • <div>‘in satır içi karşılığıdır.

<mark> Etiketi

<p>Bu bir <mark>vurgulanmış</mark> metin örneğidir.</p>
1<p>Bu bir <mark>vurgulanmış</mark> metin örneğidir.</p>
  • Metni vurgular ve sarı arka plan ile işaretler.
  • Önemli veya dikkat çekmesi gereken metinleri belirtmek için kullanılır.

<del> Etiketi

<p>Bu metin <del>geçersiz</del> kabul edilmiştir.</p>
1<p>Bu metin <del>geçersiz</del> kabul edilmiştir.</p>
  • Metni üzeri çizili şekilde gösterir.
  • Eski, iptal edilmiş veya silinmiş içerikler için kullanılır.

<ins> Etiketi

<p>Bu metin <ins>eklenmiştir</ins>.</p>
1<p>Bu metin <ins>eklenmiştir</ins>.</p>
  • Metni altı çizili şekilde gösterir ve yeni eklenmiş olduğunu belirtir.
  • <del> etiketiyle birlikte değişiklik göstermek için kullanılabilir.

<abbr> Etiketi

<p><abbr title="HyperText Markup Language">HTML</abbr> öğrenmek faydalıdır.</p>
1<p><abbr title="HyperText Markup Language">HTML</abbr> öğrenmek faydalıdır.</p>
  • Kısaltmaların tam anlamını belirtmek için kullanılır.
  • title özelliği, üzerine gelindiğinde tam metni gösterir.

<address> Etiketi

<address> Yazar: Oktay Ala<br> E-posta: <a href="mailto:[email protected]">[email protected]</a> </address>
1234<address>Yazar:Oktay Ala<br>E-posta:<ahref="mailto:[email protected]">oktay@example.com</a></address>
  • İletişim bilgilerini belirtir.
  • Genellikle yazar adı, e-posta, adres gibi bilgiler için kullanılır.

<bdi> Etiketi

<p>Bu metin: <bdi>مثال</bdi> sağdan sola yazılmıştır.</p>
1<p>Bu metin: <bdi>مثال</bdi> sağdan sola yazılmıştır.</p>
  • Metnin yönünü belirler.
  • Sağdan sola veya soldan sağa yazı yazıldığında metin akışını bozmadan görüntüler.

<bdo> Etiketi

<p><bdo dir="rtl">Bu metin sağdan sola yazılmıştır.</bdo></p>
1<p><bdo dir="rtl">Bu metin sağdan sola yazılmıştır.</bdo></p>
  • Metin yönünü sağdan sola (rtl) veya soldan sağa (ltr) değiştirmek için kullanılır.

<q> Etiketi

<p><q>HTML öğrenmek harikadır!</q></p>
1<p><q>HTML öğrenmek harikadır!</q></p>
  • Kısa alıntılar için kullanılır.
  • Tarayıcılar, alıntıyı otomatik olarak çift tırnak içinde gösterir.

<time> Etiketi

<p>Etkinlik tarihi: <time datetime="2024-12-10">10 Aralık 2024</time></p>
1<p>Etkinlik tarihi: <time datetime="2024-12-10">10 Aralık 2024</time></p>
  • Tarih ve saatleri belirtir.
  • datetime özelliği, makine tarafından okunabilir tarih formatı sağlar.

<s> Etiketi

<p>Bu metin <s>artık geçersiz</s> kabul edilmektedir.</p>
1<p>Bu metin <s>artık geçersiz</s> kabul edilmektedir.</p>
  • Metni üzeri çizili şekilde gösterir ve artık geçersiz olduğunu belirtir.
  • Genellikle fiyat değişikliklerinde veya eski bilgilerde kullanılır.

<var> Etiketi

<p>Formül: <var>x</var> = <var>y</var> + 2</p>
1<p>Formül: <var>x</var> = <var>y</var> + 2</p>
  • Matematiksel ifadelerde veya kodlarda değişkenleri belirtmek için kullanılır.
  • Metni genellikle italik olarak gösterir.

<kbd> Etiketi

<p>Klavye kısayolu: <kbd>Ctrl + C</kbd></p>
1<p>Klavye kısayolu: <kbd>Ctrl + C</kbd></p>
  • Klavye girdilerini göstermek için kullanılır.
  • Sabit genişlikte yazı tipi ile görüntülenir.

<samp> Etiketi

<p>Program çıktısı: <samp>Merhaba Dünya!</samp></p>
1<p>Program çıktısı: <samp>Merhaba Dünya!</samp></p>
  • Program veya komut çıktısını göstermek için kullanılır.

<details> Etiketi

<details> <summary>Detayları göster</summary> Bu metin detaylara tıklandığında görünür. </details>
1234<details><summary>Detaylarıgöster</summary>Bu metin detaylaratıklandığındagörünür.</details>
  • Açılır kapanır bölümler oluşturur.
  • <summary> etiketi, başlığı belirtir.

<ruby>, <rt>, <rp> Etiketleri

<ruby> 漢 <rt>Kanji</rt> </ruby>
123<ruby>漢 <rt>Kanji</rt></ruby>
  • <ruby>: Fonetik rehber içerir.
  • <rt>: Fonetik açıklama.
  • <rp>: Eski tarayıcılar için alternatif içerik sağlar.

HTML, modern web tasarımının temel taşıdır ve web sayfalarının yapılandırılmasında en kritik rolü oynar. Bu rehberde, HTML etiketlerinin temel özelliklerini, kullanım alanlarını ve ipuçlarını detaylı bir şekilde inceleyeceğiz. HTML öğrenmek isteyenler veya HTML etiketleri konusunda bilgilerini derinleştirmek isteyenler için bu yazı tam bir başucu kaynağı niteliğinde olacaktır.

HTML etiketleri, web tarayıcılarına içeriklerin nasıl görüntüleneceğini belirtir. HTML etiketleri genellikle <etiket> biçiminde başlar ve </etiket> ile sonlandırılır.

Temel HTML İskeleti

Bir HTML sayfasının temel yapısı şu şekildedir:

<html> <head> <title>Sayfa Başlığı</title> </head> <body> <header> <h1>Ana Başlık</h1> </header> <main> <p>Bu bir örnek HTML iskeletidir.</p> </main> <footer> <p>Copyright © 2025</p> </footer> </body> </html>
12345678910111213141516<html><head><title>Sayfa Başlığı</title></head><body><header><h1>Ana Başlık</h1></header><main><p>Bu bir örnek HTML iskeletidir.</p></main><footer><p>Copyright © 2025</p></footer></body></html>

<html> Etiketi

<html lang="tr"> <!-- HTML kodlarının tamamı buraya yazılır --> </html>
123<html lang="tr"><!-- HTML kodlarının tamamı buraya yazılır --></html>
  • <html> etiketi, bir HTML dokümanının en dış kapsayıcı etiketidir.
  • Tarayıcı, bu etiketin içindekileri yorumlar ve ekrana yansıtır. lang özelliği sayfa dilini belirtir.

<head> Etiketi

<head> <!-- Meta bilgiler, başlık, CSS ve JavaScript dosyaları buraya eklenir --> </head>
123<head><!-- Meta bilgiler, başlık, CSS ve JavaScript dosyaları buraya eklenir --></head>
  • Sayfanın görünmeyen ancak önemli olan bilgilerinin (meta verilerin) bulunduğu kısımdır.
  • Bu etikette <title>, <meta>, <link> ve <style> gibi etiketler kullanılır.

<title> Etiketi

<title>Harika Web Sayfam</title>
1<title>Harika Web Sayfam</title>
  • Web sayfasının başlığını belirler.
  • Tarayıcı sekmesinde görüntülenir ve SEO (Arama Motoru Optimizasyonu) için kritik öneme sahiptir.

<meta> Etiketi

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Kapsamlı HTML Rehberi"> <meta name="author" content="Kodkampusu">
1234<meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><meta name="description"content="Kapsamlı HTML Rehberi"><meta name="author"content="Kodkampusu">
  • Meta veriler sağlar. Kapanış etiketi yoktur.
  • charset: Sayfanın karakter setini belirtir (UTF-8 en yaygın olanıdır).
  • viewport: Sayfanın mobil cihazlarda nasıl ölçekleneceğini (duyarlı tasarım) ayarlar.

<body> Etiketi

<body> <!-- Kullanıcıya gösterilecek içerikler buraya yazılır --> </body>
123<body><!-- Kullanıcıya gösterilecek içerikler buraya yazılır --></body>
  • Web sayfasında görünen tüm içeriklerin bulunduğu, sayfanın gövdesidir.
  • Metinler, resimler, listeler, tablolar gibi görsel tüm öğeler burada yer alır.

Bölümleme ve Anlamsal (Semantic) Etiketler

<header> Etiketi

<header> <h1>Web Siteme Hoş Geldiniz</h1> <p>En güncel yazılım makaleleri.</p> </header>
1234<header><h1>Web Siteme Hoş Geldiniz</h1><p>En güncel yazılım makaleleri.</p></header>
  • Sayfanın veya bir bölümün başlık (üst) kısmını temsil eder.
  • Genellikle logolar, ana başlıklar veya arama çubukları içerir.

<nav> Etiketi

<nav> <ul> <li><a href="#ana">Ana Sayfa</a></li> <li><a href="#hakkimizda">Hakkımızda</a></li> </ul> </nav>
123456<nav><ul><li><a href="#ana">Ana Sayfa</a></li><li><a href="#hakkimizda">Hakkımızda</a></li></ul></nav>
  • Ana gezinme (menü) bağlantıları grubunu oluşturur.

<main> Etiketi

<main> <h2>Günün İçeriği</h2> <p>Bu bölüm, sayfanın asıl odak noktasını temsil eder.</p> </main>
1234<main><h2>Günün İçeriği</h2><p>Bu bölüm, sayfanın asıl odak noktasını temsil eder.</p></main>
  • Sayfanın birincil (ana) içeriğini tanımlar.
  • Bir HTML dokümanında sadece bir tane <main> bulunmalıdır.

<section> Etiketi

<section> <h2>Hizmetlerimiz</h2> <p>Web tasarım ve danışmanlık hizmetleri.</p> </section>
1234<section><h2>Hizmetlerimiz</h2><p>Web tasarım ve danışmanlık hizmetleri.</p></section>
  • Tematik bir içerik grubunu tanımlar. Birbirleriyle ilişkili konuları gruplamak için idealdir.

<article> Etiketi

<article> <h2>Son Blog Yazısı</h2> <p>Bu bir blog yazısı örneğidir.</p> </article>
1234<article><h2>Son Blog Yazısı</h2><p>Bu bir blog yazısı örneğidir.</p></article>
  • Bağımsız, kendi başına anlam ifade eden, tek başına dağıtılabilecek içerikleri temsil eder (Blog yazısı, haber vb.).

<aside> Etiketi

<aside> <h3>Bunu Biliyor muydunuz?</h3> <p>HTML, 1991 yılında Tim Berners-Lee tarafından icat edilmiştir.</p> </aside>
1234<aside><h3>Bunu Biliyor muydunuz?</h3><p>HTML, 1991 yılında Tim Berners-Lee tarafından icat edilmiştir.</p></aside>
  • Ana içeriğe ek, dolaylı olarak bağlantılı bilgileri (kenar çubuğu, reklamlar, yazar notları) temsil eder.

<footer> Etiketi

<footer> <p>Copyright © 2025 | Tüm Hakları Saklıdır.</p> </footer>
123<footer><p>Copyright © 2025 | Tüm Hakları Saklıdır.</p></footer>
  • Sayfanın veya ilgili bölümün alt kısmını tanımlar. Telif hakları, iletişim ve sosyal medya linkleri barındırır.

<div> ve <span> Etiketleri

<div class="kutu"> <p>Bu blok düzeyinde bir <span style="color:red;">satır içi</span> elemandır.</p> </div>
123<div class="kutu"><p>Bu blok düzeyinde bir <span style="color:red;">satır içi</span> elemandır.</p></div>
  • <div>: Blok düzeyinde bir kapsayıcıdır. CSS ile bölümleri şekillendirmek için en sık kullanılan etikettir.
  • <span>: Satır içi (inline) bir kapsayıcıdır. Metin içindeki ufak bir parçayı renklendirmek veya seçmek için kullanılır.

Metin Biçimlendirme Etiketleri

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

<h1>Ana Başlık (SEO için çok önemli)</h1> <h2>Alt Başlık 1</h2> <h3>Alt Başlık 2</h3> <h6>En Küçük Başlık</h6>
1234<h1>Ana Başlık (SEO için çok önemli)</h1><h2>Alt Başlık 1</h2><h3>Alt Başlık 2</h3><h6>En Küçük Başlık</h6>
  • Hiyerarşik başlıkları tanımlar. <h1> en büyük ve en önemli başlıktır, sayfada bir kez kullanılması önerilir.

<p>, <br> ve <hr> Etiketleri

<p>Bu bir paragraftır.</p> <p>Bu paragrafın tam ortasından<br>alt satıra inebiliriz.</p> <hr> <p>Bu paragrafın üstünde yatay bir çizgi var.</p>
1234<p>Bu bir paragraftır.</p><p>Bu paragrafın tam ortasından<br>alt satıra inebiliriz.</p><hr><p>Bu paragrafın üstünde yatay bir çizgi var.</p>
  • <p>: Paragraf oluşturur.
  • <br>: Alt satıra geçirir (Kapanış etiketi yoktur).
  • <hr>: Konu değişimini gösteren yatay bir çizgi çizer.

Vurgu ve Stil Etiketleri (<strong>, <em>, <b>, <i>, <u>)

<p>Normal metin.</p> <p><strong>Önemli</strong> ve <b>Kalın</b> metin.</p> <p><em>Vurgulu</em> ve <i>İtalik</i> metin.</p> <p><u>Altı çizili</u> metin.</p> <p><mark>Sarı ile işaretlenmiş</mark> metin.</p>
12345<p>Normal metin.</p><p><strong>Önemli</strong> ve <b>Kalın</b> metin.</p><p><em>Vurgulu</em> ve <i>İtalik</i> metin.</p><p><u>Altı çizili</u> metin.</p><p><mark>Sarı ile işaretlenmiş</mark> metin.</p>
  • <strong> ve <em>: Arama motorlarına ve ekran okuyuculara metnin “önemli” olduğunu bildirir. (Tercih edilmelidir).
  • <b> ve <i>: Yalnızca görsel olarak kalın/italik yapar, anlamsal bir önem katmaz.

Alıntı, Alt/Üst Simge ve Kısaltmalar

<p>Einstein'ın formülü: E = mc<sup>2</sup></p> <p>Su formülü: H<sub>2</sub>O</p> <blockquote cite="http://kaynak.com">Bu uzun bir alıntıdır.</blockquote> <p>O, bana <q>Merhaba!</q> dedi.</p> <p><abbr title="Cascading Style Sheets">CSS</abbr> tasarımı güzelleştirir.</p>
12345<p>Einstein'ın formülü: E = mc<sup>2</sup></p><p>Su formülü: H<sub>2</sub>O</p><blockquote cite="http://kaynak.com">Bu uzun bir alıntıdır.</blockquote><p>O, bana <q>Merhaba!</q> dedi.</p><p><abbr title="Cascading Style Sheets">CSS</abbr> tasarımı güzelleştirir.</p>
  • <sup> / <sub>: Üst ve alt simgeler (matematik ve kimya formülleri).
  • <blockquote> / <q>: Blok alıntı ve satır içi (tırnak işaretli) alıntı.
  • <abbr>: Üzerine gelince açıklaması çıkan kısaltmalar.

Kod ve Bilgisayar Çıktıları

<pre> Boşlukların ve satır atlamaların korunduğu alan. </pre> <p>Kaydetmek için <kbd>Ctrl + S</kbd> tuşlarına basın.</p> <p>Değişken tanımı: <code>let x = 5;</code></p>
123456<pre> Boşlukların vesatır atlamaların korunduğu alan.</pre><p>Kaydetmek için <kbd>Ctrl + S</kbd> tuşlarına basın.</p><p>Değişken tanımı: <code>let x = 5;</code></p>
  • <pre>: Önceden biçimlendirilmiş, yazıldığı gibi görünen metin.
  • <kbd>: Klavye tuş kombinasyonlarını belirtir.
  • <code>: Satır içi kod parçacıklarını gösterir.

Bağlantılar ve Listeler

<a> Etiketi (Link/Bağlantı)

<a href="https://www.google.com" target="_blank">Google'a Git</a> <a href="mailto:[email protected]">Bana E-posta Gönder</a>
12<a href="https://www.google.com"target="_blank">Google'a Git</a><a href="mailto:[email protected]">Bana E-posta Gönder</a>
  • Sayfalar arası bağlantı vermek için kullanılır. Web’i “Web” yapan etikettir.
  • href: Gidilecek adresi belirtir.
  • target="_blank": Linkin yeni bir sekmede açılmasını sağlar.

Liste Etiketleri (<ul>, <ol>, <li>, <dl>)

<!-- Sırasız Liste (Madde İşaretli) --> <ul> <li>Elma</li> <li>Armut</li> </ul> <!-- Sıralı Liste (Numaralı) --> <ol> <li>Birinci Adım</li> <li>İkinci Adım</li> </ol> <!-- Açıklama Listesi --> <dl> <dt>HTML</dt> <dd>Web'in iskeletini oluşturur.</dd> </dl>
1234567891011121314151617<!-- Sırasız Liste (Madde İşaretli) --><ul><li>Elma</li><li>Armut</li></ul> <!-- Sıralı Liste (Numaralı) --><ol><li>Birinci Adım</li><li>İkinci Adım</li></ol> <!-- Açıklama Listesi --><dl><dt>HTML</dt><dd>Web'in iskeletini oluşturur.</dd></dl>
  • <ul>: Sırasız (noktalı) liste oluşturur.
  • <ol>: Sıralı (1,2,3… veya A,B,C…) liste oluşturur.
  • <li>: Liste elemanlarını belirtir.
  • <dl>, <dt>, <dd>: Terim ve açıklamasından oluşan sözlük tarzı listelerdir.

Medya ve Gömülü İçerikler

<img> Etiketi (Resim)

<img src="manzara.jpg" alt="Dağ manzarası" width="500" height="300">
1<img src="manzara.jpg"alt="Dağ manzarası"width="500"height="300">
  • Sayfaya görsel ekler. Kapanış etiketi yoktur.
  • src: Görselin dosya yolunu belirtir.
  • alt: Görsel yüklenemezse veya ekran okuyucular için görünecek alternatif metindir (Erişilebilirlik için zorunludur).

<figure> ve <figcaption> Etiketleri

<figure> <img src="logo.png" alt="Şirket Logosu"> <figcaption>Şekil 1: Yeni şirket logomuz.</figcaption> </figure>
1234<figure><img src="logo.png"alt="Şirket Logosu"><figcaption>Şekil 1: Yeni şirket logomuz.</figcaption></figure>
  • Görselleri (veya kod bloklarını) ve onların alt yazılarını (açıklamalarını) semantik olarak gruplar.

<video> ve <audio> Etiketleri

<video width="400" controls> <source src="tanitim.mp4" type="video/mp4"> Tarayıcınız video etiketini desteklemiyor. </video> <audio controls> <source src="muzik.mp3" type="audio/mpeg"> Tarayıcınız ses oynatmayı desteklemiyor. </audio>
123456789<video width="400"controls><source src="tanitim.mp4"type="video/mp4"> Tarayıcınız video etiketini desteklemiyor.</video> <audio controls><source src="muzik.mp3"type="audio/mpeg"> Tarayıcınız ses oynatmayı desteklemiyor.</audio>
  • Harici eklentiye (Flash vb.) ihtiyaç duymadan doğrudan sayfada video ve ses oynatmayı sağlar.
  • controls: Oynat/Duraklat, ses ayarı gibi oynatıcı kontrollerini gösterir.

Gömme Etiketleri (<iframe>, <embed>, <object>)

<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" allowfullscreen></iframe> <embed src="dosya.pdf" width="600" height="400" type="application/pdf"> <object data="animasyon.swf" width="400" height="300"></object>
123<iframe src="https://www.youtube.com/embed/VIDEO_ID"width="560"height="315"allowfullscreen></iframe><embed src="dosya.pdf"width="600"height="400"type="application/pdf"><object data="animasyon.swf"width="400"height="300"></object>
  • <iframe>: YouTube videosu veya harita gibi başka bir web sayfasını sitenizin içine gömer.
  • <embed> / <object>: PDF veya Flash gibi tarayıcı dışı kaynakları sayfaya dahil eder.

Tablo ve Form İşlemleri

<table> Etiketi (Tablolar)

<table border="1"> <thead> <tr> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> </tr> </thead> <tbody> <tr> <td>Oktay</td> <td>Ala</td> <td>25</td> </tr> </tbody> </table>
12345678910111213141516<table border="1"><thead><tr><th>Ad</th><th>Soyad</th><th>Yaş</th></tr></thead><tbody><tr><td>Oktay</td><td>Ala</td><td>25</td></tr></tbody></table>
  • Verileri satır ve sütunlar halinde düzenler.
  • <tr>: Satır, <th>: Başlık hücresi, <td>: Standart veri hücresidir. <thead> ve <tbody> ile daha düzenli bir yapı kurulur.

<form> ve Girdi Etiketleri

<form action="/submit" method="post"> <fieldset> <legend>Kullanıcı Bilgileri</legend> <label for="isim">İsim:</label> <input type="text" id="isim" name="isim" required placeholder="Adınızı girin"><br><br> <label for="sifre">Şifre:</label> <input type="password" id="sifre" name="sifre"><br><br> <label for="mesaj">Mesajınız:</label> <textarea id="mesaj" name="mesaj" rows="4" cols="30"></textarea><br><br> <label for="sehir">Şehir:</label> <select id="sehir" name="sehir"> <option value="34">İstanbul</option> <option value="20">Denizli</option> </select><br><br> <button type="submit">Formu Gönder</button> </fieldset> </form>
12345678910111213141516171819202122<form action="/submit"method="post"><fieldset><legend>Kullanıcı Bilgileri</legend><label for="isim">İsim:</label><input type="text"id="isim"name="isim"requiredplaceholder="Adınızı girin"><br><br> <label for="sifre">Şifre:</label><input type="password"id="sifre"name="sifre"><br><br><label for="mesaj">Mesajınız:</label><textarea id="mesaj"name="mesaj"rows="4"cols="30"></textarea><br><br><label for="sehir">Şehir:</label><select id="sehir"name="sehir"><option value="34">İstanbul</option><option value="20">Denizli</option></select><br><br> <button type="submit">Formu Gönder</button></fieldset></form>
  • <form>: Kullanıcıdan veri toplamak için kullanılır.
  • <input>: Text, password, email, radio, checkbox gibi birçok tipe sahiptir.
  • <textarea>: Çok satırlı metin giriş alanıdır.
  • <select> / <option>: Açılır liste menüsü oluşturur.
  • <fieldset> / <legend>: Form elemanlarını görsel bir çerçeve içine alıp başlık ekler.
  • <button>: Tıklanabilir buton oluşturur.

Etkileşimli (Interactive) Etiketler

<details> ve <summary> Etiketleri

<details> <summary>Daha fazla bilgi için tıklayın</summary> <p>Bu metin sadece başlığa tıklandığında açılır ve görünür. Sıkça Sorulan Sorular (SSS) bölümleri için harikadır!</p> </details>
1234<details><summary>Daha fazla bilgi için tıklayın</summary><p>Bu metin sadece başlığa tıklandığında açılır ve görünür. Sıkça Sorulan Sorular (SSS) bölümleri için harikadır!</p></details>
  • JavaScript kullanmadan açılır/kapanır (akordeon) bölümler oluşturur.

<progress> ve <meter> Etiketleri

<p>Dosya Yükleme Durumu: <progress value="70" max="100">%70</progress></p> <p>Disk Kullanımı: <meter value="0.6">%60</meter></p>
12<p>Dosya Yükleme Durumu: <progress value="70"max="100">%70</progress></p><p>Disk Kullanımı: <meter value="0.6">%60</meter></p>
  • <progress>: Bir işlemin ne kadarının tamamlandığını gösteren ilerleme çubuğudur.
  • <meter>: Belirli bir aralıktaki skaler bir değeri (örneğin disk alanı, sıcaklık) gösterir.

<dialog> Etiketi

<dialog open> <p>Bu bir pop-up bilgi penceresidir!</p> <form method="dialog"> <button>Kapat</button> </form> </dialog>
123456<dialog open><p>Bu bir pop-up bilgi penceresidir!</p><form method="dialog"><button>Kapat</button></form></dialog>
  • Doğrudan HTML üzerinden kalıcı pencere (modal/pop-up) oluşturmayı sağlar.

Dahil Etme (Bağlama) Etiketleri

<style>, <link> ve <script>

<!-- Dışarıdan CSS dosyası çağırma (head içine yazılır) --> <link rel="stylesheet" href="style.css"> <!-- Sayfa içi CSS yazma --> <style> body { background-color: #f4f4f4; } </style> <!-- JavaScript kodlarını ekleme --> <script> console.log('Sayfa yüklendi!'); </script>
123456789101112<!-- Dışarıdan CSS dosyası çağırma (head içine yazılır) --><link rel="stylesheet"href="style.css"> <!-- Sayfa içi CSS yazma --><style>body {background-color:#f4f4f4;}</style> <!-- JavaScript kodlarını ekleme --><script>console.log('Sayfa yüklendi!');</script>
  • <link>: Harici dosyaları (özellikle CSS) sayfaya bağlar.
  • <style>: Sayfa içi tasarım kodlarını barındırır.
  • <script>: Dinamik etkileşimler için JavaScript kodlarını veya harici JS dosyalarını ekler.
Post Views: 12.331

Từ khóa » Html S Etiketi