I HTML er adskilt mellem seks forskellige overskriftsniveauer. Disse defineres ved elementerne h1 til h6.
<h1>Overskriftsniveau 1</h1> <h2>Overskriftsniveau 2</h2> <h3>Overskriftsniveau 3</h3> <h4>Overskriftsniveau 4</h4> <h5>Overskriftsniveau 5</h5> <h6>Overskriftsniveau 6</h6>
Her repræsenterer h1 den største og h6 den mindste overskrift. Med HTML5 blev der introduceret yderligere muligheder for overskriftsdefinitioner, som vil blive vist senere.
De forskellige overskriftsniveauer hjælper jer med at strukturere teksterne. I kan for eksempel tage udgangspunkt i bøger. Der er bogtitlen, som svarer til indholdet af h1-elementet. Derfor bør der kun indsættes et h1-element pr. HTML-side. Resten af teksten struktureres derefter med de øvrige niveauer. Efter hovedoverskriften følger h2. Underafsnit af h2 er igen markeret med h3-elementet.
I øvrigt: Størrelsen på overskriftsniveauerne bestemmes først og fremmest af browsere. I kan dog selv bestemme dem eksplicit ved brug af CSS. Mere om det senere.
Overskriftsniveauerne kan bruges meget enkelt. I indtaster et h efterfulgt af det ønskede niveaunummer.
<h1>PSD-Tutorials.de</h1>
Efter en sådan defineret overskrift vil der automatisk blive tilføjet en linjeskift og en afstand til de efterfølgende elementer.
Sørg absolut for, at tallene i start- og sluttag er identiske.
Definér afsnit
Ud over overskrifter består tekster selvfølgelig også af afsnit. Sådanne afsnit kan også nemt oprettes i HTML. Til dette bruges p-elementet. Et sådant markeret afsnit har som standard en vis afstand til efterfølgende elementer. Hvor stor denne afstand er i sidste ende, kan I styre igen ved hjælp af CSS.
Her er et eksempel på to afsnitsdefinitioner:
<p>Dette er et afsnit</p> <p>Dette er også et afsnit</p>
Et kig i browseren giver følgende billede:
I HTML5 er det i øvrigt ikke påkrævet, at åbnede afsnit lukkes med </p> igen. Af overskuelighedsgrunde vil jeg dog anbefale, at det lukkende </p> faktisk bruges.
Manuelle linjeskift
Flydende tekst inden for afsnit, lister osv. brydes automatisk af browseren, hvis den f.eks. er bredere end browservinduet. Det er praktisk, så unødvendig horisontal rulning undgås. Derudover kan I dog bryde tekst hvor som helst efter ønske. Til dette bruges elementet <br />. Bemærk, at dette er et såkaldt Standalone-tag, som altså ikke selv har et lukkende tag, men i stedet lukker sig selv.
<p>Yeh, this one's for the workers who toil night and day<br /> By hand and by brain to earn your pay<br /> Who for centuries long past for no more than your bread<br /> Have bled for your countries and counted your dead</p>
Ved brug af <br /> har det i øvrigt ingen betydning, om det står i slutningen af en linje eller på en separat linje. Resultatet ser ens ud i begge tilfælde:
Lad os vende tilbage til de automatiske linjeskift, der indsættes af browsere. Disse kan være problematiske, fordi man ikke kan kontrollere, hvor opdelingen reelt sker. Dette kan føre til uventede resultater. Et typisk eksempel herpå er versionsnumre.
iPhone 5
Dette burde normalt være i én linje. Linjeskiftet bør derfor ikke ske mellem iPhone og tallet 5.
iPhone 5
Dette kan undgås ved hjælp af såkaldte beskyttede mellemrum. Et eksempel:
Denne tegnfølge definerer et sådant beskyttet mellemrum. I browseren vises det som et normalt mellemrum: 
For at dette fungerer korrekt, må I ikke indsætte mellemrum i kildekoden. Noget som dette ville ikke fungere:
Forformateret tekst
Der kan være situationer, hvor man ønsker at vise tekst præcist, som den er anbragt i kildeteksten. Et typisk eksempel på dette er programlister, som også ofte findes her på PSD-Tutorials.de.
HTML tillader definitionen af forformaterede tekstafsnit til sådanne formål. Her tager browseren hensyn til indrykningerne, som de er angivet i kildekoden. Det følgende eksempel viser, hvordan sådan noget implementeres:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>"Hej, Verden!" i PHP</h1> <pre> <?php echo "Hej, Verden\\n"; ?> </pre> </body> </html>
Passagen, der skal vises som forformateret tekst, defineres inden for pre-elementet. Indsæt indrykningerne osv. præcist der, som de til sidst skal vises af browseren.
Når I ser eksempelkoden, vil I sandsynligvis bemærke de mærkelige tegn <?php og ?>. I browseren vises disse som <?php og ?>. Den anvendte variant i kildekoden kaldes karaktermaskering. Det bliver nødvendigt, når man ikke ønsker, at browseren skal fortolke HTML-specifikke tegn. Hvis I direkte indtaster <?php i kildekoden, vil browseren antage, at det er en åbningsdel af PHP. Derfor maskeres tegnene.
• Erstat tegnet & med tegnsekvensen &
• Erstat tegnet < med tegnsekvensen <
• Erstat tegnet > med tegnsekvensen >
• Erstat anførselstegn med "
Forresten er pre ikke kun egnet til visning af programlister. Også tabulære data kan let gengives på denne måde. Det følgende eksempel viser en typisk tabel, der kun er implementeret med mellemrum inden for et pre-element.
<pre> Destination Afgang Ankomst Spor ---------------------------------------------------------------- Berlin 10:23 14:30 2 Hamburg 11:09 13:20 13 München 12:04 15:45 1a </pre>
Resultatet i browseren ser således ud:
Browserne tager faktisk hensyn til mellemrummene, som I definerer i kildekoden. Den viste tabelvariant fungerer i øvrigt ret godt. For mindre tabeller synes jeg faktisk, at det er praktisk. Når datamængden bliver større, bør I dog ty til klassiske HTML-tabeller. Hvordan man definerer disse, vil I selvfølgelig også finde ud af i denne serie.
