Sisäkkäiset tasot ilman hyppimistä
Siirry järjestyksessä h2-otsikosta h3-otsikkoon, jotta rakenne pysyy loogisena.
Sisäkkäiset tasot ilman hyppimistä 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.
Otsikot muodostavat rakenteen
Otsikkotasot rakentavat sisäkkäisen luettelon kaltaisen rakenteen. Tasojen numerot kertovat käyttäjille, mitkä osiot kuuluvat minkäkin sisään, aivan kuten esseen jäsennys. 🌳
Edetkää yksi taso kerrallaan
h2-otsikon jälkeen alaosion otsikkona käytetään h3:a, ei h4:ää. Tasojen kasvattaminen yksi askel kerrallaan pitää rakenteen johdonmukaisena ja helposti seurattavana.
<h2>Shipping</h2>
<h3>Delivery Times</h3>Tason yli hyppääminen rikkoo rakenteen
Siirtyminen suoraan h2:sta h4:ään antaa ymmärtää, että h3 puuttuu. Rakenteeseen syntyy aukko, ja käyttäjät alkavat ihmetellä, mitä heiltä jäi väliin.
Ylöspäin palaaminen on sallittua
Voitte palata ylöspäin minkä tahansa määrän tasoja. Kun h4-otsikon jälkeen palataan h2:een, se tarkoittaa yksinkertaisesti uuden ylimmän tason osion alkamista. Se on sallittua.
<h2>Payment</h2>
<h3>Cards</h3>
<h4>Visa</h4>
<h2>Returns</h2>Tasot ilmaisevat hierarkiaa
Jokainen askel alaspäin tarkoittaa sisältymistä. h3 on osa sen yläpuolella olevaa h2-osiota, ei sen sisar. Numero ilmaisee suhdetta, ei kokoa.
Älkää valitko ulkonäön perusteella
Älkää valitko h4:ää vain siksi, että haluatte pienemmän tekstin. Valitkaa rakenteen tarvitsema taso ja määrittäkää tekstin koko CSS:llä.
Sisariosioilla on sama taso
Samalla syvyydellä olevilla osioilla on sama otsikkotaso. Yhden aiheen alla olevien kolmen samanarvoisen alaosion tulisi kaikkien olla h3-otsikoita rinnakkain.
<h2>Menu</h2>
<h3>Starters</h3>
<h3>Mains</h3>
<h3>Desserts</h3>Aloittakaa h1:n alapuolelta
Ensimmäinen osion otsikko on h2, joka sijaitsee heti ainoan h1:n alla. Rakenne kasvaa alaspäin tuosta yhdestä juuresta.
Syvä sisäkkäisyys on harvinaista
Useimmat sivut päättyvät tasolle h3 tai h4. Jos päädytte usein h6-tasolle, sisältö kannattaa ehkä jakaa yksinkertaisemmiksi ja matalammiksi osioiksi.
Tyhjät tasot hämmentävät
Älkää lisätkö sisällötöntä h3-otsikkoa vain päästäksenne tietylle tasolle. Jokaisen otsikon tulee esitellä sen alle tulevaa todellista sisältöä.
Testatkaa lukemalla numerot
Lukekaa otsikkonne ääneen pelkkinä numeroina. Sujuva 1, 2, 3, 2, 3 toimii; äkillinen siirtyminen 2:sta 4:ään paljastaa väliin jääneen tason.
Pikatarkistus
Teillä on h2. Mikä on sen sisällä olevan alaosion oikea taso?
Kertaus
Opitte etenemään otsikkotasoissa alaspäin yksi kerrallaan, olemaan koskaan hyppäämättä tason yli alaspäin ja valitsemaan tasot hierarkian, ei koon perusteella. ✅
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 ”Sisäkkäiset tasot ilman hyppimistä” ilmainen?
Kyllä – oppitunnin ”Sisäkkäiset tasot ilman hyppimistä” 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 ”Sisäkkäiset tasot ilman hyppimistä”?
Siirry järjestyksessä h2-otsikosta h3-otsikkoon, jotta rakenne pysyy loogisena. 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 ”Sisäkkäiset tasot ilman hyppimistä”-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
- Yksi h1 kullakin sivulla: pääaiheen nimeäminen
- Sisäkkäiset tasot ilman hyppimistä
- Otsikot ovat navigointia, eivät vain suurta tekstiä
- Sivun rakenteen tarkistaminen kuuntelemalla