Sådan indrykker du HTML: Trin-for-trin guide

Hvis du nogensinde har åbnet en andens HTML-fil og følt dig fuldstændig fortabt inde i en mur af sammenfiltrede tags, forstår du allerede, hvorfor indrykning er vigtig. At lære at indrykke i HTML er en af ​​de første vaner, der adskiller en udvikler, der skriver kode, fra en udvikler, der skriver læsbar kode.

Denne guide dækker både strukturering af dit HTML-dokument med korrekt indrykning på kodeniveau og visuel indrykning af tekst på din webside ved hjælp af CSS-egenskaber.

TL;DR: Indrykning i HTML

• HTML-indrykning fungerer på to niveauer: kodestruktur i din editor og visuel tekstindrykning på den gengivne side

• Brug to mellemrum pr. indlejringsniveau til indrykning på kodeniveau, og vær konsistent i hele filen

• For visuel tekstindrykning skal du bruge text-indent kun til den første linje, margin-left til at forskyde en hel blok og padding-left til indrykning i formaterede containere

• Brug aldrig eller<blockquote> bare for at skabe et visuelt indryk

• Brug VS Codes indbyggede formateringsprogram eller Prettier til at automatisere indrykning på tværs af hele dit team

Hvorfor er korrekt indrykning i HTML vigtig?

Forestil dig at læse en bog uden kapitler, uden afsnit og uden mellemrum mellem sætninger. Det er præcis, hvordan uindrykket HTML ser ud for enhver udvikler, der skal arbejde med det.

Korrekt indrykning gør forældre-barn-relationer mellem elementer umiddelbart tydelige. Det fremskynder fejlfinding, fordi du kan få øje på et manglende lukketag med et hurtigt blik.

Det gør også samarbejdet langt mindre smertefuldt, fordi en ny udvikler, der slutter sig til dit team, ikke behøver at bruge en time på at tyde din kodestruktur, før de kan bidrage.

Ud over læsbarhed søgemaskinecrawlere din HTML for at forstå sidestrukturen. Ren, velstruktureret HTML hjælper crawlere med præcist at fortolke dit indholdshierarki, hvilket indirekte kan understøtte din SEO-ydeevne.

To typer HTML-indrykning, du skal kende

Før vi dykker ned i teknikkerne, er det værd at rydde op i en forvirring, der støder mange begyndere. Der er to forskellige ting, folk mener, når de siger "indrykning i HTML"

• Kodeniveauindrykning refererer til, hvordan dine HTML-tags er arrangeret i din kodeeditor. Det påvirker ikke, hvad brugerne ser på webstedet. Hele formålet er at gøre din kode læsbar ved visuelt at repræsentere elementernes indlejrede hierarki.

• Visuel tekstindrykning refererer til at indrykke indhold på den gengivne webside, så dine brugere ser et faktisk indryk på siden. Dette styres via CSS-egenskaber. At forveksle disse to ting fører til, at udviklere misbruger elementer

  udelukkende til visuelle effekter, hvilket skaber reelle tilgængelighedsproblemer.

Hvordan indrykker man sin HTML-kode i editoren?

Din kodeeditor er der, hvor gode indrykningsvaner starter. At få opsætningen rigtigt fra starten sparer dig timevis af fejlfinding og omformatering senere hen.

Forståelse af forældre-barn-strukturen

HTML er et hierarkisk sprog. Når et element placeres inden i et andet, bliver det et barn af det overordnede element. Barnet skal altid indrykkes et niveau dybere end dets overordnede element for at gøre denne relation synlig i din kode.

Her er uindrykket HTML, der virker, men er smertefuld at læse:

<div><h1>Sidetitel</h1><p> Dette er et afsnit.</p><ul><li> Punkt et</li><li> Punkt to</li></ul></div>

Her er den samme HTML med korrekt indrykning anvendt:

<div><h1>Sidetitel</h1><p> Dette er et afsnit.</p><ul><li> Punkt et</li><li> Punkt to</li></ul></div>

Strukturen er øjeblikkeligt tydelig.<h1> ,<p> , og<ul> er alle børn af<div> Den<li> elementerne sidder et niveau dybere, fordi de er børn af<ul> Hvert indlejringsniveau indrykkes konsekvent med det samme beløb.

