İçindekiler
HTML (HyperText Markup Language), web sayfalarının temel yapı taşını oluşturan bir işaretleme dilidir. Web sayfaları, tarayıcıların okuyup yorumladığı belirli bir iskelet yapısına sahiptir. Bu iskelet, sayfanın doğru bir şekilde görüntülenmesi ve arama motorları tarafından etkin bir şekilde indekslenmesi için kritik öneme sahiptir.
HTML İskeleti Nedir?
HTML iskeleti, bir web sayfasının temel yapısını belirleyen ve tarayıcılara sayfanın içeriğini nasıl işleyeceklerini anlatan etiketler bütünüdür. Bu yapı, sayfanın başlık, meta bilgiler, stil ve içerik gibi bölümlerini tanımlar. Sayfanın düzenli, anlaşılır ve erişilebilir olmasını sağlar.
HTML İskeletinin Önemi
- Standart bir yapı sağlar: HTML iskeleti, tarayıcıların sayfayı doğru yorumlamasına yardımcı olur.
- SEO açısından faydalıdır: Sayfanın arama motorlarında daha iyi sıralanmasına katkıda bulunur.
- Erişilebilirlik sağlar: Ekran okuyucular ve diğer yardımcı teknolojiler için sayfanın anlaşılır olmasını sağlar.
- Bakımı kolaylaştırır: Kapsamlı ve düzenli bir HTML yapısı, geliştiricilerin sayfayı anlamasını ve güncellemesini kolaylaştırır.
Temel HTML İskeleti
Bir HTML belgesi aşağıdaki temel yapı taşlarından oluşur:
<!DOCTYPE html>: Belgenin HTML5 standardına uygun olduğunu belirtir.<html>: Tüm HTML etiketlerini kapsayan kök elementtir.<head>: Sayfa hakkında meta bilgiler, stil dosyaları ve başlık gibi bilgileri içerir.<body>: Kullanıcıya gösterilecek içeriği barındırır.
Aşağıda, temel bir HTML iskeleti örneği bulunmaktadır:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Örnek Web Sayfası</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu, HTML iskeletinin bir örneğidir.</p>
</body>
</html>
HTML İskeletinin Bölümleri
<!DOCTYPE html> Deklarasyonu
Bu deklarasyon, tarayıcıya belgenin HTML5 standardında yazıldığını belirtir. Tarayıcının sayfayı doğru bir şekilde yorumlaması için gereklidir.
<html> Etiketi
<html> etiketi, belgenin kök elementidir ve tüm diğer HTML etiketlerini kapsar. lang özelliği ile belgenin dilini belirtmek, arama motorları ve erişilebilirlik araçları için faydalıdır.
<head> Etiketi
<head> bölümü, sayfa hakkında meta bilgiler içerir. Bu bölümde sıkça kullanılan etiketler şunlardır:
<meta charset="UTF-8">: Belgenin karakter setini belirtir.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Sayfanın mobil cihazlarda doğru ölçeklendirilmesini sağlar.<title>: Tarayıcı sekmesinde görünen sayfa başlığını tanımlar.<meta name="description" content="Sayfanın içeriğini özetleyen bir açıklama.">: Arama motorları için açıklama sağlar.<meta name="keywords" content="html, web geliştirme, programlama">: Sayfanın anahtar kelimelerini belirler.
<body> Etiketi
<body> etiketi, kullanıcıya gösterilecek tüm içeriği barındırır. Metinler, resimler, videolar ve diğer medya öğeleri bu bölümde yer alır.
Kapsamlı Bir HTML İskeleti Örneği
Aşağıda, bir blog sayfası için HTML iskeleti bulunmaktadır:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kişisel Blog</title>
<meta name="description" content="Kişisel blog sayfam.">
<meta name="keywords" content="blog, kişisel, teknoloji, seyahat">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Hoş Geldiniz!</h1>
<nav>
<ul>
<li><a href="index.html">Anasayfa</a></li>
<li><a href="about.html">Hakkımda</a></li>
<li><a href="contact.html">İletişim</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>İlk Blog Yazım</h2>
<p>Bu, benim ilk blog yazım. Burada deneyimlerimi paylaşacağım.</p>
</article>
</main>
<footer>
<p>© 2025 Kişisel Blog. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>
Ekstra HTML Özellikleri
HTML’de Görsellerin Kullanımı
Görseller, web sayfalarını görsel olarak zenginleştirmek için kullanılır. Örnek:
<img src="resim.jpg" alt="Örnek Resim" width="300" height="200">
HTML’de Link Kullanımı
Bağlantılar (<a> etiketi), kullanıcıları farklı sayfalara veya dış bağlantılara yönlendirmek için kullanılır.
<a href="https://www.ornek.com">Ziyaret Et</a>
HTML iskeleti, bir web sayfasının temel yapısını oluşturur ve sayfanın doğru bir şekilde görüntülenmesi için kritiktir. Doğru bir iskelet yapısı, hem kullanıcı deneyimini iyileştirir hem de arama motorları tarafından sayfanızın daha iyi anlaşılmasını sağlar. Web sitenizin yapısını planlarken semantik HTML etiketlerini kullanmak, erişilebilirlik ve SEO açısından büyük avantajlar sunar. daha fazla bilgi için w3school bakabilirsin.
-
HTML iskeleti neden önemlidir?
HTML iskeleti, tarayıcıların web sayfasını doğru bir şekilde yorumlamasını sağlar. Ayrıca SEO açısından da büyük önem taşır.
-
HTML iskeletinde
<head>etiketi olmazsa ne olur?<head>etiketi olmadan sayfa çalışabilir, ancak başlık, meta bilgiler ve stil bağlantıları gibi önemli öğeler eksik olur. -
HTML5 ile eski HTML sürümleri arasındaki fark nedir?
HTML5, eski sürümlere kıyasla daha fazla semantik etiket, mobil uyumluluk ve multimedya desteği sunar.
-
<meta>etiketleri ne işe yarar?<meta>etiketleri, sayfanın karakter setini, açıklamasını ve anahtar kelimelerini belirleyerek arama motorları ve tarayıcılar için bilgi sağlar. -
<body>etiketinde hangi öğeler bulunabilir?<body>etiketi içerisinde metinler, görseller, videolar, bağlantılar, formlar ve diğer HTML öğeleri bulunabilir.
Henüz yorum yapılmamış. İlk yorumu siz yapabilirsiniz!