Tekstrelaterede tags

Denne artikel forklarer om tekst-relaterede tags.

Forklaringen er opdelt i semantiske og ikke-semantiske tags.

YouTube Video

Oprettelse af CSS til forhåndsvisning

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

Grundlæggende tekstrelaterede tags

<div> tag

1<div>This is a division of content.</div>

• <div> tagget er et blokniveau-element, der bruges til at skabe opdelinger inden for HTML.

• <div> tagget er et ikke-semantisk tag.

  Når man fokuserer på semantisk HTML, kan meningsfulde tags (som <section>, <article>) anvendes. Dette hjælper søgemaskiner og skærmlæsere med bedre at forstå sidens indhold.

• Ved at kombinere det med CSS og JavaScript kan du kontrollere sidens udseende og adfærd.

  <div>-tagget bruges til at gruppere indhold på en side som et blokniveau-element. Det bruges hovedsageligt i kombination med CSS og JavaScript til at justere sidelayout, stil og manipulere elementer.

<p> tag

1<p>This is a paragraph of text.</p>

• <p>-tagget er et element, der bruges til at definere et afsnit i HTML. <p> repræsenterer et afsnit og bruges primært til at gruppere og vise tekst. Det hjælper med at gøre indholdet lettere at læse ved visuelt at adskille tekstafsnit.
• Du kan ikke placere andre blokniveau-elementer som et andet <p>-tag eller et <div>-tag i et <p>-tag. Dette er forbudt ifølge HTML-specifikationen. Hvis du gør det, vil browseren automatisk lukke tagget, og det vil ikke blive vist korrekt.

<a> tag

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• <a>-tagget bruges til at oprette links.

  <a>-tagget bruges til at skabe links til andre sider, eksterne websteder eller filer. href-attributten bruges til at angive destinationen for linket.

• Det kan bruges til tekst- eller billedlinks, og ved brug af target="_blank" vil linket blive åbnet i en ny fane.

• target-attributten bruges til at specificere, hvordan den linkede destination vil blive vist.

  • _self (standard): Åbner linket i det aktuelle vindue eller fane.
  • _blank: Åbner linket i et nyt vindue eller en ny fane.
  • _parent: Åbner linket i forældrerammen.
  • _top: Åbner linket i det fulde vindue og ignorerer eventuelle rammer.

• title-attributten bruges til at vise et værktøjstip på et link. Når en bruger svæver over linket, vises den angivne titel.

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• <a>-tagget bruges også til at springe til specifikke placeringer inden for den samme side. For at opnå dette, opsætter du en id-attribut på det ønskede element og bruger denne id i href-attributten for linket.

<span> tag

1Here is some <span style="color: red;">highlighted text

• <span> tagget er et inline-element.

  <span>-tagget er et inline-element, så det bryder ikke linjen, når det bruges mellem tekst, links, billeder eller andre inline-elementer. Det passer naturligt ind i sidens flow.

• Du kan anvende specifikke stilarter delvist.

  Når du vil anvende en stil på kun en del af dokumentet, kan du bruge <span>-tagget til at tildele en CSS-klasse eller ID og anvende stilen på et specifikt område.

• <span> tagget er et ikke-semantisk element.

  <span>-tagget har ingen specifik betydning eller strukturel rolle, så det bruges kun til styling eller scripting-formål. Når semantisk betoning er nødvendig, er det mere passende at bruge semantiske tags som <strong> eller <em>, som vil blive introduceret senere.

<br> tag

1Here is some text with a <br> line break.

• <br> tagget er et inline-element.

  <br>-tagget er et inline-element, så det optager ikke hele blokken og skaber et linjeskift i teksten, hvor det indsættes. Mens <p>-tagget tilføjer margin ovenover og nedenunder for at adskille afsnit, skaber <br>-tagget et linjeskift uden at tilføje margin.

• Det er et selv-lukkende tag, så et afsluttende tag (</br>) er ikke nødvendigt.

• Det er bedst at undgå at overforbruge det og i stedet bruge <p>-tags eller CSS til afsnitsopdelinger eller layoutjusteringer.

  Når tekst organiseres i afsnit, er det mere passende at bruge <p>-tagget. Det anbefales også at bruge CSS til layoutjusteringer. For eksempel kan white-space-egenskaben i CSS vise linjeskift og mellemrum i teksten, som de fremstår.

<hr> tag

1This is some text.<hr>This is another section of text.

• <hr>-tagget er et blokniveau-element.

  <hr>-tagget bruges til at indsætte en vandret linje for visuelt at adskille sektioner af indhold. Det kan også bruges til at angive en tematisk opdeling og give det betydning baseret på konteksten.

• Det er et selv-lukkende tag, så en afsluttende tag (</hr>) er ikke nødvendig.

• Du kan tilpasse farve, længde og tykkelse ved hjælp af CSS.

Semantiske tekstrelaterede tags

