Mikael Brevik

Jeg har tidligere skrevet om kodestrukturen i PHP (og generelt andre script språk), og vil nå skrive meget kort med mest eksempler på hvordan det burde være med (X)HTML og CSS.

Det er faktisk viktig med god struktur i filene dine med tanke på å finne igjen senere, oversikt og også for bedre søkeresultat med de store søkemotorene. Derfor anbefales det å lese igjennom denne posten.

Logisk som bare det er det med strulturen, men det er langt, langt, i fra alle som følger det uansett! Mange bruker WYSIWYG editorer som genererer generelt dårlig kode. De beste av disse er though DreamWaver som genererer noen lunde ok koder. Men tilbake til logikken i strukturen. Du har forskjellige elementer i html, disse kaller vi tags. Når det er noen åpne tags og noen andre elementer som skal inn i de tagsene tar vi ett linjeskift og et inntrykk.

Og slik fortsetter det. Altså, om du er inne i element skal du ha inntrykk enten med tabs eller mellomrom (kanskje 4 eller mer). Personlig bruker jeg tabs.

Om du skal ha en tabell er det [b]ytterst[/b] viktig med linjeskift og inntrykk for at de skal bli oversiktlige. Her er en liten tabell som viser hvorden det burde være:

Merk at th er header i table (altså [b]T[/b]able[b]H[/b]eader) og er uthevet, men du kan style den selv i CSS selvfølgelig. Da skal dere ha fattet hovedstrukturen med HTML og kan fortsette i det uendelige.

Her er eksempel på en hel side:

Merk at det ikke er vanlig og ha inntrykk i html og heller ikke heletiden i head og body, men jeg bruker og ha det i head og body for strukturens skyld.

Da går vi over på CSS. CSS er ikke så ulikt PHP (og andre scriptspråk) og bruker klammer {} til å betegne innhold. Jeg har tidligere i bloggen skrevet om hvordan du skal effektivisere med CSS, og der ser du strukturen til hvordan det bør være for lettlesthet.

Linjeskift etter en betegnelse og etter du har valgt elementene. Eksempel:

Da skal det meste være oppklart, og jeg tar igjen en liten oppsummering:

• Bruk linjeskift etter elementer.
• Bruk inntrykk når det er et innerelement.
• I CSS, ha linjeskift etter hver punkt.

Når det gjelder php og html sammen, er det [b]meget[/b] lurt og bruke whitespace som jeg nevner i kodestruktur med php guiden/posten min.