Sobes.tech
Middle

Kuidas semantiliselt jaotada sisu lehel?

sobes.tech AI

Vastus AI-lt

Semsantiline sisu eraldamine saavutatakse vastavate HTML5-märkide kasutamisega.

Peamised semantilised märgid:

  • <header>: Sissejuhatus või navigeerimis- või sissejuhatavate elementide grupp. Sageli sisaldab saidi pealkirja, navigeerimist, logo.
  • <nav>: Navigeerimislinkide plokk.
  • <main>: Dokumenti põhisisu. Peab olema lehel ainulaadne (mitte dubleeritud jaluses, päises, külgribal).
  • <article>: Iseseisev, sõltumatu sisulõik (artikkel, blogipostitus, kommentaar).
  • <section>: Eraldiseisev dokumenti osa (peatükk, lõik, põhilehel olev sisublokk). Peab omama pealkirja (<h1>-<h6>).
  • <aside>: Sisulõik, mis on kaudselt seotud põhisisuga (külgriba, tsitaat, reklaam).
  • <footer>: Sektsiooni või dokumendi jalus. Tavaliselt sisaldab teavet autorist, autoriõigustest, seotud dokumentidele viiteid.
  • <figure>: Iseseisev sisu (pilt, diagramm, tabel), mida saab dokumenti põhivoost välja viia ilma tähendust kaotamata. Sageli kasutatakse koos <figcaption>-iga.
  • <figcaption>: <figure>-i pealkiri.
  • <mark>: Esiletõstmine (märkimine) tekstile, millel on eriline tähendus või huvi kontekstis ümbritseva tekstiga.
  • <time>: Esindab konkreetset aega või ajavahemikku.

Semantiliste märkide kasutamine parandab ligipääsetavust, SEO-d ja koodi hooldatavust. Otsingumootorid ja abitehnoloogiad (ekraanilugejad) mõistavad lehe struktuuri paremini.