1037 HTML5-element för sidinnehåll

Definitioner från W3C cheatsheet

Läs om element på W3Schools.

Läs även om elementens attribut på W3Schools.

Rubrik <h1>, <h2>, ..., <h6>

Rubrik på nivå 1 - 6

Mer om användning av rubriknivå h1 i HTML5

Länk <a>

En länk, se exempel nedan.

Rikards hemsida

Blir som visas nedan.

Rikards hemsida

Textstycke <p>

Ett stycke med text. Det blir blankrad mellan stycken.

<div>

Används främst när det behövs ett extra element för att något ska kunna få det utseendet som man vill med hjälp av CSS. Använd andra HTML5 element då det är möjligt.

Bilder

Bild <img />

För att länka in en bild skriv som följer.

<img src='sökvägTillBild/bildnamn.jpg' alt='Text som syns istället för bilden om den inte kan visas.' width='400' height='300' />

Detta element har ingen sluttag och avslutas därför med />.

Attributet alt ska alltid ha ett värde. Det är en text som visas istället för bilden då den inte kan visas.

Attributen width och height ska också alltid sättas. De ska sättas till bildens faktiska bredd och höjd räknat i pixlar. Om man vill att bilden ska ha en annan storlek på skärmen än vad den har i filen, redigerar man filen till exempel i ett bildredigeringsprogram, så att bilden får önskad storlek. Om faktisk bredd och önskad bredd stämmer laddas bilden in snabbare. Höjden måste också stämma.

<figure> och <figcaption>

Elementet <figcaption> används för bildtexter, se exempel nedan.

Text som visas då bilden inte kan visas
Bildtext

Listor

Numrerad lista <ol>

Ordered list.

Exempel på lista.

  1. punkt 1
  2. punkt 2

Får följande utseende.

  1. punkt 1
  2. punkt 2

Punktlista <ul>

Unordered list.

Exempelkod.

  • punkt 1
  • punkt 2

Listan får följande utseende.

  • punkt 1
  • punkt 2

Inline-element

<span>

The span element is a generic wrapper for phrasing content that by itself does not represent anything.

Kan till exempel användas då ett engelsk ord dyker upp i en text.

Det engelska ordet för flicka är <span lang='en'>girl</span>.

Om texten läses upp med talsyntes uttalas girl på engelska istället för på svenska.

Titel på verk<cite>

The cite element represents the cited title of a work; for example, the title of a book mentioned within the main text flow of a document.

Obs ej, citat. Använd <blockquote> för citat.

<strong>

The strong element represents a span of text with strong importance.

Webbläsarna brukar visa det med fet stil. Använd strong-elementet istället för b-elementet.

<em>

The em element represents a span of text with emphatic stress.

Webbläsarna brukar visa det med kursiv stil. Använd em-elementet istället för i-elementet.

<b>

Bold, fet stil.

<i>

Italic, kursiv stil.

Övriga element

Radbrytning <br />

Radbrytning.

Horisontell linje <hr />

The hr element represents a paragraph-level thematic break.

Blir en horisontell linje.

Programkod <code>

Programkod. Till exempel HTML-kod, JAVA-kod, och css-kod.

<pre>

The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

Texten inuti pre-elementet formateras med mellanslag och radbrytningar som den är gjord i html-filen.

Exempel

    text      text
    ny rad

blir

  text      text
  ny rad

Men

text text ny rad

blir

text text ny rad

Observera att i det senare fallet är flera på varandra följande mellanslag utbytta mot ett, och radbrytning är utbytt mot mellanslag.

Citat <blockquote>

The blockquote element represents a section that is quoted from another source.

Citat.