Tekstrelaterte koder

Denne artikkelen forklarer om tekstrelaterte tagger.

Forklaringen er delt inn i semantiske og ikke-semantiske tagger.

YouTube Video

Oppretter CSS for 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}

Grunnleggende tekstrelaterte koder

<div>-tag

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

• <div>-taggen er et blokk-nivå element som brukes til å skape inndelinger i HTML.

• <div>-taggen er en ikke-semantisk tag.

  Når vi fokuserer på semantisk HTML, kan meningsfulle tagger (som <section>, <article>) brukes. Dette hjelper søkemotorer og skjermlesere med å bedre forstå innholdet på siden.

• Ved å kombinere den med CSS og JavaScript kan du kontrollere sidens utseende og oppførsel.

  <div>-taggen brukes til å gruppere innhold på en side som et blokk-nivå element. Den brukes hovedsakelig i kombinasjon med CSS og JavaScript for å justere sidens layout, stil og manipulere elementer.

<p>-tag

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

• <p>-taggen er et element som brukes til å definere et avsnitt i HTML. <p> representerer et avsnitt og brukes hovedsakelig til å gruppere og vise tekst. Den hjelper til med å gjøre innholdet lettere å lese ved å visuelt skille tekstseksjoner.
• Du kan ikke plassere andre blokk-nivå elementer som en annen <p>-tagg eller en <div>-tagg inne i en <p>-tagg. Dette er forbudt i henhold til HTML-spesifikasjonen. Hvis du gjør det, vil nettleseren automatisk lukke taggen, og den vises ikke korrekt.

<a>-tag

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

• <a>-taggen brukes til å lage lenker.

  <a>-taggen brukes til å lage lenker til andre sider, eksterne nettsteder eller filer. href-attributtet brukes til å spesifisere destinasjonen for lenken.

• Den kan brukes for tekst- eller bildelenker, og ved å bruke target="_blank" vil lenken åpnes i en ny fane.

• target-attributtet brukes til å spesifisere hvordan den lenkede destinasjonen skal vises.

  • _self (standard): Åpner lenken i det nåværende vinduet eller fanen.
  • _blank: Åpner lenken i et nytt vindu eller en ny fane.
  • _parent: Åpner lenken i foreldrerammen.
  • _top: Åpner lenken i det fullstendige vinduet, og ignorerer eventuelle rammer.

• title-attributtet brukes til å vise et verktøytips på en lenke. Når en bruker holder musen over lenken, vises den angitte tittelen.

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>-taggen brukes også til å hoppe til spesifikke steder innenfor samme side. For å oppnå dette, angir du et id-attributt på målelementet og bruker dette id i href-attributtet til lenken.

<span>-tag

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

• <span>-taggen er et inline-element.

  <span>-taggen er et inline-element, så den bryter ikke linjen når den brukes mellom tekst, lenker, bilder eller andre inline-elementer. Den passer naturlig inn i flyten av siden.

• Du kan anvende spesifikke stiler delvis.

  Når du vil anvende en stil kun på en del av dokumentet, kan du bruke <span>-taggen til å tildele en CSS-klasse eller et ID og anvende stiler på et spesifikt område.

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

  Siden <span>-taggen ikke har noen spesifikk betydning eller strukturell rolle, brukes den kun for styling eller skripting. Når semantisk vektlegging er nødvendig, er det mer hensiktsmessig å bruke semantiske tagger som <strong> eller <em>, som vil bli introdusert senere.

<br>-tagg

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

• <br>-taggen er et inline-element.

  Siden <br>-taggen er et inline-element, tar den ikke opp hele blokken, og den skaper et linjeskift i teksten der den er plassert. Mens <p>-taggen legger til marger over og under for å skille avsnitt, skaper <br>-taggen et linjeskift uten å legge til noen marg.

• Det er en selvlukkende tagg, så en avsluttende tagg (</br>) er ikke nødvendig.

• Det er best å unngå overforbruk av den, og bruke <p>-tagger eller CSS for avsnittsdeler eller layoutjusteringer.

  Når du organiserer tekst i avsnitt, er det mer hensiktsmessig å bruke <p>-taggen. Det anbefales også å bruke CSS for layoutjusteringer. For eksempel, ved å bruke white-space-egenskapen i CSS kan man vise linjeskift og mellomrom i tekst slik de fremstår.

<hr>-tagg

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

• <hr>-taggen er et blokk-nivå-element.

  <hr>-taggen brukes til å sette inn en horisontal linje for visuelt å skille deler av innholdet. Den kan også brukes til å betegne et tematisk skille, gi den betydning basert på kontekst.

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

• Du kan tilpasse fargen, lengden og tykkelsen ved hjelp av CSS.

Semantiske tekstrelaterte tagger

Fra <h1>-tagg til <h6>-tagg

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