To mellemrum, fire mellemrum eller tabulatorer?

Det specifikke valg betyder langt mindre end konsistens. De fleste HTML-stilguider bruger som standard to mellemrum pr. indrykningsniveau, fordi HTML er dybt indlejret, og fire mellemrum kan hurtigt skubbe koden langt til højre.

Det vigtigste er at vælge én stil og bruge den gennem hele projektet. At blande to mellemrum i nogle filer og fire mellemrum i andre skaber rodede versionskontrolforskelle og friktion i teammiljøer.

Brug af VS-kode til at automatisere indrykning

VS Code håndterer indrykning rigtig godt fra starten. Når du skriver HTML og trykker på Enter efter et åbningstag, indrykker VS Code automatisk den næste linje. Hvis du åbner en eksisterende fil med inkonsistent indrykning, kan du rette hele dokumentet på én gang.

• I Windows skal du trykke på Shift + Alt + F for at formatere hele dokumentet.
• På Mac skal du trykke på Shift + Option + F.

For teams håndhæver Prettier-udvidelsen indenteringsregler på tværs af alle udvikleres editorer via en delt .prettierrc-konfigurationsfil. Dette eliminerer fuldstændigt indenteringsrelaterede sammenflettede konflikter og friktion under kodegennemgang.

Hvordan indrykker man tekst i HTML ved hjælp af CSS?

Nu til den del, der påvirker, hvad dine brugere rent faktisk ser: visuel indrykning af tekst på websiden. Der er tre primære CSS-egenskaber, du vil bruge, og hver enkelt opfører sig forskelligt.

CSS-tekstindrykningsegenskaben

Egenskaben `text-indent` indrykker kun den første linje i en tekstblok. Den fungerer på elementer på blokniveau som afsnit og overskrifter. Alle efterfølgende linjer i det samme element forbliver ved den normale margen.

p { tekst-indrykning: 30px; }

Dette indrykker den første linje i hvert afsnit med 30 pixels. Du kan bruge forskellige enheder afhængigt af dit layout. Pixels giver dig et fast absolut indryk.

Brug af `em` eller `rem` binder indrykket til skriftstørrelsen, hvilket skalerer bedre på tværs af forskellige skærmstørrelser . Procentværdier gør indrykket i forhold til den indeholdte blokbredde.

p { tekst-indrykning: 2em; }

Du kan også bruge negative værdier til at skabe en hængende indrykningseffekt, hvor den første linje stikker ud til venstre, mens de resterende linjer er indrykket:

p { tekst-indrykning: -2em; padding-venstre: 2em; }

Browserkompatibilitet for tekstindrykning er fremragende på tværs af alle moderne browsere. Der kræves ingen leverandørpræfikser.

Ejendommen margin-venstre

Egenskaben margin-left indrykker en hel indholdsblok ved at flytte hele elementet til højre. Dette er nyttigt, når du vil forskyde et helt afsnit, en sektion eller en container i stedet for blot den første linje.

.indrykket-sektion { margin-venstre: 40px; }

Egenskaben margin-left fungerer på næsten alle HTML-elementer.

En ting at huske på: marginer skaber plads uden for elementets boks, så de forskyder selve elementet i stedet for kun teksten indeni. Dette er vigtigt i flexbox- eller gitterlayouts, hvor afstanden allerede styres af layoutsystemet.

Egenskaben padding-left

Egenskaben padding-left skaber plads i et elements indholdsboks, mellem kanten og indholdet. Dette er den vigtigste forskel fra margin-left.

