Səhifədə məzmunu semantik olaraq necə bölmək olar?

Məzmunun semantik bölünməsini müvafiq HTML5 etiketlərinin istifadəsi ilə əldə etmək mümkündür.

Əsas semantik etiketlər:

• <header>: Giriş və ya naviqasiya və ya giriş elementlərinin qrupudur. Tez-tez sayt başlığı, naviqasiya, loqo daxil edir.
• <nav>: Naviqasiya linkləri bloku.
• <main>: Sənədin əsas məzmunu. Səhifədə unikal olmalıdır (footer, header, sidebar-də təkrarlanmamalıdır).
• <article>: Öz-özünə yetərli, müstəqil məzmun parçası (məqalə, blog yazısı, şərh).
• <section>: Sənəddən ayrılmış bölmə (fəsil, paraqraf, əsas səhifədə məzmun bloku). Başlıq (<h1>-<h6>) olmalıdır.
• <aside>: Əsas məzmunla dolayı əlaqəli olan məzmun hissəsi (yan panel, sitat, reklam).
• <footer>: Bölmə və ya sənədin altbilgisi. Adətən müəllif haqqında məlumat, müəllif hüquqları, əlaqəli sənədlərə keçidlər ehtiva edir.
• <figure>: Müstəqil məzmun (şəkil, diaqram, cədvəl), sənədin əsas axınından çıxarılmadan köçürülə bilər. Tez-tez <figcaption> ilə istifadə olunur.
• <figcaption>: <figure> elementinə başlıq.
• <mark>: Mətnə vurğu (işarə) edir, ətrafdakı mətn kontekstində xüsusi əhəmiyyət və ya maraq kəsb edir.
• <time>: Konkret vaxt və ya zaman intervalını təmsil edir.

Semantik etiketlərin istifadəsi əlçatanlığı, SEO və kodun saxlanmasını yaxşılaşdırır. Axtarış motorları və köməkçi texnologiyalar (ekran oxuyucular) səhifənin quruluşunu daha yaxşı başa düşür.