Div ja nimeäminen?

Sen id:n idea on antaa yksilöllinen tunniste elementille, nimi se ei ole. Kahta saman id:n omaavaa elementtiä ei saa olla sivulla. Tällä yksilöllisellä id:llä voit sitten etsiä juuri sen elementin koodissa tai kohdistaa siihen css:llä tyylisääntöjä, tai sijoittaa sen vaikkapa haluamaasi paikkaan.

Muuten se id voi olla mitä tahansa kunhan sen muoto on ok eikä sisällä kiellettyjä merkkejä. Kannattaa laittaa joku kuvaava nimi ettei tarvitse aina miettiä että mikähän se nyt taas on. joku #sdfsdfsd ei paljon siellä css:ssä kerro, mutta esim #navmenu tai #vasen kertonee riittävästi.. riippuu tapauksesta. Oman järjen käyttö on sallittua :)

Ennen kuin alkaa edes nimeämään (täi käyttämään) div-elementtejä, kannattaa miettiä että että onko div edes oikea elementti kyseiseen tarkoitukseen. Aika paljon näkee esmes tällaista:



Eka linkki
Toka linkki



Paremmin homman vois hoitaa niin että tuon main-nav-tyyli sijoitetaan suoraan ul-elementtiin:


Eka linkki
Toka linkki


Koodia on näin vähemmän, se on selkeämpää ja helpompaa päivittää. Elementteinä pitäisi AINA käyttää ainostaan semanttisesti tarkoitukseen sopivaa html-elementtiä esmes otsikoihin (h1, h2, h3 ym.), listoihin ul tai ol elementtejä ja tekstikappaleisiin p elementtejä. Näin paitsi Googlen hakurobotit, ääniselaimia käyttävät ja mobiiliselaajat pääsevät helposti käsiksi sivun sisältöön, sivut näkyvät myös ymmärrettävinä tilanteissa joissa sivujen käyttäjällä on Css-tuki jostain syystä pois päältä.

Tsekkaa sivusi koodausvaiheessa aina välillä miltä se näyttää ilman mitään css-tyylejä. Suosittelen Web developer toolbar-palikan asentamista osaksi Firefoxia: https://addons.mozilla.org/en-US/firefox/addon/60 . Tästä Firefox-lisäosasta on sivuja tarkastellessa helppo ottaa css-tyylit väliaikaisesti pois päältä, ja katsoa että kuinka looginen www-sivujen rakenne on ilman niitä. Muutenkin tämä on web-sivujen rakentajan ykköstyökaluja (ja vielä ilmainen).

Usein kuulee sanottavan että div-elementillä ei ole omaa itsenäistä merkitystä ja sitä voi ja kannattaa käyttää joka paikassa. Tämä on VÄÄRINKÄSITYS. Div on lyhenne sanasta division (suom. osasto, osa, jaottelu). Itse käytän sitä vain ja ainoastaan tässä merkityksessä, silloin kuin se on mahdollista, jakamaan sivua eri osastoihin. Esim. , .

Samanlaista ajattelua kuin html-elementtien huolelliseen semanttiseen valitsemiseen kannattaa käyttää divien nimeämiseen. Niiden nimeämisellä ON merkitystä. Ajattele vaikka tilannetta jossa jonkun toisen kuin itsesi pitäisi päivittää sivuja ja divit ovat luokkaa div id="blaablaa". Työ on takuulla vaikeampaa kun pitää yrittää ymmärtää että mihin tämä epämääräisesti nimetty elementti oikein viittaakaan. Tai jos vaikka päivität tätä tekemääsi sivua kolmen vuoden päästä, et tod. näk. kiitä itseäsi kovinkaan paljon... ;)

Suosittelen käyttämään www-sivun peruselemettien nimeämiseen alan vakiintuneita englanninkielisiä termejä. Tämä siksi että web disainistasi innostunut ei-suomenkielinenkin ymmärtäisi sivujesi logiikan ja voisi oppia työstäsi, kun hän tarkastelee koodia. Ja voisit yllättyä kuinka usein lähde- ja css-koodia tarkastellaankaan! Lähes aina kun törmään sivuun joka tuntuu vähänkään kiinnostavalta, niin katson pellin alle klikkaamalla hiiren kakkospainilleella kohtaa "näytä lähdekoodi". Minulle koodin "siisteys" ja ymmärrettävyys on myös iso osa sivuston uskottavuutta.

Sitten niistä web-sivujen osien nimeämiskäytännöistä...

* Elementti joka usein ympäröi kaikkea sivun sisältöä ja asettaa sille leveyden ja asemoi sen suhteessa selainikkunaan: div id="wrapper" tai div id="container" tai div id="page-wrap".

* Sivun yläosa jossa on usein esmes logo ja h1-elementti: div id="header" tai div id="branding" . Header on laajemmin käytetty, mutta branding semanttisesti osuvampi.

* Elementti joka usein ympäröi sivun pääsisältöä: div id="main-content" tai div id="content"

* Sivupalkit: div id="sidebar" tai div id="additional-content" . Tai jos sivupalkilla on selkeä ja MUUTTUMATON tarkoitus niin esmes div id="products"

* Sivun alaosa jossa on usein esmes yhteys- ja copyright-tietoja: div id="footer" tai div id="siteinfo" . Footer on käytetympi, mutta siteinfo useimmiten semanttisesti oikeampi.

Sivun elementejä ei kannata koskaan nimetä ulkonäön tai sijainnin suhteen (id="red" , id="left" ), vaan TARKOITUKSEN suhteen (id="huomio", id="sidebar" ) Tämä siksi että saatatkin sijoittaa sivuston tekovaiheessa tai myöhemmin kyseisen elementin eri paikkaan, tai muuttaa sen ulkonäköä. Tällöin elementin nimi ja ulkonäkö/siajinti ovat eriparia.