Forestil dig, at en boligforening skal have fjernet et stort træ fra et fællesareal.

Beboerne skal vide, hvornår arbejdet finder sted, hvilke områder der bliver berørt, og hvem de kan kontakte.

Det er en lille kommunikationsopgave, men den er oplagt til at lære noget om moderne HTML.

For hvordan bygger man en informationsside, som er nem at læse på mobil, fungerer med tastatur og giver mening for en skærmlæser?

I denne tutorial bygger vi en enkel side med semantisk HTML og almindelig CSS.

Ingen JavaScript-frameworks. Ingen eksterne komponentbiblioteker.

Og faktisk behøver vi slet ikke JavaScript.

Eksemplet handler om formidling af planlagt arbejde. Det er ikke et system til at vurdere træers stabilitet, godkende afspærringer eller planlægge sikkerheden ved træfældning.

1. Hvad skal siden kunne?

Vi tager udgangspunkt i et tænkt eksempel.

En boligforening i Kolding har planlagt professionel træfældning af et træ på et fællesareal.

Beboerne skal kunne finde fire oplysninger:

  • Hvad arbejdet handler om
  • Hvornår det forventes at foregå
  • Hvilke praktiske ændringer der er planlagt
  • Hvem de kan kontakte ved spørgsmål

Derudover ønsker vi, at siden fungerer godt på små skærme.

Indholdet skal være let at læse, og besøgende skal kunne åbne supplerende information med tastaturet.

Vi bygger det hele i én HTML-fil, så eksemplet er let at teste.

2. Start med semantisk HTML

En webside kan bygges med mange div-elementer.

Men HTML har allerede elementer, der beskriver indholdets funktion.

Vi bruger blandt andet:

  • header til sidens introduktion
  • main til hovedindholdet
  • section til selvstændige afsnit
  • time til tidsoplysninger
  • details og summary til supplerende information
  • footer til afsluttende oplysninger

Det gør dokumentet mere forståeligt for både udviklere og hjælpemidler.

Opret en fil med navnet index.html.

<!doctype html> <html lang="da"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Information om planlagt træarbejde</title> <meta name="description" content="Praktisk information om planlagt træarbejde på et fællesareal."> <link rel="stylesheet" href="style.css"> </head> <body> <header class="site-header"> <div class="container"> <p class="eyebrow">Beboerinformation</p> <h1>Planlagt træarbejde på fællesarealet</h1> <p> Her finder du den praktiske information om det kommende arbejde. </p> </div> </header> <main id="main-content" class="container"> <section aria-labelledby="overview-title"> <h2 id="overview-title">Overblik</h2> <p> Der er planlagt arbejde med et træ på ejendommens fællesareal. </p> </section> </main> <footer class="site-footer"> <div class="container"> <p>Eksempel på en informationsside.</p> </div> </footer> </body> </html>

Bemærk, at lang="da" står på html-elementet.

Det fortæller browseren og relevante hjælpemidler, at sidens primære sprog er dansk.

Vi bruger også kun ét h1-element og en naturlig rækkefølge af overskrifter.

Det er et godt udgangspunkt for en tydelig dokumentstruktur.

3. Vis tidspunktet med det rigtige HTML-element

En dato kan selvfølgelig skrives som almindelig tekst.

Men HTML har også elementet time.

Det gør det muligt at angive datoen i et maskinlæsbart format.

Tilføj denne sektion inde i main:

<section class="notice" aria-labelledby="when-title"> <h2 id="when-title">Hvornår foregår arbejdet?</h2> <p> Forventet arbejdsdag: <time datetime="2027-04-15"> 15. april 2027 </time> </p> <p> Forventet tidsrum: <time datetime="09:00">09.00</time> til <time datetime="14:00">14.00</time> </p> <p class="notice-note"> Tidspunktet er foreløbigt og skal bekræftes af den ansvarlige for ejendommen. </p> </section>

Datoen er kun eksempeldata, ikke en virkelig aftale.

I et rigtigt projekt skal den ansvarlige person bekræfte både dato og tidspunkt, før siden bliver offentliggjort.

En vigtig detalje er, at maskinlæsbar HTML ikke gør oplysningerne korrekte.

datetime beskriver datoens format.

Det kontrollerer ikke, om arbejdet faktisk er planlagt.

4. Beskriv praktiske ændringer tydeligt

En informationsside bør ikke gøre det svært for læseren at finde det vigtigste.

Forestil dig, at en parkeringsplads eller en sti bliver påvirket af arbejdet.

Så skal oplysningerne stå tydeligt.

Vi kan bruge en almindelig liste.

