Web dünyasına adım atmak istiyorsanız, öğrenmeniz gereken ilk ve en temel teknoloji HTML’dir. Her gün ziyaret ettiğiniz milyarlarca web sitesinin arka planında bu temel yapı taşı çalışır. Bu rehberde, daha önce hiç kodlama yapmamış biri olarak HTML’in ne olduğunu, nasıl çalıştığını ve SEO (Arama Motoru Optimizasyonu) ile erişilebilirlik açısından neden bu kadar kritik bir öneme sahip olduğunu bol örneklerle, adım adım öğreneceksiniz.
HTML Nedir ve Ne İşe Yarar?
HTML (HyperText Markup Language – Hiper Metin İşaretleme Dili), belgeleri bir web tarayıcısında (Chrome, Safari, Firefox vb.) görüntülenecek şekilde tasarlamak için kullanılan standart işaretleme dilidir. Temel amacı, web sayfalarının içeriğini ve yapısal hiyerarşisini tanımlamaktır.
Burada en çok karıştırılan konuya açıklık getirelim: HTML bir programlama dili değildir. İçerisinde mantıksal işlemler, döngüler (loops) veya karar yapıları (if/else) barındırmaz. HTML sadece içeriğinizi yapılandıran bir “işaretleme” dilidir.
Öğrenmeyi kolaylaştırmak için bir “Ev İnşaatı” metaforu kullanalım: Bir web sayfasını bir eve benzetebilirsiniz.
- HTML, evin temel yapısı, iskeleti, duvarları ve odalarının planıdır. Sitenizdeki başlıkların, paragrafların ve resimlerin nerede duracağını belirler.
- CSS (Cascading Style Sheets), bu evin boyası, iç mimarisi, ışıklandırması ve görsel tasarımıdır. HTML’in nasıl görüneceğini ayarlar.
- JavaScript ise evin elektrik ve su tesisatıdır. Sayfaya hareket, dinamizm ve etkileşim (örneğin bir butona tıklandığında açılan menüler) katar.
HTML Nasıl Çalışır? Elementler ve Etiketler (Tags)
HTML, içerikleri çeşitli etiketler (tags) kullanarak web tarayıcılarına tanıtır. Tarayıcılar bu etiketleri sayfada göstermez, ancak içeriğin nasıl yorumlanması gerektiğini anlamak için onları okur ve bellekte bir “DOM (Belge Nesne Modeli) ağacı” oluşturur.
Genel bir HTML elementi şu yapıdan oluşur: <etiket nitelik="değer"> İçerik </etiket>
- Açılış Etiketi (Start Tag): Elementin başladığı yeri gösterir (Örneğin:
<p>). - İçerik (Content): Kullanıcının sayfada göreceği metin veya materyaldir.
- Kapanış Etiketi (End Tag): Elementin bittiği yeri gösterir. Açılış etiketinden farkı, içinde bir eğik çizgi (/) barındırmasıdır (Örneğin:
</p>).
Nitelikler (Attributes): Etiketlere ekstra özellikler veya bilgiler eklemek için kullanılır. Her zaman açılış etiketinin içine yazılırlar ve genellikle isim="değer" formatındadırlar. Örnek: <a href="https://ornek.com">Buraya Tıklayın</a> kodundaki href, bağlantının nereye gideceğini belirten bir niteliktir.
Boş (Void) Elementler: Bazı HTML elementleri içerik barındırmaz ve kapanış etiketleri yoktur. Sadece tek bir etiketten oluşurlar. Örneğin sayfada bir alt satıra geçmek için kullanılan <br> (line break) veya görsel eklemek için kullanılan <img> etiketleri boş elementlerdir.
Temel Bir HTML Belgesinin İskeleti
Bir HTML belgesini oluşturmak için belirli bir çatıya ihtiyaç vardır. Aşağıdaki standart HTML iskeletini inceleyelim:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>İlk Web Sayfam</title>
</head>
<body>
<h1>Web Geliştirme Dünyasına Hoş Geldiniz!</h1>
<p>Bu, benim hazırladığım ilk HTML sayfası.</p>
</body>
</html>
Kodların Anlamları:
<!DOCTYPE html>: Tarayıcıya bu belgenin modern HTML5 standartlarında yazıldığını bildirir.<html>: Tüm HTML belgesini kapsayan en temel kök (root) elementtir.lang="tr"niteliği, sayfa dilinin Türkçe olduğunu belirtir.<head>: Sayfanın arka plan bilgilerini (meta verilerini) içerir. Ziyaretçiler bu kısımdaki kodları sayfa üzerinde doğrudan görmezler.<title>: Web tarayıcısının sekmesinde (veya Google arama sonuçlarında) görünen başlığı belirler.<body>: Kullanıcıların web sayfasında gördüğü her şey (metinler, görseller, bağlantılar) bu etiketin içine yazılır.
En Sık Kullanılan Temel HTML Etiketleri
İçeriklerinizi zenginleştirmek için sıkça kullanacağınız bazı HTML etiketleri ve kullanım örnekleri şunlardır:
1. Başlıklar (Headings): Sayfanızdaki başlık hiyerarşisini belirtmek için kullanılır. <h1> en büyük ve en önemli başlığı, <h6> ise en alt düzey başlığı temsil eder. SEO açısından her sayfada yalnızca bir tane <h1> kullanılması önerilir. Örnek: <h2>Alt Başlık</h2>
2. Paragraflar (Paragraphs): Düz metin blokları oluşturmak için kullanılır. Örnek: <p>Bu bir paragraf örneğidir. Metinler burada yer alır.</p>
3. Bağlantılar (Links): Kullanıcıları başka bir web sayfasına yönlendirmek için <a> (anchor) etiketi kullanılır. href niteliği gitmek istenen web adresini barındırır. Örnek: <a href="iletisim.html">Bize Ulaşın</a>
4. Görseller (Images): Sayfaya resim eklemek için kullanılan boş bir elementtir. src niteliği görselin kaynağını, alt niteliği ise görselin alternatif metnini belirtir. Örnek: <img src="manzara.jpg" alt="Göl kenarında güneş batımı">
5. Listeler (Lists): Sırasız (madde işaretli) listeler için <ul>, sıralı (numaralı) listeler için <ol> kullanılır. Her bir liste elemanı ise <li> etiketi ile yazılır. Örnek:
<ul>
<li>Elma</li>
<li>Armut</li>
</ul>
Anlamsal (Semantic) HTML: SEO ve Erişilebilirlik İçin Neden Önemli?
Web sitenizi kodlarken tüm blokları anlamsız olan <div> veya <span> etiketleriyle oluşturabilirsiniz, ancak bu hem Google gibi arama motorları hem de özel gereksinimli bireyler için büyük bir hatadır.
Anlamsal (Semantic) HTML, içindeki verinin ne olduğuna dair hem tarayıcılara hem de geliştiricilere anlam ifade eden etiketler kullanmaktır. HTML5 ile birlikte sayfa yapısını daha iyi ifade eden birçok anlamsal etiket gelmiştir.
Önemli Anlamsal Etiketler:
<header>: Sayfanın veya bölümün giriş kısmını (logo, ana başlıklar) temsil eder.<nav>: Sitenin ana navigasyon/menü bağlantılarını gruplar.<main>: Sayfanın ana içeriğini belirtir. Bir sayfada yalnızca bir tane görünür halde bulunmalıdır.<article>: Bir blog yazısı veya haber gibi, kendi başına anlam ifade eden ve paylaşılabilecek içerikleri sarmalar.<section>: Tematik olarak birbiriyle ilişkili içerikleri (örneğin “Hizmetlerimiz” bölümü) gruplamak için kullanılır.<footer>: Sayfanın en altındaki telif hakkı ve iletişim bilgilerini barındıran alt bilgidir.
SEO (Arama Motoru Optimizasyonu) Etkisi: Arama motoru botları sayfalarınızı tararken (crawl ederken) insanlar gibi görsel algıya sahip değildir. Botlar sayfa kodlarına bakar. Yazınızı <article> içine almak, Google botlarına “Bu bir blog içeriğidir” mesajını verir ve içeriğinizin arama sonuçlarında daha doğru kategorize edilmesini (örneğin “Zengin Snippet” olarak çıkmasını) sağlar. Eğer her şeyi <div> ile yaparsanız, arama motoru içeriğin hiyerarşisini çözmekte zorlanır.
Erişilebilirlik (Accessibility) Etkisi: Görme engelli kullanıcılar, web sitelerini gezerken ekran okuyucu (screen reader) cihazlar ve yazılımlar kullanırlar. Ekran okuyucular, anlamsal HTML etiketlerine dayanarak sayfayı sese çevirir. Örneğin, kullanıcı <nav> etiketini duyduğunda orada bir menü olduğunu anlar ve dilerse o menüyü hızla atlayıp doğrudan ana içeriğe (<main>) geçebilir. Görsellerde doğru alt (alternatif metin) etiketi kullanımı da, ekran okuyucunun görseli göremeyen birine betimleyebilmesi için zorunludur.
Ayrıca, modern HTML5 standartları sayesinde artık sitelerde medya oynatmak için “Flash Player” gibi üçüncü parti eklentilere ihtiyaç kalmamıştır. Bunun yerine, yerleşik olarak bulunan <video> ve <audio> anlamsal etiketleri kullanılarak doğrudan ve yüksek performanslı medya oynatımı yapılmaktadır.
Sonuç
HTML, modern web’in evrensel iskeletidir. Kaliteli, hatasız ve anlamsal bir HTML kurgusu oluşturmak; hem arama motorlarında üst sıralara çıkmanızın (SEO) hem de tüm engellere rağmen engelsiz bir dijital deneyim sunmanızın (Erişilebilirlik) en önemli sırrıdır. Yukarıdaki örnek kod bloklarını kendi bilgisayarınızda bir .html uzantılı not defteri veya kod editörü dosyasına kaydedip tarayıcınızda açarak ilk denemelerinizi yapabilir ve web dünyasının kapısını aralayabilirsiniz.
