Sijoita sisältö main-elementtiin ja käytä vain yhtä main-elementtiä
Määritä ainoa ensisijaisen sisällön alue.
Sijoita sisältö main-elementtiin ja käytä vain yhtä main-elementtiä on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Web Accessibility Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
main on pääroolissa
Jokaisella sivulla on yksi tähti: sen ainutlaatuinen sisältö. main-elementissä tämä sisältö sijaitsee erillään ylä- ja alatunnisteista.
Aina yksi main
Sivulla pitäisi olla täsmälleen yksi main-maamerkki. Kaksi main-elementtiä hämmentää käyttäjiä, jotka odottavat yhtä ensisijaista kohdetta.
Mitä sen sisälle kuuluu
Sijoittakaa sivun ydinsisältö main-elementtiin: artikkeli, lomake tai koontinäyttö. Siis se sisältö, jota käyttäjä oikeasti tuli katsomaan.
<main>
<h1>Your dashboard</h1>
<p>Today's stats...</p>
</main>Mikä jää ulkopuolelle
Toistuvat osat, kuten sivuston logo, yleinen navigointi ja alatunnisteen linkit, kuuluvat main-elementin ulkopuolelle, koska ne eivät ole tälle sivulle ainutlaatuisia.
Ohituslinkin kohde
Ohituslinkki osoittaa main-elementtiin, jotta näppäimistöä käyttävät käyttäjät voivat siirtyä suoraan sisältöön ohi jokaisella sivulla toistuvan yläosan.
<a href="#main">Skip to content</a>
<main id="main">...</main>Tee main-elementistä kohdistettava
Lisätkää main-elementille tabindex-arvoksi -1, jotta ohituslinkki voi siirtää kohdistuksen sen sisälle ilman, että elementti tulee itsenäisesti saavutettavaksi sarkaimella.
<main id="main" tabindex="-1">
...
</main>Kaksi main-elementtiä, piilotussääntö
Jos tarvitsette joskus toisen main-elementin, kaikki paitsi yksi on oltava hidden-tilassa. Vain yksi näkyvä main-elementti saa olla kerrallaan.
Älkää sijoittako main-elementtiä sisäkkäin
main-elementti ei voi sijaita article-, aside-, nav-, header- tai footer-elementin sisällä. Se sijaitsee sivun bodyn ylimmällä tasolla.
role main -varmistus
Hyvin vanhoja selaimia varten voitte lisätä role-arvoksi main varmistukseksi, mutta natiivi main-elementti on oikea moderni valinta.
<main role="main">...</main>Miksi yksi main-elementti auttaa
Kun main-elementtejä on yksi, ruudunlukijaa käyttävät käyttäjät painavat yhtä näppäintä ja päätyvät täsmälleen sisältöön jokaisella sivulla ja joka kerta. 🎯
Selkeä sivurakenne
Yläosa, sitten navigointi, sitten yksi main-elementti ja lopuksi alatunniste. Tämä ennakoitava rakenne tekee sivusta helposti hahmotettavan myös kuuntelemalla.
Pikatarkistus
Kuinka monta näkyvää main-maamerkkiä yhden sivun pitäisi tarjota?
Kertaus: yksi selkeä main
Opitte sijoittamaan ainutlaatuisen sisällön yhteen main-elementtiin, pitämään toistuvat osat sen ulkopuolella ja käyttämään sitä ohituslinkin kohteena. 🙌
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Sijoita sisältö main-elementtiin ja käytä vain yhtä main-elementtiä” ilmainen?
Kyllä – oppitunnin ”Sijoita sisältö main-elementtiin ja käytä vain yhtä main-elementtiä” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Web Accessibility Academy-kurssin, päivitä CoddyKit PROhon. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Sijoita sisältö main-elementtiin ja käytä vain yhtä main-elementtiä”?
Määritä ainoa ensisijaisen sisällön alue. Harjoittelet Web Accessibility Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Web Accessibility Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Web Accessibility Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Sijoita sisältö main-elementtiin ja käytä vain yhtä main-elementtiä”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Web Accessibility Academy-oppitunnilla?
Kyllä. Jokainen Web Accessibility Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- header, nav, main, footer: neljä tärkeintä
- Sijoita sisältö main-elementtiin ja käytä vain yhtä main-elementtiä
- Nimeä useita alueita aria-labelilla
- Maamerkkien avulla navigointi: miten käyttäjät liikkuvat sivulla