Afsnit, em, strong og b, i
Markér brødtekst med semantisk fremhævelse og fedtags.
Afsnit, em, strong og b, i er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Afsnitselementet
Elementet <p> markerer en tekstblok som et afsnit:
<p>This is a paragraph of text. Browsers add margin above and below paragraphs automatically.</p>
<p>This is a second paragraph. It starts on a new line.</p>Semantisk betoning: em
Elementet <em> markerer tekst med trykbetoning — det ord, der ændrer sætningens betydning:
<p>I <em>never</em> said she stole the money.</p>
<p>I never said <em>she</em> stole the money.</p>
<!-- Same words, different meaning depending on which is emphasized -->
<!-- Screen readers change inflection on em content -->Semantisk betydning: strong
Elementet <strong> markerer tekst som meget vigtig:
<p><strong>Warning:</strong> Do not enter this area without protective equipment.</p>
<p>The deadline is <strong>Friday at 5 PM</strong>.</p>
<!-- strong = this content is more important than surrounding text -->
<!-- Screen readers may emphasize strong content differently -->em kontra i
<em> og <i> vises begge som kursiv som standard, men har forskellig betydning:
<em>— semantisk trykbetoning (bruges oftest)<i>— præsentationsmæssig kursiv: tekniske termer, titler og fremmedsprogede udtryk
<p>The ship was called <i>HMS Beagle</i>.</p>
<p>The CSS property is <i>display</i>.</p>
<p><em>Please</em> be careful.</p>strong kontra b
<strong> og <b> vises begge som fed som standard, men adskiller sig semantisk:
<strong>— semantisk betydning (bruges oftest)<b>— henleder opmærksomheden uden at antyde betydning: nøgleord og produktnavne
<p>The product is called <b>ProSuite</b>.</p>
<p><b>Note:</b> All fields are required.</p>
<p>This step is <strong>critical</strong> — do not skip it.</p>Indlejring af em og strong
Du kan indlejre betoningselementer for at kombinere virkningen:
<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->Afsnit kan ikke indlejres
Et <p>-element kan ikke indeholde et andet <p>-element:
<!-- INVALID: nested paragraphs -->
<p>First paragraph <p>nested paragraph</p></p>
<!-- The browser auto-closes the first p before the second opens -->
<!-- Always use separate paragraph tags -->
<p>First paragraph.</p>
<p>Second paragraph.</p>Inline kontra blok i afsnit
<p> er et blokelement, der kun kan indeholde inline-elementer:
<!-- Valid: inline content in p -->
<p>Text with <strong>bold</strong> and <a href="/">a link</a>.</p>
<!-- INVALID: block element inside p -->
<p>
<div>A div inside p is invalid</div>
</p>Tilgængelighed ved betoning
Derfor er semantisk opmærkning vigtig for hjælpemidler:
- Skærmlæsere annoncerer
<em>med ændret betoning i nogle implementeringer <strong>kan blive læst med ekstra betoning- Fed eller kursiv tekst, der kun er lavet med CSS (f.eks.
font-style: italicpå et span), har ingen semantisk betydning for skærmlæsere
Almindelige fejl
Undgå disse almindelige fejl ved tekstopmærkning:
<!-- Bad: using br for paragraph spacing -->
First paragraph<br><br>Second paragraph
<!-- Good: use p elements -->
<p>First paragraph</p>
<p>Second paragraph</p>
<!-- Bad: bold for visual style only -->
<b>Heading Text</b>
<!-- Good: use h elements for headings -->
<h2>Heading Text</h2>Hvornår du skal bruge hvert element
Hurtig beslutningsvejledning:
- Et stykke sammenhængende tekst →
<p> - Beton et ord, der ændrer betydningen →
<em> - Markér kritisk information →
<strong> - Sæt en titel eller teknisk term i kursiv →
<i> - Fremhæv et nøgleord uden at antyde betydning →
<b>
Hurtigt tjek
Hvilket element skal du bruge til at markere tekst som kritisk vigtig?
Opsummering: tekstsemantik
Oversigt over tekstopmærkning:
<p>— afsnit med sammenhængende tekst<em>— trykbetoning, der ændrer sætningens betydning<strong>— stor betydning<i>— præsentationsmæssig kursiv (titler og termer)<b>— henleder opmærksomheden uden at antyde betydning- Brug aldrig
<br><br>til afstand mellem afsnit
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Afsnit, em, strong og b, i” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Afsnit, em, strong og b, i”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Afsnit, em, strong og b, i”?
Markér brødtekst med semantisk fremhævelse og fedtags. Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Afsnit, em, strong og b, i”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Overskrifter h1-h6 og deres hierarki
- Afsnit, em, strong og b, i
- br, hr, blockquote og pre
- Elementerne span og div