.callout-box { padding-venstre: 24px; baggrundsfarve: #f5f5f5; border-venstre: 4px solid #0057ff; }

Hvis du brugte venstremargin her i stedet for venstrepolstring, ville teksten se indrykket ud, men baggrundsfarven og kanten ville starte ved den oprindelige venstre kant, som ser brudt ud.

Padding-left-egenskaben holder den formaterede container intakt, mens teksten flyttes indad. Brug den, når du indrykker tekst i en container med en baggrund, kant eller en defineret boksmodel.

Indrykning af HTML-lister og indbyggede elementer

HTML-lister har standardindrykning anvendt af browsere, men den nøjagtige mængde varierer mellem Chrome, Firefox og Safari. For ensartede, kontrollerede resultater skal du definere det eksplicit i CSS:

ul, ol { padding-venstre: 24px; }

For indlejrede lister skal du anvende yderligere indrykning på det indlejrede element for at oprette et tydeligt andet niveau:

<ul><li>Hovedelement<ul><li> Indlejret element A</li><li> Indlejret element B</li></ul></li></ul>

Ved at CSS kontrollerer padding-left på hvert niveau, producerer dette en ren, to-lags indrykket liste, der ser ensartet ud på tværs af alle browsere.

HTML-elementer, der håndterer indrykning nativt

Nogle HTML-elementer har indbygget indrykningsadfærd i browsere. Ved at vide, hvornår man skal bruge dem korrekt, og hvornår man ikke skal, holder man sin kode tilgængelig og semantisk korrekt.

• Blockquote-elementet vises som standard indrykket i de fleste browsere. Mange udviklere misbruger det udelukkende til denne visuelle effekt. Dette er en fejltagelse.

De<blockquote> Elementet findes for at markere indhold citeret fra en ekstern kilde. Skærmlæsere annoncerer det som et citat, så brugen af ​​det på ikke-citeret indhold vildleder brugere, der er afhængige af hjælpeteknologi. Brug det kun til faktiske citater, og brug CSS til alt andet.

• Pre-elementet bevarer alle mellemrum, linjeskift og indrykninger præcis som de vises i din HTML-fil. Dette gør det vigtigt for at vise kodestykker og præformateret tekst, hvor afstand har betydning.

• Hartskiftende mellemrum () er en almindelig vane for begyndere til at lave hurtig indrykning. Det definitive svar er aldrig at bruge dem til dette formål. De skalerer ikke; de ​​opdeles på tværs af forskellige skærmbredder, og de forårsager uforudsigelig linjeskift på mindre skærme. Brug altid CSS i stedet.

Almindelige indrykningsfejl, der skal undgås

At blande tabulatorer og mellemrum i den samme fil er den mest almindelige fejl på teamniveau. Det ser fint ud i én editor og fuldstændig defekt i en anden. Konfigurer din editor til automatisk at konvertere tabulatorer til mellemrum, eller brug Prettier til at håndhæve en ensartet stil.

Brug af inline-stilarter på hvert enkelt element i stedet for en genanvendelig CSS-klasse skaber et vedligeholdelsesmareridt.

At opdatere style="margin-left: 40px" på tværs af tyve forskellige afsnitstags i din HTML er et besværligt arbejde, som en enkelt CSS-klasse ville have elimineret helt.

Hvis linjerne indrykkes så dybt i editoren, at de ombrydes, er det et tegn på, at selve HTML-strukturen skal forenkles, ikke blot omformateres. Hvis din kode regelmæssigt rykker ti eller tolv niveauer ind, er det værd at gennemgå selve strukturen.

Tilgængelighed og indrykning

Dette er noget, de fleste guider springer over. Korrekt indrykning på kodeniveau påvirker direkte, hvor præcist hjælpeteknologier analyserer din side.

• Når elementer er indlejret korrekt, og HTML-hierarkiet er rent, kan skærmlæsere præcist identificere landemærker, overskrifter og indholdsområder.

• Når elementer misbruges til deres visuelle bivirkninger, annoncerer skærmlæsere den forkerte kontekst til brugerne.

Korrekt indrykning gør det også meget nemmere at kontrollere din HTML for semantisk korrekthed ved hjælp af værktøjer som WAVE og axe DevTools .

Afsluttende tanker

Ren HTML-indrykning er en af ​​de vaner, der betaler sig langt mere tilbage, end den koster.

Den tid, du bruger på at formatere et projekt korrekt, returneres hver gang du foretager fejlfinding i det, hver gang en ny udvikler åbner filen, og hver gang du genbesøger din egen kode måneder senere og stadig forstår den med det samme.

Hos Seahawk Media bygger og reviderer vi hjemmesider , hvor kodekvaliteten direkte påvirker ydeevne, vedligeholdelse og brugeroplevelse.

Hvis din hjemmeside har brug for en koderevision, en performance review eller en komplet udviklingsversion, så kontakt os , så lad os bygge noget, der fungerer lige så godt under motorhjelmen, som det ser ud på skærmen.

Ofte stillede spørgsmål