Helpottaako hyvä rakenne työtämme?

• Eritasoiset elementit - erilaiset käyttökohteet

Ehdottomasti! Jo alussa meidän kannattaa opetella ajattelemaan WWW-sivun rakennetta ulkoasun sijaan. Ikävä kyllä, monet WWW-sivujen tekijät unohtavat kokonaan rakenteen ulkoasun kustannuksella ja saavat varmasti kärsiä asiasta. Tällöin esimerkiksi ulkoasun muuttaminen voi olla todella työlästä. Hyvillä rakenteen määrittelyillä saamme aikaan selkeitä ja rakenteeltaan hyviä WWW-sivuja, joista löydämme etsimänsä helposti esimerkiksi sivuja päivitettäessä. Lisäksi hyvällä rakenteen määrittelyllä mahdollistamme ulkoasun muuttamisen mahdollisimman helposti ja kootusti. Tällöin voimme esimerkiksi muuttaa kaikkia WWW-sivun (tai sivuston) toisen tason otsikoiden kirjasintyyppiä muutamassa sekunnissa. Jos rakennetta ei ole määritelty oikein voi kirjasintyypin muuttamiseen mennä useita minuutteja jo yhdelläkin sivulla.

Erityisen tärkeää on ajatella rakennetta graafisia HTML-editoreja käyttäessämme. Meidän ei kannata kiinnittää ulkoasuun mitään huomiota sivun rakenteen ja sisällön määrittämisen yhteydessä. Graafisia HTML-editoreja käyttäessämme rakenne kannattaa määritellä editoreista löytyvien rakenteellisten tyylien avulla. Tällaisia tyylejä ovat esimerkiksi:

• Otsikko 1 - Otsikko 6 (engl. Heading - Heading 6) -tyyleillä määritellään otsikot tasojen mukaisesti. Otsikko1 on korkeimman tason otsikko eli sivun pääotsikko.
• Normaali, leipäteksti (engl. Normal / Paragraph) -tyylillä määritellään kaikki tavalliset teksikappaleet.
• Luettelomerkeillä varustettu luettelo, järjestämätön lista (engl. Bulleted List, Unordered List) -tyylillä määritellään järjestämätön lista, jonka alkioilla ei ole tiettyä järjestystä.
• Numeroitu luettelo, järjestetty lista (engl. Numbered List, Ordered List) -tyylillä määritellään järjestettu lista, jonka alkioilla on tietty järjestys.
• Muotoiltu (engl. Formatted) -tyylillä määritellään teksti, jossa halutaan säilyttää kirjoitusmuotoilut, kuten välilyönnit ja rivinvaihdot. Tyyli soveltuu erityisesti käytettäväksi erilaisten ohjelmakoodien esittämiseen. Esimerkiksi tämän artikkelin esimerkkeissä on käytetty tätä tyyliä.
• Vahvennus (engl. Strong) -tyylillä määritellään tekstin joukosta erityisesti korostettavia asioita. Selainikkunassa vahvennus näytetään oletuksena lihavoituna.
• Korostus (engl. Emphasis) -tyylillä määritellään tekstin joukosta korostettavia asioita. Selainikkunassa korostettu teksti näytetään oletuksena kursivoituna.

Tyylejä käyttäessämme kannattaa miettiä aina tyylin merkitystä WWW-sivun rakenteelle. Otsikoita ei siis saisi tehdä suurentamalla kirjasinta ja lihavoimalla tekstiä vaan se pitäisi tehdä merkitsemällä otsikko oikean tasoisella tyylillä. Kun sivun rakenne on kunnossa, voimme muuttaa sivun ulkoasua nopeasti ja yhtenäisesti. Hyvällä rakenteen määrittelyllä parannetaan samalla myös sivun esteettömyyttä. Kun rakenne on kunnossa emmekä ole kiinnittäneet ulkoasua WWW-sivuun, niin WWW-sivua voidaan lukea esteettömästi monenlaisilla selaimilla.

Eritasoiset elementit - erilaiset käyttökohteet

Lohkotason eli kappaletason elementeillä tarkoitetaan yhtenäisen lohkon muodostavia elementtejä. Tällaisia lohkoja ovat esimerkiksi tekstikappaleet (p-elemementin sisällä) ja listat (ul- tai ol-elementin sisällä). Yhden lohkotason elementin sisään (esim. div-elementti) voimme joissakin tapauksissa laittaa useitakin lohkotason elementtejä eli esimerkiksi tekstikappaleita. Tekstikappaleen tai otsikoiden sisään emme kuitenkaan voi laittaa muita lohkotasoisia elementtejä, vaan ainoastaan merkkitason elementtejä. Lohkotason elementeillä on monenlaista käyttöä, koska niillä voimme merkitä erilaisia WWW-sivun rakenteellisia osia tai voimme erotaa toisistaan WWW-sivun navigoinnin ja sisällön.

Merkkitason elementit (esim. strong ja img) sijaitsevat aina jonkin lohkotason elementin sisällä. Kuvat ja vahvennukset sijaitsevat useinmiten tekstinkappaleen, listan tai taulukon sisällä. Merkkitason elementin sisällä voi sijaita toinen merkkitason elementti (vahvennuksen sisällä voi olla linkki), mutta ei koskaan lohkotason elementtiä.