Tagger og Elementer

HTML bruker tagger for å merke innhold. Tagger forteller nettleseren hva innholdet er.

Hva er en tag?

En tag er en kode omgitt av vinkelparenteser < >.

<p>Dette er et avsnitt.</p>

Starttag og slutttag

De fleste elementer har både en starttag og en slutttag:

<tagname>Innhold her</tagname>

• Starttag: <p>
• Slutttag: </p> (med skråstrek /)
• Innhold: Teksten eller andre elementer mellom taggene

<h1>Dette er en overskrift</h1>
<p>Dette er et avsnitt med tekst.</p>

Elementer

Et element er alt fra starttag til slutttag, inkludert innholdet:

┌─────────────────────────────────────┐
│            ELEMENT                  │
│                                     │
│  <p>   Dette er tekst.   </p>       │
│   ↑           ↑            ↑        │
│ start      innhold       slutt      │
│  tag                      tag       │
└─────────────────────────────────────┘

Nøstede elementer

Elementer kan inneholde andre elementer:

<p>Dette er <strong>viktig</strong> tekst.</p>

<p>
  └── "Dette er "
  └── <strong>
        └── "viktig"
      </strong>
  └── " tekst."
</p>

<!-- Riktig -->
<p><strong>Tekst</strong></p>

<!-- Feil -->
<p><strong>Tekst</p></strong>

Selvlukkende tagger

Noen elementer har ikke innhold og trenger ingen slutttag:

<img src="bilde.jpg" alt="Beskrivelse">
<br>
<hr>
<input type="text">

Disse kalles også "void elements" eller "tomme elementer".

Vanlige selvlukkende tagger

Attributter

Attributter gir ekstra informasjon om et element. De skrives i starttaggen:

<tag attributt="verdi">Innhold</tag>

Eksempler

<a href="https://nrk.no">Gå til NRK</a>
<img src="katt.jpg" alt="En søt katt">
<input type="email" placeholder="Din e-post">

Flere attributter

Et element kan ha mange attributter:

<img src="bilde.jpg" alt="Beskrivelse" width="300" height="200">
<a href="side.html" target="_blank" title="Åpne i ny fane">Lenke</a>

Vanlige attributter

Globale attributter

Noen attributter kan brukes på alle elementer:

<p id="intro">Unik identifikator</p>
<p class="highlight">Klassenavn</p>
<p title="Tooltip-tekst">Hold musen over meg</p>
<p style="color: red;">Inline styling</p>

Kommentarer

Kommentarer er notater i koden som ikke vises på siden:

<!-- Dette er en kommentar -->

<!--
    Dette er en
    flerlinjes kommentar
-->

<p>Synlig tekst</p>
<!-- <p>Denne er kommentert ut</p> -->

Store og små bokstaver

HTML-tagger er ikke case-sensitive, men bruk alltid små bokstaver:

<!-- Anbefalt -->
<p>Tekst</p>

<!-- Fungerer, men ikke anbefalt -->
<P>Tekst</P>

Mellomrom i HTML

HTML ignorerer flere mellomrom og viser dem som ett:

<p>Mange      mellomrom       her</p>

Vises som: "Mange mellomrom her"

For å tvinge mellomrom, bruk   (non-breaking space):

<p>Flere&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mellomrom</p>

Vises som: "Mange      mellomrom"

Oppsummering