<section aria-labelledby="access-title"> <h2 id="access-title">Praktiske forhold</h2> <p> Følgende forhold forventes at gælde, hvis arbejdsplanen godkendes: </p> <ul class="info-list"> <li> En del af fællesarealet kan være afspærret. </li> <li> Enkelte adgangsveje kan blive påvirket. </li> <li> Beboerne får besked om eventuelle ændringer i parkeringen. </li> <li> Afspærringer skal respekteres. </li> </ul> <p> Den endelige afspærring og adgangsløsning fastlægges af de ansvarlige fagfolk og relevante parter. </p> </section>

Det er vigtigt ikke at lade denne type eksempeltekst fremstå som en godkendt sikkerhedsplan.

En hjemmeside kan informere om en plan.

Den kan ikke erstatte den konkrete vurdering af arbejdsområdet.

Hvis en adgangsvej bliver ændret, skal informationen stemme med den faktiske, godkendte løsning.

5. Brug details og summary uden JavaScript

Nogle oplysninger behøver ikke være synlige hele tiden.

Det kan eksempelvis være en forklaring af, hvad beboerne skal gøre, hvis arbejdsdatoen ændrer sig.

Her er details og summary nyttige.

<section aria-labelledby="faq-title"> <h2 id="faq-title">Ofte stillede spørgsmål</h2> <details> <summary>Kan tidspunktet blive ændret?</summary> <p> Ja. Hvis planen ændres, skal informationen på siden opdateres. </p> </details> <details> <summary>Må beboerne bruge fællesarealet?</summary> <p> Følg de konkrete oplysninger fra ejendommens ansvarlige og respekter eventuelle afspærringer. </p> </details> <details> <summary>Hvem kan svare på spørgsmål?</summary> <p> Kontakt ejendommens administrator via de officielle kontaktoplysninger. </p> </details> </section>

Browseren håndterer selv åbning og lukning.

Det betyder, at vi ikke behøver skrive JavaScript til en almindelig informationsboks.

De indbyggede elementer giver også en tastaturbetjent kontrol.

Det er ofte bedre end at opfinde en klikbar div og derefter forsøge at tilføje alle de manglende funktioner.

6. Tilføj et synligt kontaktområde

Når noget ændrer sig på en ejendom, kan beboerne have spørgsmål.

Derfor bør kontaktoplysninger være lette at finde.

Vi laver en enkel kontaktsektion.

<section class="contact-box" aria-labelledby="contact-title"> <h2 id="contact-title">Spørgsmål om arbejdet?</h2> <p> Kontakt ejendommens administrator for oplysninger om den planlagte opgave. </p> <p> <strong>Kontakt:</strong> Ejendommens administration </p> <p> De officielle kontaktoplysninger indsættes, når de er bekræftet. </p> </section>

I dette eksempel indsætter vi ikke et opdigtet telefonnummer eller en e-mailadresse.

Det er bedre at vise tydeligt, at oplysningerne mangler, end at opfinde en kontaktperson.

I et rigtigt system bør siden ikke publiceres som færdig beboerinformation, før de nødvendige kontaktoplysninger er bekræftet.

7. Gør designet responsivt med CSS

Nu har vi en grundlæggende HTML-struktur.

Næste skridt er at gøre siden behagelig at læse på både mobil og computer.

Opret filen style.css.

