Bugün arama motoru optimizasyonu, web'de görünürlük elde etmek için büyük bir kaldıraçtır. Ancak birçok web sitesi, botlar için makine tarafından okunabilirliği optimize etmek için semantik HTML 5 etiketleri kullanmaz.
HTML semantiğinin genellikle bu kadar kötü olmasının bir nedeni: Web siteleri oluşturmak için kopyala&yapıştır ve şablonlar kullanan daha fazla programlama dışı programcı var. Bu şablonlar genellikle semantik açısından zayıf bir şekilde oluşturulmuştur.
Semantik kodun büyük bir yararı, makinelerin ve insanların onu daha iyi okuyabilmesidir.
Büyük bir sorun: “DIVitis”
Bir web sitesinin biçimlendirmesi esas olarak çok sayıda iç içe geçmiş tarafından yapılandırılmışsa divs
ve divs
yalnızca yerleşim nedenleriyle oradaysa , buna DIVitis denir . Ekran görüntüsüne aşağıdan bakın. Wordpress için bir şablon sistemi olan Divi'nin bir şablonundan alınmıştır.
Bir klasiğin ekran görüntüsü: En iyisi DIVits
Etiket adı içeren div'ler için her sınıf adı yazdığınızda, div'i karşılık gelen anlamsal etiketle değiştirmeli ve sınıf adını basitleştirmelisiniz.
Örnek:
❌div.nav-main
✔️ nav.main
İşte bazı anlamsal etiketlerin bir listesi.
- <makale>
- <yan>
- <detaylar>
- <şekil yazısı>
- <şekil>
- <altbilgi>
- <başlık>
- <ana>
- <işaret>
- <nav>
- <bölüm>
- <özet>
- <zaman>
Anlamsal HTML şablonum
Benim düşünceme göre, çoğu web sitesi aşağıdaki ortak bilgilerle oluşturulabilir.
Lütfen bölümü görmezden gelin , head
bu makale tamamen body
bölümle ilgili. Gösterilen head
bölümden yalnızca eksiksiz olması amacıyla bahsedilmiştir.
Benim kod örneğimde, tüm sayfayı gören body
isteğe bağlı bir etiket var. div#page
Bölümün içinde div#page
çoğunlukla üç bölüm kullanıyorum:
header
main
footer
-
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Meta-Title</title> <meta name="description" content="meta-description."> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="page"> <header></header> <main></main> <footer></footer> </div> </body> </html>