Sənədin quruluşu
header, nav, main, article, section, aside, footer.
Bütün dərslər · HTML dərsləri: sıfırdan öyrən
Semantik bölmələr
Səhifəni mənalı hissələrə bölən elementlər var: <header> giriş və ya loqo hissəsi, <nav> əsas naviqasiya, <main> səhifənin əsas məzmunu (səhifədə bir dənə), <article> müstəqil yazı, <section> mövzu bölməsi, <aside> yan məlumat, <footer> alt hissə.
<body>
<header><h1>My Blog</h1></header>
<nav><a href="/">Home</a> <a href="/posts">Posts</a></nav>
<main>
<article>
<h2>First post</h2>
<p>Text of the post…</p>
</article>
<aside>Related links</aside>
</main>
<footer>© Nibras Code</footer>
</body>Niyə vacibdir
Ekran oxuyucuları bu bölmələr arasında tez keçid edir, axtarış sistemləri səhifənin quruluşunu daha yaxşı anlayır, kod isə oxunaqlı olur. Ümumi <div> və <span> yalnız mənalı element tapılmayanda və CSS üçün qrup lazım olanda işlənir.
- Başlıq iyerarxiyasını section-lar daxilində də qoru.
- Menyuları <nav> içində siyahı kimi yaz.
- Hər <section>-ın başlığı olsun.
<nav aria-label="Main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Saytın ümumi planı
Kod yazmazdan əvvəl kağızda səhifənin qutularını çək: yuxarı hissə, naviqasiya, əsas məzmun, yan panel, alt hissə. Sonra hər qutuya uyğun semantik element seç. Eyni plan sayt boyu təkrarlanırsa istifadəçi özünü rahat hiss edir.