“HTML” Yapısı ve Sözdizimi
Bir önceki yazımızda, HTML nedir sorusuna detaylıca cevap vermiş ama yazımızı daha fazla uzatmamak adına HTML etiketlerini anlatmamıştık. Bu yazımızda ise HTML’deki etiketleri anlatacağız. Ancak bunu yaparken HTML’de bulunan bütün etiketleri bir anda vermek yerine öncelik olarak etiket yapısının mantığına vurgu yapacağız. Devamında ise muhakkak bilmemiz gereken temel HTML etiketlerini anlatacağız. Böylesi bir yaklaşımın yeni öğrenenler için faydalı olacağını düşünüyorum. Hazırsanız başlayalım.
“HTML” Sözdizimi
HTML, web sayfalarının yapısını oluşturan işaretleme dilidir. Bu işaretlemeyi ise etiketler aracılığıyla sağlar. Bazı kaynaklarda etiket yerine “element” tabiri kullanılması kafanızı karıştırabilir. Merak etmeyin, ikisi arasındaki farka değineceğim şimdi.
HTML etiketleri, küçüktür (<) ve büyüktür (>) işaretleri arasına yazılan, etiketin işlevini belirten bir isim içerir. Bunlar jargonda “angle brackets” (grup parantezleri) olarak adlandırılır. Genellikle iki parçadan oluşur ve “left-angle bracket” (sol köşeli ayraç) ile başlayıp “right-angle bracket” (sağ köşeli ayraç) ile bitecek şekilde yazılırlar. “Genellikle” bir etiketin, açılış (örneğin, <p>) ve kapanış (örneğin, </p>) olmak üzere iki bölümü vardır. Açılış etiketi elementin başladığını, kapanış etiketi ise bittiğini gösterir. Bu iki etiketin arasında yer alan içerik, o elementin kapsamını oluşturur. Örneğin, <p> ve </p> etiketleri bir paragrafı tanımlar.
Buna karşılık HTML elementi ise hem açılış etiketi, hem içerik, hem de kapanış etiketini kapsayan yapıya atıf yapar. Örneğin, <h1>Başlık</h1> kodunda; <h1> açılış etiketini, “Başlık” yazısı içeriğini ve </h1> kapanış etiketini ve hepsi beraber “h1 elementini” temsil eder.
❗ Bazı elementler içerik taşımaz ve sadece bir açılış etiketinden oluşur. Örneğin, <img> etiketi bir resim eklemek için kullanılır ve kapanış etiketi gerektirmez.
| Başlangıç Etiketi | İçerik | Bitiş Etiketi |
|---|---|---|
<h1> | Bu bir başlık | </h1> |
<p> | Bu bir paragraf | </p> |
<br> | yok | yok |
İç içe “HTML” Elementleri (Nested HTML Elements)
İç içe “HTML” elementleri (nested HTML elements), bir HTML elementinin içinde başka bir HTML elementinin yer alması durumudur. Web sayfalarında içerikleri daha organize ve hiyerarşik bir yapıda göstermek için sıkça kullanılır. Bir element başka bir elementin içinde yer aldığında, dıştaki element ebeveyn (parent), içteki element ise çocuk (child) element olarak adlandırılır. Örneğin:
<!DOCTYPE html>
<html>
<body>
<h1>Bu bir başlık</h1>
<p>Bu bir paragraf</p>
</body>
</html>Yukarıdaki yapıda, ilk elementimiz olan <html> </html> içerisinde yer alan tüm elementler sayfanın içeriğini oluşturmaktadır. Ardından gelen <body> </body> elementi <h1> ve <p> elementlerini barındırmaktadır.
<!DOCTYPE html> | HTML5 belgesi olduğunu tanımlamak için kullanılır. |
<html> | bir HTML sayfasının kök elementidir. |
<body> | bir HTML sayfanın gövdesini tanımlar ve tüm görünür içerikler için bir kapsayıcıdır. |
<h1> | başlığı tanımlar (h1 etiketi aynı zamanda en büyük başlıktır). |
<p> | paragrafı tanımlar. |
❗ HTML etiketleri büyük küçük harf duyarlılığına sahip değildir. Yani demem o ki, <h1> ile <H1> arasında herhangi bir fark yoktur. Ancak “W3C” standartları gereği küçük harf kullanımı tavsiye edilmektedir.
❗ Her ne kadar bazı etiketlerde bitiş etiketi kullanmadan da çalışabilse de beklenmedik sonuçlar ve hatalar yol açabilir. Zaten yol yakınken temiz bir kod yazma alışkanlığı edinmeniz elzemdir.
Temel “HTML” Etiketleri
Temel HTML etiketleri, web sayfalarının iskeletini oluşturan ve en sık kullanılan yapıları tanımlayan etiketlerdir. Bunları bilmeniz, aşinalık kazanmanız sizin için çok faydalı olacaktır. Aşağıdaki tabloda, bu temel etiketlerin neler olduğunu, ne işe yaradıklarını ve örneklerini bulabilirsin.
| Etiket | İşlevi | Örnek Kullanım |
|---|---|---|
<html> | Tüm HTML dokümanını kapsar | <html>...</html> |
<head> | Meta bilgileri içerir | <head>...</head> |
<title> | Sayfa başlığını belirler | <title>Sayfa Başlığı</title> |
<body> | Görünen içeriği tanımlar | <body>...</body> |
<h1> - <h6> | Başlıkları tanımlar | <h1>Başlık</h1> |
<p> | Paragraf oluşturur | <p>Bu bir paragraf.</p> |
<a> | Bağlantı ekler | <a href="url">Link Metni</a> |
<img> | Resim ekler | <img src="resim.jpg" alt="Açıklama"> |
<ul>, <ol>, <li> | Listeleri tanımlar | <ul><li>Öğe 1</li><li>Öğe 2</li></ul> |
<div> | Blok düzeyinde bölümler oluşturur | <div>...</div> |
<span> | Satır içi elemanları gruplandırır | <span>Metin</span> |
<strong> | Kalın metin yapar | <strong>Vurgulu Metin</strong> |
<em> | İtalik metin yapar | <em>Eğik Metin</em> |
<br> | Satır başına geçer | <br> |
<table>, <tr>, <td> | Tablolar oluşturur | <table><tr><td>Veri</td></tr></table> |
Yukarıdaki tabloda görülen etiketler içinde stiller dediğimiz şey, bu etiketlerin görünüşlerini değiştirmek için kullanılan özelliklerdir. İlerleyen derslerimizde CSS stillerini inceleyeceğiz.