• Taggene <h1> til <h6> er overskriftstagger brukt i HTML.

  <h1>-taggen representerer den viktigste overskriften og brukes vanligvis som hovedtittelen på hele siden. Det er vanlig å bruke bare én <h1>-tagg per HTML-dokument.

  <h2>-taggen er den nest viktigste overskriften etter <h1> og brukes for seksjons- eller kapiteltitler innen siden.

  <h3>-taggen representerer undertitler eller mindre seksjoner under <h2>.

  Taggene <h4>, <h5>, og <h6> representerer lavere nivå overskrifter, brukt for mer detaljerte elementer eller seksjonstitler.

• Overskrifttagger indikerer betydningen av tekst og hjelper med å lage den logiske strukturen på en side. Søkemotorer bruker også overskrifttagger for å forstå innholdet på siden.

<strong>-tagg

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

• <strong>-taggen er en HTML-tag brukt for å indikere viktigheten eller betoningen av tekst og vises vanligvis i fet skrift.

• <strong>-taggen er en semantisk tag, og dens hovedformål er å tilføre mening.

  Den kan indikere at teksten er kontekstmessig viktig. For eksempel kan den vise viktigheten av teksten for søkemotorer, noe som gjør den nyttig for SEO. Den formidler også viktigheten av teksten til brukere med skjermlesere. På den andre siden er <b>-taggen, som vil bli introdusert senere, bare en tag for å gjøre tekst fet og gir ikke semantisk betoning.

<em>-tag

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

• <em>-taggen er en HTML-tag brukt for å indikere viktighet eller betoning i tekst og vises vanligvis i kursiv.

• <em>-taggen er en semantisk tag, og dens hovedformål er å tilføre mening.

  Akkurat som <strong>-taggen kan den indikere at teksten er kontekstmessig viktig. <strong>-taggen vises vanligvis i fet skrift, mens <em>-taggen vises i kursiv. Begge gjenkjennes av skjermlesere og søkemotorer for semantisk betoning, men <strong> indikerer sterkere betydning, mens <em> formidler emosjonell betoning. I tillegg er <i>-taggen, som vil bli introdusert senere, kun for å kursivere tekst og gir ikke semantisk betoning.

<mark>-tag

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

• <mark>-taggen brukes for å indikere at spesifikk tekst er kontekstmessig viktig. Den er nyttig for å fremheve søkeresultater eller viktige punkter.
• Som standard vises tekst omsluttet av <mark>-taggen med en gul bakgrunn, som visuelt fremhever dens viktighet.

<del>-tag

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

• <del>-taggen brukes for å indikere at tekst har blitt slettet eller endret. Denne taggen er nyttig for å vise historien av endringer eller revisjoner i tekst.

• Tekst som er omsluttet av <del>-taggen vises vanligvis med gjennomstreking. Dette indikerer visuelt det slettede innholdet.

  Tekst som er omsluttet av <del>-taggen gjenkjennes også som slettet av skjermlesere. Dette gjør at innhold som ikke er visuelt synlig, fortsatt kan bli forstått.

<ins>-tag

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

• <ins>-taggen brukes til å indikere nytilføyet eller modifisert tekst i et dokument. Denne taggen er nyttig for å vise historien til teksttilføyelser eller revisjoner.

• I nettlesere blir tekst som er innesluttet i <ins>-taggen vanligvis vist med en understrek. Dette indikerer visuelt at innhold er lagt til.

  Tekst innesluttet i <ins>-taggen blir også gjenkjent som nylagt til av skjermlesere. Dette gjør at innhold som ikke er visuelt synlig, fortsatt kan bli forstått.

<abbr>-tag

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

• <abbr>-taggen er et in-line element som brukes til å indikere forkortelser eller akronymer. Å bruke denne taggen gir full betydning av forkortelser og bidrar til å forbedre SEO og tilgjengelighet. Det hjelper spesielt lesere som ikke er kjent med forkortelsen, samt brukere av skjermlesere, å bedre forstå innholdet.

Tekstdekorasjonsrelaterte tagger

<b>-tag

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

• <b>-taggen er et in-line element som brukes til å sette tekst i fet skrift. Som de andre taggene vi vil introdusere, brukes den for visuell fremheving, men ikke for semantisk fremheving.

<i>-tag

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

• <i>-taggen er et in-line element som brukes til å kursivere tekst.

<u>-tag

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

• <u>-taggen er et in-line element som brukes til å understreke tekst.

<small>-tag

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

• <small>-taggen er et inline-element som brukes til å vise tekst i en mindre størrelse. Det brukes vanligvis til å representere supplerende informasjon eller notater som er sekundære til hovedinnholdet.

<s>-tag

1<s>Strikethrough text</s>

• <s>-taggen er et in-line element som brukes til å trekke en gjennomgående strek på tekst.

<sub>-tag

1H<sub>2</sub>O

• <sub>-taggen er et inline-element som brukes til å vise tekst som senket skrift.

<sup>-tag

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

• <sup>-taggen er et inline-element som brukes til å vise tekst som hevet skrift.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video