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 divsve divsyalnı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 , headbu makale tamamen bodybölümle ilgili. Gösterilen headbölümden yalnızca eksiksiz olması amacıyla bahsedilmiştir.
Benim kod örneğimde, tüm sayfayı gören bodyisteğe bağlı bir etiket var. div#pageBölümün içinde div#pageçoğunlukla üç bölüm kullanıyorum:
headermainfooter-
<!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>