:root { color-scheme: light; --page: #f6f8f5; --surface: #ffffff; --text: #223228; --muted: #526658; --accent: #235d40; --border: #d6e2d8; --notice: #edf5ee; } * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--text); font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1.7; } .container { width: min(100% - 2rem, 780px); margin-inline: auto; } .site-header { padding: 3.5rem 0; background: var(--accent); color: white; } .eyebrow { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.2; } h2 { font-size: 1.5rem; line-height: 1.3; } main { padding-block: 2rem 4rem; } section { margin-block: 1.5rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; } .notice { background: var(--notice); } .notice-note { color: var(--muted); } .info-list { padding-left: 1.5rem; } .info-list li + li { margin-top: 0.75rem; } details { border-bottom: 1px solid var(--border); padding: 0.9rem 0; } summary { cursor: pointer; font-weight: 700; } summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 3px; } .contact-box { border-left: 5px solid var(--accent); } .site-footer { padding: 1.5rem 0; color: var(--muted); border-top: 1px solid var(--border); } @media (max-width: 600px) { .site-header { padding: 2rem 0; } section { padding: 1.1rem; } }

CSS'en bruger relative størrelser og en fleksibel container.

Derfor kan siden tilpasse sig forskellige skærmbredder uden vandret scrolling fra selve layoutet.

Vi bruger clamp() til overskriften, så den bliver større på brede skærme og mindre på mobil.

Derudover har vi en tydelig fokusmarkering på summary.

Det hjælper brugere, som navigerer med tastaturet.

8. Test siden uden mus

En hurtig tilgængelighedstest kræver ikke et avanceret værktøj.

Åbn siden i browseren, og prøv at bruge den uden mus.

Tryk på Tab.

Når fokus når til en af vores summary-overskrifter, bør den kunne aktiveres med tastaturet.

Kontrollér også, at fokusmarkeringen er synlig.

Læs siden i en smal mobilvisning.

Er teksten stadig let at læse?

Bliver noget vigtigt skjult?

Er overskrifterne logisk organiseret?

Det er en god start.

Men en fuld tilgængelighedsvurdering kræver mere end en kort tastaturtest. Skærmlæsertest, zoom, kontrast og andre forhold bør også kontrolleres i et rigtigt projekt.

9. Hvorfor bør vi undgå farver som eneste signal?

Forestil dig, at vi viser en grøn boks for almindelig information og en rød boks for ændringer.

Hvis farven er det eneste, der forklarer betydningen, kan nogle brugere have svært ved at forstå informationen.

Derfor bør vigtige meddelelser også have tydelig tekst.

For eksempel:

<p class="notice-note"> <strong>Ændret tidspunkt:</strong> Den tidligere planlagte dato gælder ikke længere. Et nyt tidspunkt bliver oplyst senere. </p>

Her behøver læseren ikke kunne se en bestemt farve for at forstå beskeden.

Den samme tilgang kan bruges til fejl, advarsler og statusoplysninger.

10. Kan siden opdatere sig selv?

Ikke med den løsning, vi har bygget her.

Siden er statisk.

Hvis datoen ændrer sig, skal den ansvarlige opdatere HTML-indholdet og offentliggøre den nye version.

Det er ikke nødvendigvis en ulempe.

For en lille boligforening med få planlagte opgaver kan en simpel statisk side være lettere at vedligeholde end et stort system.

Hvis man senere ønsker et administrationspanel eller automatisk opdatering, kan projektet udvides.

Men først skal det være klart, hvem der må ændre oplysningerne, og hvordan ændringer bliver godkendt.

Automatisering er ikke en fordel, hvis den gør det lettere at offentliggøre forkerte oplysninger.

11. Hvorfor passer eksemplet til træfældning?

Når træer skal fjernes tæt på boliger, er det vigtigt, at arbejdet planlægges efter de konkrete forhold.

Skovhugger Lund er en træservicevirksomhed med base i Kolding.

Virksomheden arbejder med træfældning, beskæring og træpleje for private kunder, virksomheder samt grundejer- og boligforeninger.

På siden om professionel træfældning i Kolding beskriver virksomheden forskellige arbejdsmetoder, herunder retningsbestemt fældning, klatring og brug af lift.

Det viser, hvorfor en beboerinformation ikke bør fastlåse oplysninger om maskiner, adgang eller arbejdstid, før de konkrete forhold er vurderet.

En informationsside kan gøre det nemmere at formidle beslutningerne.

Men den skal bygge på bekræftede oplysninger.

Vores kode er et selvstændigt undervisningseksempel. Den beskriver ikke en eksisterende digital løsning hos Skovhugger Lund.

12. Hvad ville jeg forbedre i en rigtig løsning?

Hvis informationssiden skulle bruges i praksis, ville jeg begynde med indholdet.

Hvem godkender datoen?

Hvem skal informeres, hvis den ændrer sig?

Og hvem sikrer, at siden ikke indeholder forældede oplysninger?

Jeg ville også teste siden med forskellige skærmlæsere og kontrollere farvekontrast, tekstforstørrelse og tastaturnavigation.

Hvis siden blev udvidet til flere ejendomme, kunne man overveje en fælles indholdsmodel, så hver meddelelse har samme struktur.

Men det er vigtigt ikke at gøre løsningen mere kompleks end nødvendigt.

En lille, gennemarbejdet informationsside kan være mere nyttig end et stort system med mange funktioner, som ingen vedligeholder.

Afslutning

Vi har nu bygget en enkel informationsside med:

  • Semantisk HTML
  • Maskinlæsbare tidsoplysninger
  • En responsiv CSS-struktur
  • Tastaturbetjente informationsbokse
  • Tydelig tekst til praktiske meddelelser

Og vi gjorde det uden JavaScript.

Det er en nyttig påmindelse om, at moderne webudvikling ikke altid behøver begynde med et framework.

Nogle gange er den bedste løsning almindelig HTML, gennemtænkt CSS og indhold, som mennesker faktisk kan bruge.

God webudvikling handler ikke kun om, at en side ser flot ud. Den handler om, at informationen er tydelig, tilgængelig og til at stole på.