Fra <h1> tag til <h6> tag

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• Tagsene <h1> til <h6> er overskriftstags, der bruges i HTML.

  <h1>-tagget repræsenterer den vigtigste overskrift og bruges typisk som hovedtitlen på hele siden. Det er almindeligt kun at bruge ét <h1>-tag pr. HTML-dokument.

  <h2> tagget er den næstvigtigste overskrift efter <h1> og bruges til sektioner eller kapiteltitler inden for siden.

  <h3>-tagget repræsenterer undertitler eller mindre sektioner under <h2>.

  <h4>, <h5> og <h6>-tags repræsenterer lavere niveau overskrifter, der bruges til mere detaljerede emner eller sektionstitler.

• Overskriftstags angiver tekstens vigtighed og hjælper med at skabe den logiske struktur på en side. Søgemaskiner bruger også overskriftstags til at forstå sidens indhold.

<strong> tag

1<strong>Important text</strong> to emphasize significance.

• <strong>-tagget er et HTML-tag, der bruges til at angive tekstens vigtighed eller betoning og vises typisk i fed skrift.

• <strong>-tagget er et semantisk tag, og dets primære formål er at tilføje betydning.

  Det kan angive, at teksten er kontekstuelt vigtig. For eksempel kan det vise tekstens vigtighed for søgemaskiner, hvilket gør det nyttigt til SEO. Det formidler også tekstens vigtighed til brugere med skærmlæsere. På den anden side er <b>-tagget, som vil blive introduceret senere, blot et tag til at gøre teksten fed og giver ingen semantisk betoning.

<em>-tag

1<em>Emphasized text</em> for italics and emphasis.

• <em>-tagget er et HTML-tag, der bruges til at angive vigtighed eller betoning i tekst og vises normalt i kursiv.

• <em>-tagget er et semantisk tag, og dets hovedformål er at tilføje betydning.

  Ligesom <strong>-tagget kan det angive, at teksten er kontekstuelt vigtig. <strong>-tagget vises normalt i fed skrift, mens <em>-tagget typisk vises i kursiv. Begge genkendes af skærmlæsere og søgemaskiner for semantisk betoning, men <strong> angiver stærkere vigtighed, mens <em> formidler følelsesmæssig betoning. Desuden kursiverer <i>-tagget, som vil blive introduceret senere, blot teksten og giver ingen semantisk betoning.

<mark>-tag

1<mark>Highlighted text</mark> for attention.

• <mark>-tagget bruges til at angive, at specifik tekst er kontekstuelt vigtig. Det er nyttigt til at fremhæve søgeresultater eller nøglepunkter.
• Som standard vises tekst inkluderet i <mark>-tagget med en gul baggrund, hvilket visuelt understreger dens vigtighed.

<del>-tag

1<del>Deleted text</del> shows removed content.

• <del>-tagget bruges til at angive, at tekst er blevet slettet eller ændret. Dette tag er nyttigt til at vise historikken for ændringer eller revisioner af tekst.

• Tekst, der er omgivet af <del>-tagget, vises normalt med en gennemstregning. Dette viser visuelt det slettede indhold.

  Tekst, der er omgivet af <del>-tagget, genkendes også som slettet af skærmlæsere. Dette gør det muligt for indhold, der ikke er synligt, at blive forstået.

<ins>-tag

1<ins>Inserted text</ins> shows added content.

• <ins>-tagget bruges til at angive nytilføjet eller ændret tekst i et dokument. Dette tag er nyttigt til at vise historikken for teksttilføjelser eller revisioner.

• I browsere vises tekst, der er omgivet af <ins>-tagget, typisk med en understregning. Dette viser visuelt tilføjet indhold.

  Tekst, der er omgivet af <ins>-tagget, genkendes også som nytilføjet af skærmlæsere. Dette gør det muligt for indhold, der ikke er synligt, at blive forstået.

<abbr>-tag

1<abbr title="World Health Organization">WHO</abbr>

• <abbr>-tagget er et inline-element, der bruges til at angive forkortelser eller akronymer. Brugen af dette tag giver den fulde betydning af forkortelser og bidrager til at forbedre SEO og tilgængelighed. Det hjælper især læsere, der ikke er bekendt med forkortelsen, og brugere af skærmlæsere til bedre at forstå indholdet.

Tags relateret til tekstdekoration

<b>-tag

1<b>Bold text</b> without semantic emphasis.

• <b>-tagget er et inline-element, der bruges til at gøre teksten fed. Ligesom de andre tags, vi vil introducere, bruges det til visuel betoning, men ikke til semantisk betoning.

<i>-tag

1<i>Italic text</i> for style.

• <i>-tagget er et inline-element, der bruges til at kursivere tekst.

<u> tag

1<u>Underlined text</u> for decoration.

• <u>-tagget er et inline-element, der bruges til at understrege tekst.

<small> tag

1<small>This is small text.</small>

• <small>-tagget er et inline-element, der bruges til at vise tekst i en mindre størrelse. Det bruges almindeligvis til at repræsentere supplerende oplysninger eller noter, der er sekundære i forhold til hovedindholdet.

<s> tag

1<s>Strikethrough text</s>

• <s>-tagget er et inline-element, der bruges til at tegne en gennemstregning på tekst.

<sub> tag

1H<sub>2</sub>O

• <sub>-tagget er et inline-element, der bruges til at vise tekst som subscript.

<sup> tag

1E = mc<sup>2</sup>

• <sup>-tagget er et inline-element, der bruges til at vise tekst som superscript.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video