Gå til innhold

Tekst og Overskrifter

HTML har flere elementer for å strukturere tekst på en nettside.

Overskrifter

HTML har seks nivåer av overskrifter, fra <h1> (størst) til <h6> (minst):

<h1>Hovedoverskrift</h1>
<h2>Underoverskrift</h2>
<h3>Seksjonstittel</h3>
<h4>Nivå 4</h4>
<h5>Nivå 5</h5>
<h6>Nivå 6</h6>

Visuelt hierarki

<h1> ████████████████████ Størst
<h2> ██████████████████
<h3> ████████████████
<h4> ██████████████
<h5> ████████████
<h6> ██████████ Minst

Regler for overskrifter

Best practice

  • Bruk kun én <h1> per side (hovedtittelen)
  • Ikke hopp over nivåer (h1 → h3)
  • Bruk overskrifter for struktur, ikke for å endre tekststørrelse
<!-- Riktig struktur -->
<h1>Min blogg</h1>
    <h2>Første innlegg</h2>
        <h3>Introduksjon</h3>
        <h3>Hovedinnhold</h3>
    <h2>Andre innlegg</h2>

<!-- Feil - hopper over h2 -->
<h1>Min blogg</h1>
    <h3>Første innlegg</h3>

Avsnitt

<p>-elementet definerer et avsnitt:

<p>Dette er første avsnitt. Det kan inneholde mye tekst.</p>

<p>Dette er andre avsnitt. Nettleseren legger automatisk
mellomrom mellom avsnitt.</p>

Nettleseren legger automatisk margin over og under avsnitt.

Linjeskift

For å tvinge et linjeskift uten nytt avsnitt, bruk <br>:

<p>Første linje<br>
Andre linje<br>
Tredje linje</p>

Ikke misbruk br

Bruk <br> bare for naturlige linjeskift (som i adresser eller dikt), ikke for å lage mellomrom. Bruk CSS for layout.

Horisontal linje

<hr> lager en horisontal skillelinje:

<p>Første seksjon</p>
<hr>
<p>Andre seksjon</p>

Tekstformatering

Viktig tekst

<strong>Viktig tekst</strong>  <!-- Semantisk viktig, vises fet -->
<b>Fet tekst</b>               <!-- Bare visuelt fet -->

Uthevet tekst

<em>Uthevet tekst</em>  <!-- Semantisk uthevet, vises kursiv -->
<i>Kursiv tekst</i>     <!-- Bare visuelt kursiv -->

Semantikk vs. utseende

<strong> og <em> har betydning (viktig/uthevet). <b> og <i> er bare visuelle. Skjermlesere leser <strong> og <em> annerledes.

Andre formateringer

<mark>Markert tekst</mark>           <!-- Highlightet -->
<del>Slettet tekst</del>             <!-- Gjennomstreket -->
<ins>Innsatt tekst</ins>             <!-- Understreket -->
<small>Liten tekst</small>           <!-- Mindre tekst -->
<sub>Subscript</sub>                 <!-- Senket (H₂O) -->
<sup>Superscript</sup>               <!-- Hevet (x²) -->

Eksempel

<p>Vann har formelen H<sub>2</sub>O.</p>
<p>Arealet er r<sup>2</sup> × π.</p>
<p>Prisen var <del>199</del> <ins>149</ins> kr.</p>
<p>Dette er <mark>viktig</mark> informasjon.</p>

Sitat

Kort sitat (inline)

<p>Han sa <q>Hei på deg!</q> og gikk videre.</p>

Nettleseren legger automatisk til anførselstegn.

Langt sitat (blokk)

<blockquote>
    <p>Å være eller ikke være, det er spørsmålet.</p>
</blockquote>

Nettleseren rykker inn blokksitatene.

Med kilde

<blockquote cite="https://example.com/kilde">
    <p>Et berømt sitat.</p>
</blockquote>
<cite>– Forfatter</cite>

Kode

Inline kode

<p>Bruk <code>console.log()</code> for å skrive ut.</p>

Kodeblokk

<pre><code>function hello() {
    console.log("Hello!");
}
</code></pre>

<pre> bevarer mellomrom og linjeskift.

Tastaturinput

<p>Trykk <kbd>Ctrl</kbd> + <kbd>C</kbd> for å kopiere.</p>

Output

<p>Resultatet er: <samp>42</samp></p>

Forkortelser

<p><abbr title="HyperText Markup Language">HTML</abbr> er gøy!</p>

Hover over teksten for å se full forklaring.

Adresse

<address>
    Ola Nordmann<br>
    Storgata 1<br>
    0001 Oslo<br>
    <a href="mailto:ola@example.com">ola@example.com</a>
</address>

Brukes for kontaktinformasjon.

Tid og dato

<p>Møtet er <time datetime="2024-12-24">julaften</time>.</p>
<p>Festen starter <time datetime="18:00">kl. 18</time>.</p>
<p>Publisert <time datetime="2024-06-15T10:30">15. juni 2024</time>.</p>

datetime-attributtet er maskinlesbart.

Preformatert tekst

<pre> bevarer all formatering:

<pre>
    Dette    har    mange    mellomrom
    og
    flere
    linjer
</pre>

Style tekst med CSS

HTML definerer hva teksten er, CSS bestemmer hvordan den ser ut. Se CSS Tekst og Typografi for fonter, størrelser og tekstformatering.

Oppsummering

Element Funksjon
<h1>-<h6> Overskrifter
<p> Avsnitt
<br> Linjeskift
<hr> Horisontal linje
<strong> Viktig tekst (fet)
<em> Uthevet tekst (kursiv)
<mark> Markert tekst
<del> / <ins> Slettet / innsatt
<sub> / <sup> Senket / hevet
<blockquote> Blokksitat
<code> Kode
<pre> Preformatert
<abbr> Forkortelse
<time> Dato/tid