herlig.net
- ein blog om alt og ingenting. Mest ingenting.
Markering er viktig!
I det siste har eg sett ein god del folk som har funne ut at tabell-layout og kode fra forige årtusen ikkje er så bra at det gjer noke, og som gjer alt dei kan for å konvertere til meir strukturbasert HTML. Eg har dog sett ein del ting som kanskje blir oppfatta litt feil, som eg vil prøve å forklare i denne artikkelen.
Først av alt - «Markering» er det du på engelsk refererer til som «Markup», slik at du veit det. Ikkje alltid norske ord er like fine.
Heldigvis er det mange som gjer alt dei kan for å konvertere. Dei fleste tilfella av slike personar ser eg gjennom webdesign-forumet til hardware.no, og her er det etter kvart blitt ein del dyktige folk på området. Ein ting eg likevel ser til stadigheit, er at mange tolkar det å konvertere til strukturbasert og semantisk HTML, samt få vekk tabell-layouten som «divs og CSS». I og for seg ein enkel måte å forstå på, men det blir litt feil i seg sjøl.
Kva er galt med «divs og css»?
Det er igrunn ikkje noko galt med det - men det er ein svært simpel og mangelfull måte å oppfatte det på. Grunnen er rett og slett at veldig mange no plutselig skal bruke div-elementet til alt, og stilisere det med CSS. Mange gløymer fullstendig - eller har aldri heilt fått med seg meininga med strukturbasert HTML kombinert med aktiv bruk av CSS. Dei gløymer heilt dei mest elementære elementa i HTML som for eksempel hN og p. For eksempel blir ofte overskrifter («Sideheadere») ofte satt som eit eget div-element som har blitt stilisert med CSS, og ellers er berre tomt. Andre ting folk får med seg, er at ein meny skal markerast som ei uordna liste (ul). Det er jo i og for seg bra det - men ikkje når dei blir stilisert med CSS til ein grafisk layout - og den kun inneheld tomme listepunkt! Tomme element gir ikkje meining - sjølv om visse element (div og delvis span) kan bli brukte utan innhold for å skape ein grafisk layout. Dette er fordi desse elementa i seg sjøl ikkje har noko semantisk betydning. Under har eg eit veldig typisk eksempel på eit HTML-dokument der alt er styrt av CSS, og markeringa er dårleg.
<div id="header"></div>
<ul id="meny">
<li><a href="side.htm"></a></li>
<li><a href="side.htm"></a></li>
<li><a href="side.htm"></a></li>
<li><a href="side.htm"></a></li>
</ul>
Feilen i denne lille kodebiten er at ingen av elementa har innhald - ingen av dei har logisk meining. Der er inga overskrift, og menyen er tom. Nettlesaren veit ikkje kva dei forskjellige tinga er. Kun sluttbrukar (med grafisk/høgoppløseleg nettlesar) forstår dette, fordi innhaldet gjerne kjem fram ved hjelp av CSS i form av bileter. Koden over kunne ein ha skrive langt betre, og med innhald:
<h1>Petters bakeri</h1>
<ul>
<li><a href="side.htm">Bolller</a></li>
<li><a href="side.htm">Kaker</a></li>
<li><a href="side.htm">Brød</a></li>
<li><a href="side.htm">Andre varer</a></li>
</ul>
Kodebiten over er langt bedre. Alle elementa har ei oppgave og gir meining, utan at dette nødvendigvis må påverke ein eventuell grafisk layout i det heile tatt. Med riktig bruk av CSS kunne det ferdige (visuelle) resulatet vert identisk - men meir logisk.
Riktig markering
«Kvifor skal du absolutt ha så riktig markering?» lurer du kanskje på. Det er rett og slett fordi utan riktig bruk av HTML så forsvinn litt av poenget med å skrive strukturbasert kode, og til dels poenget med CSS også. Alt i eit HTML dokument er der for å fortelle nettlesaren kva innhaldet er, og kva oppgåve dei forskjellige delane av sida har. CSS skal ikkje gi sida meining - CSS skal styre presentasjonen av sida - ikkje fortelle deg som brukar at i overskrifta står det «Min hjemmeside!» i form av eit bilete. Det er HTML si oppgåve, å fortelle det til nettlesaren vel og merke. CSS, derimot, skal presentere denne overskrifta på ein finare måte til deg som brukar.
Struktur eller semantikk?
Når du har lest så langt - så har du sikkert høyrd om orda «Semantikk» og «Struktur» når det er snakk om HTML. Mange ser på dette som to ord med samme betydning. Dette er feil. Forskjellen er der, dog litt vanskelig å forklare:
- Struktur
- er måten dokumentet er satt opp på: at alle element har innhald og kjem i ein logisk samanheng i forhold til kvarandre.
- Semantikk
- er meir fokus på om eit enkeltelement er brukt riktig. Ordet «Semantikk» i seg sjøl betyr riktig bruk av språk/ord, som passar godt inn også i HTML. Sjå også Generell semantikk.
Til slutt: Ta deg tid med markeringa om du fortsatt er i en lærefase. Etter kvert blir det en vane, og til slutt skriv ein så godt som perfekt utan å tenke seg om i det heile tatt. Når du skriv riktig kode, der alle element har innhald, vil også sidene dine bli fullstendig leselige for andre nettlesarar enn grafiske nettlesarar på høgoppløselige skjermar. Eksempel kan vere mobiltelefonar og spesialnettlesarar for svaksynte og/eller tunghøyrde. Riktig og god bruk av HTML gjer Internet langt meir brukarvennleg.
Legg igjen ein kommentar
Kommentarar (Totalt 12 av dei så langt)
-
Ingardj: Mener du at Arve fra nå skal legge til en notis på toppen av hver artikkel; “Denne artikkelen passer bare for viderekomne” eller “Denne artikkelen forklarer deg hvorfor, ikke hvordan”?
Du skjønte tydeligvis ikke en dritt av poenget her, noe som vel kommer frem av dine kommentarer. Denne artikkelen er ikke en “Fullkommen guide til design vha CSS”, mer et tillegg til de som allerde finnes, og den trengtes.
Herregud.
-
Kan ikke se poenget med denne artikkelen når du ikke forklarer videre hvordan å få bakgrunn i listene. Nå kommer det som kjent bare opp tekst, noe som ikke hjelper en døyt for dem som ikke vet hvordan.
-
Markup er vel “oppmarkering”, ikke bare “markering”?
-
Veldig fin artikkel, jeg er enig med Simon om at det er kjedelig å lese mange artikler om hvordan man skal skrive semantisk kode. Det er uten tvil bruk for flere slike artikler om hvorfor man skal gjøre det. Vil man vite hvordan man skal skrive semantisk kode så kan man lese litt på w3c eller htmldog.
Det er alt for mange som bare plutselig bestemmer seg for at tables er noe tull og div er best og derfor går de over til å bruke bare divs til alt de gjør. Her forklarer du hvorfor man ikke ska gjøre dette, bra!
-
Denne artikkelen er ikkje meint til folk som ikkje klarer å bruke CSS til noke som helst - men mot folk som har litt peiling, men gjør en del elementære ting feil. Ting du nevner høyrer heime i egne artikler. Og det stemmer som Geir skriver over her, det er ikkje meininga å forklare korleis - men kvifor. Eg tolker kommentaren din som om at du ønsker at alt som kan relaterast til webdesign burde vert skrive i ein og samme artikkel - det går jo ikkje.
-
Arve:Flott skrevet, en slik artikkel som dette (som jeg kan lenke til når noen spør meg om hvorfor man f.eks skal bruke h1 i stedet for div#header) har jeg ventet på. Blir slitsomt å legge ut med samme remsa hver gang.
Opplever akkurat hva du beskriver her, gang på gang. “Jippi, jeg har kastet tabellene og bruker div i stedet, jeg gjør det riktige!”
Ingardj: Jeg føler du misforstod hele meningen med denne artikkelen, den forteller deg hvorfor ikke hvordan. Det ligger en liten forskjell der.
-
Fin artikkel Arve, kort og konsist; det er bra.
Ellers vil jeg også si meg helt uenig i Ingadj sin påstand om at artikkelen er unødvendig hvis ikke den er rettet mot nybegynnernivå innen Mark-up og generell struktur. Det er ikke nødvendig å skrive hver artikkel for Ola Nordmann. Jeg personlig skulle ofte ønske at det ble skrevet flere slike artikler, da det er meget kjedelig å f. eks. lese 5 forskjellige artikler om hvordan man senterer ett element med CSS eller hvordan man bruker Faux Columns.
Sånne artikler som dette gir mer rom for en faglig diskusjon på et høyere nivå, noe som en del folk i WDS-delen av forumet har godt av. Fordi det også gir større muligheter for personlig utvikling i stedet for stadig repitisjon.
Ha en fin helg.
-
Jørgen:
Begge deler faktisk, men folk syntest at “oppmarkering” hørtes så klumsete ut at eg bytta tilbake til “markering”. Orker ikkje bytte en gang til, då dette vil ødelegge en heil del lenker til artikkelen :) -
Ingardj:
Korleis ein får bakgrunn i listene har ingenting med denne artikkelen å gjøre, men det kan jo hende eg skriver en slik en også. Geir Klingsheim skreiv en artikkel om det en gang. -
Til begge: Tingen er at nå har dere ødelagt utseende til mange hjelpesløse mennesker som ikke vet hvordan.
Blir som å si; BRUK CSS! Men så utelater du å forklare hvordan å bruke css til layout, fremfor tabeller.
Og skjønner godt at du skriver om sematikk. Da jeg, for eksepmel, og ikke Ola Nordmann med frontpage, er klar over dette, hva er da vitsen med denne artikkelen? Du gir ikke ut lenker til sider der man kan få hjelp til dette heller.
Og kommentaren er ingen slakting av artikkelen, bare et forslag til forbedring :)
Quote: Med riktig bruk av CSS kunne det ferdige (visuelle) resulatet vert identisk - men meir logisk.
Ja, og veien videre er? ville mange sagt.
-
Fin artikkel Arve :) Er nødt til å innrømme at jeg har lært noe som i grunnen er helt nytt for meg. Men da vet du at du har satt en person i riktig bane i alle fall :)
Noen artikler om hvordan hadde jo vært flott, men er ikke poenget med denne artikkelen.
-
På grunn av implementering av nytt CMS har desverre rekkefølga på nokre av kommentarane blitt litt merkeleg. Surt, men vanskelig å fikse opp i når eg ikkje sjølv hugsar den eigentlege rekkefølga eingong.
