HTML Nedir? Etiketler, Sayfa Yapısı ve Uygulamalı Anlatım
HTML, web sayfasındaki içeriğin başlık, paragraf, bağlantı, görsel ve liste gibi anlamlı yapılara ayrılmasını sağlayan işaretleme dilidir. Tarayıcı HTML dosyasını okuyup bu yapıyı ekranda gösterir; görünüm için CSS, etkileşim ve hesaplama için genellikle JavaScript kullanılır.
Bu yazıda (8)
- ›HTML sayfayı nasıl anlamlı parçalara ayırır?
- ›Bir HTML dosyasının tarayıcıya verdiği görev dağılımı
- ›Etiket ile öznitelik arasındaki farkı kod üzerinde okuyun
- ›Başlık, liste ve bağlantı seçimiyle okunabilir bir belge kurma
- ›HTML'nin sınırı: yapı kurar, uygulama mantığını tek başına yürütmez
- ›Çözümlü örnek: açıklama metnini düzenli bir HTML belgesine dönüştürme
- ›Çözümlü örnek: görsel ve bağlantı içeren blog girişini kurma
- ›Sık yapılan hatalar ve karıştırılan kavramlar
HTML Nedir? Etiketler, Sayfa Yapısı ve Uygulamalı Anlatım
Bir web sayfasında gördüğünüz başlık, açıklama, bağlantı, görsel ve liste birbirinden rastgele dizilmiş metinler değildir. Bu öğelerin ne olduğunu ve sayfa içindeki ilişkisini tarayıcıya anlatan temel yapı HTML ile kurulur. HTML, HyperText Markup Language ifadesinin kısaltmasıdır; Türkçede Hiper Metin İşaretleme Dili olarak karşılanır.
HTML bir programlama dili gibi değişken tanımlayıp hesaplama yapan bir sistem değildir. İçeriği etiketlerle işaretler ve sayfanın yapısını tanımlar. Örneğin bir metnin başlık, paragraf veya liste öğesi olduğunu belirtir. Tarayıcı da bu işaretleri yorumlayarak dosyayı görüntüler.
Bu rehberde HTML'nin yalnızca tanımını değil, etiketlerin nasıl iç içe geçtiğini, özniteliklerin ne işe yaradığını, bir dosyanın tarayıcıya nasıl ulaştığını ve doğru yapı seçiminin neden önemli olduğunu adım adım ele alacağız.
HTML sayfayı nasıl anlamlı parçalara ayırır?
HTML'nin temel görevi içeriğe yapı ve anlam kazandırmaktır. Başlık için <h1> ile <h6> arasında başlık etiketleri, metin bloğu için <p>, sırasız maddeler için <ul>, sıralı maddeler için <ol>, her liste maddesi için de <li> kullanılır. Bir bağlantı Örnek site biçiminde, görsel ise <img> etiketiyle ifade edilir.
Örneğin aşağıdaki iki kullanım arasında yalnızca görünüş değil, anlam bakımından da fark vardır:
<h1>HTML Öğrenme Rehberi</h1>
<p>Bu sayfada temel HTML etiketlerini inceleyeceğiz.</p>
İlk satır tarayıcıya metnin ana başlık olduğunu, ikinci satır ise açıklayıcı bir paragraf olduğunu bildirir. Sadece metni büyük yazmak, onu HTML açısından başlık yapmaz; yapısal anlamı belirleyen etiketin kendisidir.
Bir HTML belgesi elemanlardan oluşur. Açılış ve kapanış etiketleri arasında kalan içerik o elemanın içeriğidir: <p>Bir paragraf</p>. Etiketler iç içe de yazılabilir. Örneğin <p>HTML <strong>yapı</strong> tanımlar.</p> kullanımında strong, paragrafın içinde yer alır. İç içe elemanların kapanış sırası açılış sırasının tersine olmalıdır. Doğru biçim <p><strong>önemli</strong> bilgi</p> iken etiketleri çapraz kapatmak yapıyı belirsizleştirir.
Her eleman kapanış etiketi gerektirmez. Görsel yerleştiren <img> gibi bazı elemanlar kendi içinde içerik taşımaz. Bu nedenle temel düzeyde öğrenilmesi gereken ilk ayrım şudur: İçerik saran elemanlar açılış ve kapanış etiketiyle, içerik taşımayan bazı elemanlar ise tek etiketle kullanılır.
Bir HTML dosyasının tarayıcıya verdiği görev dağılımı
Temel bir HTML dosyasında <!DOCTYPE html> bildirimi, <html>, <head> ve <body> bölümleri bulunur. <!DOCTYPE html>, tarayıcıya belgenin HTML5 olarak yorumlanacağını bildiren ve standartlar modunun kullanılmasını sağlayan bir bildiridir; normal bir içerik etiketi değildir.
<html> belgenin kök elemanıdır. <head> bölümü kullanıcıya sayfa gövdesi gibi görünmeyen, belgeyle ilgili bilgileri taşır. Sayfa başlığı için <title> burada yer alır. <body> ise tarayıcı penceresinde görülen başlık, paragraf, görsel, bağlantı ve listeler gibi ana içeriği barındırır.
Basit bir belge şu şekilde kurulabilir:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>HTML Çalışma Sayfası</title>
</head>
<body>
<h1>HTML Çalışma Sayfası</h1>
<p>Bu sayfa HTML yapısını gösterir.</p>
</body>
</html>
Burada lang="tr", belgenin dilini belirtir. <meta charset="UTF-8"> ise Türkçe karakterlerin doğru yorumlanmasına yardımcı olan karakter kodlamasını tanımlar. <title> ile gövde içindeki <h1> aynı şey değildir: title, belge başlığı olarak tarayıcı sekmesiyle ilişkilidir; h1 ise sayfanın görünen ana başlığıdır.
Dosyayı düz metin düzenleyicide yazıp .html uzantısıyla kaydetmek ve tarayıcıda açmak yeterlidir. Tarayıcı dosyadaki etiketleri ekranda kelimesi kelimesine göstermez; etiketlerin tanımladığı yapıyı yorumlayıp görsel bir belge oluşturur. HTML dosyası tek başına sayfanın iskeletini verir; renk, yazı tipi ve boşluk gibi sunum kararları genellikle CSS ile, kullanıcı etkileşimi ve hesaplamalar ise JavaScript gibi teknolojilerle eklenir.
Etiket ile öznitelik arasındaki farkı kod üzerinde okuyun
Etiket, bir içeriğin türünü veya yapısını tanımlar. Öznitelik ise açılış etiketine eklenen ve o eleman hakkında tamamlayıcı bilgi veren çoğunlukla isim-değer biçimindeki bilgidir. Ancak required, disabled ve checked gibi boolean öznitelikler, değer yazılmadan yalnızca özniteliğin bulunmasıyla da kullanılabilir. Örneğin bağlantının nereye gideceği href, görselin dosya konumu src, görsel açıklaması ise alt özniteliğiyle belirtilir.
Örnek site kodunda a bağlantı elemanıdır, href hedef adresi gösterir, kullanıcıya görünen bağlantı metni ise Örnek site ifadesidir. <img src="kapak.jpg" alt="HTML kodu yazılan bir ekran"> kullanımında img görsel elemanıdır; src görsel dosyasını, alt ise görselin metinsel açıklamasını belirtir.
Bu ayrım, kod okurken şu soruyu sormanızı sağlar: "Bu bilgi yeni bir eleman mı oluşturuyor, yoksa mevcut elemanın özelliğini mi açıklıyor?" href yeni bir bağlantı etiketi değildir; a elemanının hedefini tanımlar.
Öznitelik değerlerini tırnak içinde yazmak en güvenli ve okunabilir uygulamadır; ancak HTML sözdiziminde bazı basit değerler belirli koşullarda tırnaksız da yazılabilir. Dosya yolu veya hedef adresi yanlışsa etiket doğru olsa bile beklenen içerik görünmeyebilir. Bu nedenle görsel sorularında yalnızca img etiketini tanımak yeterli değildir; src değerinin dosyaya ulaşması ve alt açıklamasının bulunması da kontrol edilmelidir.
HTML yapısında div ve span gibi genel amaçlı elemanlar da kullanılabilir. Ancak bir içerik başlıksa onu yalnızca biçim vermek amacıyla div içine almak yerine uygun başlık etiketiyle tanımlamak daha anlamlıdır. Yapı anlamını taşıyan etiket seçimi, belgeyi okuyan insanların yanı sıra tarayıcı araçlarının ve ekran okuyucuların içeriği yorumlamasına yardımcı olabilir.
Başlık, liste ve bağlantı seçimiyle okunabilir bir belge kurma
Bir yazıyı HTML'ye aktarırken önce içeriğin hiyerarşisini çıkarın. Sayfanın ana konusu için genellikle bir <h1>, ana konunun alt başlıkları için <h2>, gerekirse onların alt bölümleri için <h3> kullanılabilir. Başlık düzeyleri yalnızca yazı boyutu seçmek için değil, konular arasındaki ilişkiyi göstermek için kullanılır.
Maddelerin sırası önemli değilse <ul>; adımların veya sıralamanın anlam taşıdığı durumlarda <ol> tercih edilir. Örneğin alışveriş listesi <ul> ile, üç aşamalı bir kurulum süreci <ol> ile daha doğru ifade edilir. Her iki yapının doğrudan çocuğu olan maddeler <li> ile yazılır:
<ol>
<li>Dosyayı oluştur.</li>
<li>Kodu kaydet.</li>
<li>Tarayıcıda aç.</li>
</ol>
Bağlantı metni, hedefi belirsiz bir "tıklayın" ifadesinden daha açıklayıcı olmalıdır. Örneğin HTML ile görünümü düzenlemek için CSS bağlantının neye yönlendirdiğini doğrudan anlatır. Bir bağlantı, HTML'nin başka belgeler arasında hiper metin ilişkisi kurma özelliğini gösteren temel elemanlardandır.
Görsellerde alt metni de bağlamı tamamlar. Görsel yalnızca dekoratifse açıklamanın nasıl ele alınacağı, sayfanın kullanım amacına göre değerlendirilmelidir; bilgi taşıyan bir görselde ise görselin işlevini veya içeriğini anlatan kısa bir metin gerekir. Bu yüzden alt değerini dosya adıyla veya "resim" gibi anlamsız bir ifadeyle doldurmak yerine, görselin sayfadaki katkısını yazmak daha öğreticidir.
HTML'nin varsayılan görünümü sade olabilir. Bu, HTML'nin yetersiz olduğu anlamına gelmez; yapı ile sunumun farklı katmanlar olduğunu gösterir. HTML doğru yapıyı kurar, CSS ise bu yapının renk, ölçü, hizalama ve düzenini biçimlendirir.
HTML'nin sınırı: yapı kurar, uygulama mantığını tek başına yürütmez
HTML bir işaretleme dilidir. Bu nedenle bir sayfanın hangi içeriğe sahip olduğunu ve içeriğin hangi türde olduğunu tanımlayabilir; ancak tek başına kullanıcıdan gelen veriyi işleyip koşula göre sonuç üretme, hesaplama yapma veya uygulama mantığı kurma aracı olarak değerlendirilmez.
Örneğin bir form alanını HTML ile tanımlayabilirsiniz. Kullanıcının adını yazacağı alan, gönderme düğmesi ve açıklama metni HTML elemanlarıyla oluşturulur. HTML, required, pattern, min ve max gibi özniteliklerle temel form kısıtlamaları ve tarayıcı doğrulaması sağlayabilir. Ancak özel veri işleme, hesaplama ve kalıcı kayıt işlemleri için JavaScript ve/veya sunucu tarafı teknolojilere ihtiyaç duyulur. Benzer biçimde bir düğmenin görünmesi ile düğmeye basılınca özel bir işlem yapılması farklı konulardır.
HTML, CSS ve JavaScript arasındaki görev dağılımını şöyle düşünebilirsiniz:
- HTML: Sayfadaki içeriğin ve yapının ne olduğunu belirtir.
- CSS: Bu yapının nasıl görüneceğini düzenler.
- JavaScript: Kullanıcı etkileşimine ve dinamik işlemlere davranış kazandırabilir.
Bu üç katman birbirinin yerine geçmez. CSS olmadan da HTML belgesi görüntülenebilir; fakat görünüm daha sade olabilir. HTML olmadan CSS'nin biçimlendireceği anlamlı bir belge yapısı bulunmaz. JavaScript ise sayfanın etkileşimli davranışlarını ekleyebilir, ancak başlık ve paragraf gibi temel yapının tanımlanması HTML'nin işidir.
HTML bilgisi bu nedenle web geliştirmede başlangıç noktasıdır; fakat tek başına eksiksiz bir web uygulaması anlamına gelmez. İlerleyen aşamada CSS, JavaScript ve gerektiğinde sunucu tarafı teknolojileriyle birlikte düşünülmelidir.
Çözümlü örnek: açıklama metnini düzenli bir HTML belgesine dönüştürme
Verilenler: Bir kurs duyurusunda HTML'e Başlangıç başlığı, HTML web sayfasının yapısını tanımlar. açıklaması, üç maddelik bir içerik listesi ve CSS konusuna giden bir bağlantı bulunuyor.
-
adım — Belge iskeletini kurun: Önce
<!DOCTYPE html>,<html>,<head>ve<body>bölümlerini yazın. Tarayıcı sekmesindeki belge adını<title>içine koyun. -
adım — Ana başlığı yerleştirin: Duyurunun ana konusu olduğu için metni
<h1>içine alın. Burada başlığı yalnızca büyük göstermek değil, belgenin ana başlığı olarak işaretlemek amaçlanır. -
adım — Açıklamayı paragraf yapın: Tek bir açıklama cümlesi
<p>elemanı içine yazılır. -
adım — Maddelerin sırasını değerlendirin: İçerikler belirli bir işlem sırası taşımıyorsa
<ul>kullanın ve her maddeyi<li>ile yazın. -
adım — İlgili sayfaya bağlantı ekleyin: CSS konusuna yönlendiren hedefi
hrefözniteliğiyle belirtin.
Sonuç:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>HTML'e Başlangıç</title>
</head>
<body>
<h1>HTML'e Başlangıç</h1>
<p>HTML web sayfasının yapısını tanımlar.</p>
<ul>
<li>Başlık ve paragraf oluşturma</li>
<li>Liste ve bağlantı kullanma</li>
<li>Görsel ekleme</li>
</ul>
CSS ile görünümü düzenlemeyi öğrenin
</body>
</html>
Kontrol: Ana başlık h1, açıklama p, maddeler ul ve li, bağlantı ise a olarak tanımlanmıştır. Böylece aynı içerik yalnızca düz metin olarak değil, tarayıcının ve yardımcı araçların okuyabileceği bir belge yapısı olarak sunulur.
Çözümlü örnek: görsel ve bağlantı içeren blog girişini kurma
Verilenler: Bir blog girişinde HTML Etiketlerini Tanıma başlığı, yazara ait bir bilgi satırı, html-kodlari.jpg adlı görsel ve HTML'nin temel yapısını anlatan bir paragraf bulunuyor.
-
adım — Başlık düzeyini seçin: Bu blog girişinin sayfadaki ana konusu olduğu varsayılırsa başlık
<h1>ile yazılır. Sayfada başka bir ana başlık zaten varsa, içerik hiyerarşisine göre<h2>daha uygun olabilir. Yani başlık etiketi yalnızca yazı boyutuna göre seçilmez. -
adım — Yazar bilgisini ayrı bir paragraf olarak belirtin:
Yazar: Denizgibi kısa bilgi<p>içine alınabilir. Bu satırın görünümü daha sonra CSS ile değiştirilebilir. -
adım — Görseli kaynak ve açıklamayla ekleyin: Dosya yolu
srcile, görselin ne anlattığıaltile belirtilir.altdeğeri görselin yerini alan anlamlı bir açıklama olmalıdır. -
adım — Metni paragrafla tamamlayın: Açıklama cümleleri
<p>içine konur. Böylece başlık, yazar bilgisi, görsel ve açıklama birbirinden ayırt edilir.
Sonuç:
<article>
<h1>HTML Etiketlerini Tanıma</h1>
<p>Yazar: Deniz</p>
<img src="html-kodlari.jpg" alt="HTML kodlarının gösterildiği bir ekran">
<p>HTML etiketleri, web sayfasındaki içeriğin görevini ve yapısını belirtir.</p>
</article>
Bu örnekte <article>, bağımsız anlam taşıyan ve blog yazısı gibi dağıtılabilir veya yeniden kullanılabilir bir içerik birimini belirtir. Salt biçimsel ya da genel gruplama için div veya bağlama göre section tercih edilmelidir. Görsel görünmüyorsa önce src içindeki dosya adının ve konumunun doğru olup olmadığını kontrol edin; sorun yapısal değil, dosya yoluyla ilgili olabilir.
Sık yapılan hatalar ve karıştırılan kavramlar
HTML'yi programlama dili sanmak: HTML hesaplama ve karar mantığı kuran bir programlama dili değil, içerik yapılandıran bir işaretleme dilidir. Bir form alanı oluşturmak ile form verisini işlemek de aynı şey değildir.
head ile h1 etiketini karıştırmak: <head> belgenin meta bilgileri ve başlığı gibi sayfayla ilgili bilgileri taşır. <h1> ise gövdede görünen ana başlık olarak kullanılır. Biri belge bölümü, diğeri içerik başlığıdır.
title ile h1 değerini aynı kabul etmek: <title> tarayıcı sekmesiyle ilişkilidir; <h1> sayfanın içerik hiyerarşisindeki ana başlığıdır. Metinleri aynı olabilir, görevleri aynı değildir.
Başlıkları yalnızca görünüş için seçmek: Bir paragrafı büyük göstermek için h1 kullanmak veya başlık düzeylerini rastgele atlamak belgenin anlamını zayıflatabilir. Başlık düzeyi, içerik ilişkisine göre seçilmelidir.
Liste elemanlarını eksik kullanmak: <ul> veya <ol> içinde maddeleri doğrudan düz metin olarak bırakmak yerine her maddeyi <li> ile belirtin. Sıra önemliyse <ol>, önemli değilse <ul> seçin.
Görselin src değerini kontrol etmemek: img etiketi yazılmış olsa da dosya yolu yanlışsa görsel yüklenmez. Ayrıca bilgi taşıyan görsellerde alt açıklamasını atlamak, içeriğin metinsel karşılığını eksik bırakır.
HTML ile CSS'yi tek teknoloji sanmak: HTML yapı ve anlamı, CSS görünümü belirler. Renk, kenar boşluğu veya yazı tipi eklemek HTML etiketinin temel görevi değildir.
Etiketleri yanlış sırada kapatmak: <p><strong>Metin</strong></p> doğru iç içe geçmedir. <p><strong>Metin</p></strong> ise açılış-kapanış sırasını bozar. Kodda girintileme kullanmak bu hatayı fark etmeyi kolaylaştırır.
Her bilgiyi div içine koymak: div genel bir kapsayıcıdır; başlık, liste veya paragrafın anlamını kendisi vermez. Uygun ve anlamlı eleman mevcutsa önce onu tercih edin; genel kapsayıcıyı yalnızca ihtiyaç olduğunda kullanın.
Bir okul kulübünün duyuru sayfasını düşünün: h1 kulübün duyuru başlığını, p toplantı açıklamasını, ol toplantıya katılma adımlarını, a kayıt formuna giden bağlantıyı ve img kulüp afişini temsil eder. HTML burada afişin rengini belirlemez; duyurunun hangi parçadan oluştuğunu ve parçaların ne işe yaradığını düzenler.
TYT/AYT bilişim veya temel web teknolojileri bağlamında HTML için ana ipucu "işaretleme dili" ve "web sayfasının yapısı" ifadeleridir. HTML'yi programlama diliyle karıştırmayın. <head> ile <body> ayrımını; <title> ile görünen <h1> farkını; href özniteliğinin bağlantı hedefini, src özniteliğinin görsel kaynağını belirttiğini bilin. Liste sorularında sırasız içerik için <ul>, sıralı veya aşamalı içerik için <ol>, her madde için <li> kullanılır. CSS yapı kurmaz; HTML'nin oluşturduğu yapının görünümünü düzenler. HTML temel form kısıtlamaları ve tarayıcı doğrulaması sağlayabilir; özel hesaplama, veri işleme ve kayıt işlemleri için JavaScript ve/veya sunucu tarafı teknolojiler gerekir.
Sık sorulan sorular
HTML programlama dili midir?
Hayır. HTML bir işaretleme dilidir. İçeriğin başlık, paragraf, liste, görsel veya bağlantı gibi türlerini tanımlar; tek başına programlama dillerindeki hesaplama, koşul ve veri işleme görevlerini üstlenmez.
HTML dosyası nasıl oluşturulur?
Bir metin düzenleyicide HTML kodu yazıp dosyayı .html uzantısıyla kaydedebilirsiniz. Dosya tarayıcıda açıldığında tarayıcı etiketleri yorumlayarak sayfanın yapısını görüntüler. Kod yazmak için basit bir düzenleyici veya bir IDE kullanılabilir.
HTML ile CSS arasındaki fark nedir?
HTML içeriğin yapısını ve anlamını tanımlar. CSS ise bu yapının renk, yazı tipi, boşluk ve yerleşim gibi görsel özelliklerini düzenler. Bu nedenle CSS, HTML'nin yerine geçmez; onun kurduğu yapı üzerinde çalışır.
HTML'de etiket ve öznitelik arasındaki fark nedir?
Etiket elemanın türünü veya yapısını belirtir; öznitelik ise açılış etiketine ek bilgi verir. `` bağlantı elemanıdır; örneğin Örnek site kodunda href bağlantının hedefini belirtir. <img> görsel elemanıdır, src görsel dosyasını gösterir.
`title` ve `h1` aynı şey midir?
Hayır. <title> belgeyle ilgili başlığı tanımlar ve <head> içinde yer alır. <h1> ise sayfanın gövdesinde görünen ana içerik başlığıdır. Metinleri aynı seçilebilir, ancak görevleri farklıdır.
HTML öğrenmek için IDE gerekir mi?
Hayır. Basit bir metin düzenleyiciyle de .html dosyası oluşturulabilir. IDE veya gelişmiş kod editörleri yazım, dosya yönetimi ve hata fark etme sürecini kolaylaştırabilir; HTML dosyasının çalışması için zorunlu değildir.
- •HTML Nedir? Nerelerde Kullanılır?bilimgenc.tubitak.gov.tr
- •HTML Dersleri #1 - HTML Nedir ve Temel Kavramlaryoutube.com
- •HTML Nedir, Nasıl Öğrenilir?goit.global
- •ondokuzon.comondokuzon.com