Etiketler ve nitelikler
Etiket (tag) — hiper metin biçimlendirme dilinin bir öğesi. Herhangi bir web sayfasının en küçük bileşenidir. Her etiket bir varlığı belirtir: Bir başlık, bir liste, bir metin paragrafı, bir resim.
Bir belgenin metnindeki etiketleri belirtmek için, etiketin adının ve niteliklerinin belirtildiği keskin parantezler kullanılır.
<işaret adı>...</işaret adı>.
Açılış etiketi öğenin nerede başladığını, kapanış etiketi ise nerede bittiğini gösterir. Kapanış etiketi, etiket adının önüne bir eğik çizgi (/) eklenerek oluşturulur. Etiketin içeriği — içerik — açılış ve kapanış etiketleri arasında yer alır.
Etiket örnekleri.
<section>Bölüm</section>
<p>Paragraf</p>
<a>Bağlantı</a>
<button>Düğme</button>
Yorumlar
Yorumlar, kaynak kodda açıklamalar, yorumlar bırakmak, bir kod parçası hakkında geçici olarak yorum yapmak vb. için kullanılır.
<!-- Bu bir yorumdur, içeriği sayfada görüntülenmeyecektir -->
<p>Bu bir metin paragrafıdır, sayfada görüntülenecektir.</p>
<!--
Yorum çok satırlı olabilir.
Bu, daha kapsamlı açıklamalar için uygundur.
-->
Öznitelikler
Öznitelikler, bir öğenin özelliklerinin ve davranışının değiştirilebildiği ek etiket ayarlarıdır. Her etiketin zorunlu ve isteğe bağlı öznitelikleri vardır, az sayıda olabilir veya hiç olmayabilir.
Öznitelikler açılış etiketinin içinde saklanır ve değerleri çift ters virgül içine alınır. Birden fazla öznitelik bir boşlukla ayrılır.
<a href="https://google.com" class="link">...</a>
<img src="cat.jpg" alt="cute cat" />
<input type="text" name="user_name" />
<button type="submit">...</button>
<p class="text">...</p>
Şimdi <a> etiketlerinin bazı özelliklerine bakalım.
<a href="http://google.com" target="_blank" title="Google İnternet arama motoru">
Google.com
</a>
href- adres strony, na którą przejdzie użytkownik po kliknięciu w tekst linku.target- wskazuje, w której zakładce strona zostanie otwarta po kliknięciu w link.title- dodaje podpowiedź do tekstu linku.
Przyjrzyjmy się niektórym atrybutom znaczników <img>.
<img
src="https://picsum.photos/640/480"
alt="Oluşturucudan herhangi bir görüntü"
/>
src- resim adresi.alt- resim yüklenmediğinde görüntülenecek alternatif metin.
Mevcut etiket nitelikleri ve bunların amaçları hakkında bilgi edinmek için htmlreference.io gibi belgelere veya kılavuzlara gidebilirsiniz.
Eşleştirilmiş etiketler
İçeriği saran, özelliklerini değiştirmenize veya anlamlarına göre gruplandırarak görüntülemenize olanak tanıyan açılış ve kapanış etiketlerinden oluşur. Diğer etiketler, matrioshka'ya benzer şekilde eşleştirilmiş etiketlerin içine yerleştirilebilir.
<!-- Başlık ve paragraf içeren makale -->
<article>
<h1>Eşleştirilmiş etiketler hakkında kısa bilgi</h1>
<p>
Çoğu etiket eşleştirilmiştir. İçerikleri şu etiketler arasında yer alır
açılış ve kapanış etiketi.
</p>
</article>
Tek etiketler
Yalnızca bir açılış etiketinden oluşur, metin içeriği içermez ve özniteliklere dayalı içerik veya davranış alır. Belge özelliklerini değiştirmek, dosyaları bağlamak vb. için kullanılır.
<!-- Meta-bilgi kodlaması -->
<meta charset="utf-8" />
<!-- Metin kutusu -->
<input type="text" />
<!-- Resim -->
<img src="cat.jpg" alt="cool cat" />
Önceki HTML standartlarında, tek etiketler zorunlu olarak kapanış parantezinden önce ters eğik çizgiyle / ile yazılırdı. Örneğin, <img /> veya <input />. Modern standartta bu isteğe bağlıdır ve hiçbir şeyi etkilemez.
Yerleştirme etiketleri
Belirli kurallara göre, etiketler birbiri içine yerleştirilebilir. İç içe geçerken, matrioshka ilkesine göre içine alındıkları sıra korunmalıdır.
<sign1>.
<sign2>.
<sign4>...</sign4>.
<sign5>...</sign5>.
</sign2>
<sign3>
<sign6>...</sign6>.
</sign3>
</sign1>
Burada bir bağlantı ve vurgulanmış metin ile önemli paragraf etiketleri ve bir açıklama ile avantajların bir listesi bulunmaktadır.
<p>
<a href="squoosh.app">Squoosh</a> - görüntülerin <em>optimizasyonu</em> hizmeti.
</p>
<p>Zalety</p>
<ul>
<li>Tarayıcıda çalışır</li>
<li>Sistem yüklenmiyor</li>
<li>Kullanışlı arayüz</li>
</ul>
Ancak bu versiyonda sorunlar var (çizgiler vurgulanmış).
<!-- Etiketlerin kapatılma sırasına uyulmuyor -->
<p><a href="squoosh.app">Squoosh</a> - hizmet <em></a> optimizasyonu</p> görüntüler.</em>
<!-- Etiketlerin iç içe yerleştirilmesi için belirli kurallara uyulmamıştır -->
<ul>
<p>Avantajlar</p>
<li>Tarayıcıda çalışır</li>
<li>Sistem yüklenmiyor</li>
<li>Kullanışlı arayüz</li>
</ul>
HTML Spesifikasyonu
Spesifikasyon HTML Yaşam Standardı - HTML'nin standartlarını, yeteneklerini ve gelecekteki gelişimini açıklayan ana belge.
Düzeni incelemek için, öncelikle ne tür öğeler olduğunu, her bir öğenin ne anlama geldiğini ve birbirlerinin içine nasıl yerleştirilebileceklerini açıklayan önemli bölümler vardır.
Bir HTML öğesi - HTML standardındaki belirli bir anlamsal varlığı tanımlayan bir terimdir. Örneğin, bir paragraf, bir başlık, bir liste veya bir bağlantı. Bir HTML belgesinde, bir öğe bir etiketle (çift veya tek) temsil edilir — HTML sözdizimi.
Yerleştirme etiketleri
Bir etiketin iç içe geçip geçemeyeceğini belirlemek için kullanılan algoritma oldukça basittir.
- Specification adresine ulaşırız ve ihtiyacımız olan öğeyi buluruz.
- İç içe yerleştireceğimiz elemanın içerik modelini (Content model) kontrol ediyoruz.
- İç içe yerleştirdiğimiz elemanın kategorilerini (Categories) kontrol ediyoruz.
- Kategori uygunsa ve kısıtlamalar bunu yasaklamıyorsa, yuvalayabilirsiniz, aksi takdirde imkansızdır.
Birkaç gün HTML kullandıktan sonra, ana etiketlere aşina olduğunuzda iç içe yerleştirme kuralları sezgisel olarak anlaşılacağından, öğeleri birbiri içinde doğru şekilde iç içe yerleştirmeye alışacaksınız.
Kılavuzlar
Şartnamelere ek olarak, elinizin altında kılavuzlar ve çekmeceler bulundurmak iyi bir fikirdir. Her şeyi ezberlemek gerekli değildir; daha spesifik veya nadiren kullanılan şeylere her zaman bakılabilir.