HTML KODLARI VE ANLAMLARI: EN ÇOK KULLANILAN ETİKETLER REHBERİ
İnternette gördüğünüz her web sayfasının temelinde HTML bulunur. Tarayıcıların sayfaları doğru şekilde göstermesini sağlayan bu yapı, metinlerden görsellere, bağlantılardan formlara kadar birçok öğeyi düzenler. Web geliştirmeye yeni başlayanlar için HTML kodları ilk öğrenilmesi gereken konulardan biridir.
Bir web sayfasının nasıl yapılandırıldığını anlamak için HTML etiketleri ve bu etiketlerin ne işe yaradığını bilmek gerekir. Her etiket, sayfanın belirli bir bölümünü tanımlar ve tarayıcıya bu içeriğin nasıl gösterileceğini anlatır.
Bu rehberde en çok kullanılan HTML kodları, etiketlerin anlamları ve gerçek kullanım örnekleri yer alıyor. Eğer HTML öğrenmeye başlıyorsanız veya bilginizi tazelemek istiyorsanız doğru yerdesiniz.
HTML Nedir ve Ne İşe Yarar?
HTML (HyperText Markup Language), web sayfalarının yapısını oluşturan işaretleme dilidir. Tarayıcılar bu dili okuyarak metinleri, başlıkları, bağlantıları ve diğer içerikleri kullanıcıya gösterir.
HTML bir programlama dili değildir; bir işaretleme dili olarak çalışır. Bu nedenle mantık işlemleri yerine sayfa yapısını tanımlar.
HTML Sayfasının Temel Yapısı
Her HTML sayfası belirli bir yapı ile başlar. Bu yapı tarayıcıya sayfanın nasıl yorumlanacağını anlatır.
<!DOCTYPE html>
<html>
<head>
<title>Örnek Sayfa</title>
</head>
<body>
<h1>Merhaba Dünya</h1>
<p>Bu bir HTML örneğidir.</p>
</body>
</html>
Bu yapı bir HTML sayfasının temel iskeletidir ve hemen hemen tüm sayfalarda kullanılır.
En Çok Kullanılan HTML Etiketleri
Web sayfası oluştururken en sık kullanılan HTML etiketlerini bilmek işleri oldukça kolaylaştırır. Bu etiketler sayfanın temel içeriğini oluşturur.
Başlık Etiketleri (h1 - h6)
Başlık etiketleri içerikleri hiyerarşik olarak düzenlemek için kullanılır. h1 en önemli başlık iken h6 en küçük başlığı temsil eder.
<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>
<h3>Daha Küçük Başlık</h3>
SEO açısından da başlık etiketlerinin doğru kullanımı oldukça önemlidir.
Paragraf Etiketi (p)
Metin içeriğini paragraf halinde göstermek için p etiketi kullanılır. Web sayfalarındaki açıklama metinlerinin büyük bölümü bu etiket ile yazılır.
Bağlantı ve Navigasyon Etiketleri
Web sayfalarının en önemli özelliklerinden biri sayfalar arasında bağlantı kurabilmesidir. Bu bağlantılar HTML etiketleri ile oluşturulur.
Link Etiketi (a)
Bir sayfadan başka bir sayfaya yönlendirme yapmak için a etiketi kullanılır.
<a href="https://example.com">Siteyi ziyaret et</a>
Site içi bağlantılar oluşturmak için de aynı etiket kullanılabilir. Örneğin HTML öğrenmek isteyenler için HTML eğitimi kaynakları oldukça faydalıdır.
Liste Etiketleri (ul, ol, li)
Liste yapıları içerikleri düzenli şekilde göstermek için kullanılır. HTML’de iki farklı liste türü bulunur:
- Sırasız liste (ul)
- Sıralı liste (ol)
- Liste öğeleri (li)
Örnek kullanım:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Görsel ve Medya Etiketleri
Web sayfaları sadece metinlerden oluşmaz. Görseller ve medya içerikleri sayfanın daha etkili olmasını sağlar.
Görsel Etiketi (img)
img etiketi sayfaya resim eklemek için kullanılır. Bu etiketin src özelliği dosyanın konumunu belirtir.
<img src="resim.jpg" alt="örnek açıklama">
Alt metni (alt attribute) erişilebilirlik açısından oldukça önemlidir.
Yatay Çizgi Etiketi (hr)
İçerikleri bölmek ve sayfa içinde görsel bir ayrım oluşturmak için hr etiketi kullanılabilir. Bu etiket özellikle uzun içeriklerde düzen sağlar.
HTML Öğrenirken Dikkat Edilmesi Gerekenler
HTML öğrenmeye başlayanların en sık yaptığı hatalardan biri etiketleri ezberlemeye çalışmaktır. Bunun yerine etiketlerin ne işe yaradığını anlamak çok daha önemlidir.
Semantik Etiketleri Kullanmak
HTML5 ile birlikte gelen semantik etiketler sayfanın anlamını daha iyi ifade eder. Örneğin header, footer ve article gibi etiketler içerik yapısını daha anlaşılır hale getirir.
Düzenli Kod Yazma Alışkanlığı
Kodların düzenli yazılması hem okunabilirliği artırır hem de hata ayıklamayı kolaylaştırır. Özellikle büyük projelerde bu alışkanlık çok önemlidir.
HTML Etiketleri ile Sayfa Yapısı Oluşturma
HTML etiketleri bir araya geldiğinde tam bir web sayfası oluşturulabilir. Başlıklar, paragraflar, görseller ve bağlantılar doğru şekilde kullanıldığında sayfa hem kullanıcı hem de arama motorları için daha anlaşılır olur.
Temel HTML bilgisi, web geliştirme dünyasına giriş için en önemli adımdır. CSS ve JavaScript gibi teknolojiler ise bu yapının üzerine eklenir.
Eğer web geliştirme konusunda ilerlemek istiyorsanız HTML etiketlerini iyi öğrenmek ve bol bol pratik yapmak en etkili yöntemdir.
Eğitim Takvimi
Yazılarımız
JavaScript nedir? Temelleri, kullanım alanları ve öğrenme süreci 
En çok kullanılan arama motorları ve öne çıkan özellikleri 
WordPress nedir? Özellikleri, avantajları ve kullanım alanları 
WordPress web tasarım nasıl yapılır? Tema, eklenti ve kurulum rehberi 