Definer artikler, seksjoner og sider i HTML5-sider - dummies

Kanskje det viktigste innholdsstruktureringselementet i HTML5 er artikkelmerket. Tilhengere av overskrifter, bunntekster og til og med den relativt uklare tidstegnet vil være rasende på forslaget om at artikkeltaggen er den store attraksjonen i HTML5, men du kan bruke artikkeltaggen til å organisere sideinnhold i grunnleggende "biter", for mangel på et bedre ord.

Nødvendigheten til å strukturere sideinnhold i artikler er en positiv faktor for å tvinge innholdsutviklere til å organisere ideer på en sammenhengende måte. Og artikkeltaggen gir rammen for seksjoner (i artikkelen) og i tillegg (sidebjelker til artikkelen).

Del artikler i flere seksjoner

Følgende kode definerer en artikkel og to seksjonselementer. Den inneholder også noen plassholdertekst og overskrifter som er satt inn etter sluttkoden.

Merk: Selv om du teknisk sett kan legge inn en enkelt seksjon i en artikkel, er begrepet artikler delt inn i seksjoner mer effektivt hvis det unngås.

En grunnleggende redigeringsregel (og du kan spørre alle som redigerer tekst for å leve, og de skal fortsette om dette), er at hvis du skal dele en artikkel for å gjøre det lettere å fordøye, det hjelper ikke leseren å organisere sin tenkning å ha bare ett underavsnitt innenfor en del av innholdet. Så - når seksjoner blir brukt - er det best å ha minst to seksjoner plassert i koder.

Artikkeloverskrift går her
Første artikkelinnhold går her
mer artikkelinnhold går her
Første avsnitt overskrift går her
Første delinnhold går her
Mer 1 seksjon innhold går her
2. avsnitt overskrift går her
2. avsnitt innhold går her
Mer 2dds innhold går her

Denne koden oppretter en side som den som vises her.

Legg til et sideelement

Som med alle HTML5-sidestrukturelementer, er sideelementet ment å være knyttet til en bestemt type innhold. Innhold som bilder, tekst eller videoer i et sideelement bør være avhengig av - det vil si relatert til innhold og bidra til - en artikkel eller en del av en artikkel.

Skal du bruke et sideelement til å legge inn en navigeringslinje? Vanligvis nei. I stedet bør navigasjonsinnhold bli kodet med nav-elementet, som vi diskuterer litt tidligere i dette kapittelet.

Noen CSS-stilingsattributter som normalt brukes til HTML5-sideelementer. Som du sannsynligvis kan intuit, blir elementene generelt lagt ut som sidebjelker. Så når du definerer en CSS-stil for nav-elementet, bruker du CSS-floategenskapen til å tillate at sideelementet skal vises som en høyre- eller venstrejustert boks rundt hvilket artikkelinnhold kan flyte.

Følgende kode gir et eksempel på et sideelement i en artikkel:

Artikkeloverskrift går her
Artikkelinnhold går her
Sidebarinnhold relatert til artikkelen går her
Mer artikkelinnhold går her

Du vil kombinere HTML5 strukturelementer med stiler som formaterer plasseringen, font, farge og andre stilattributter som brukes på disse elementene. Følgende figur viser for eksempel hvordan en side (KUDOS) kan se ved siden av artikkelen som den er tilknyttet (erfaring).