Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära HTML-Dokumentstruktur Förklarad | HTML-Grunder
HTML-Grunder

bookHTML-Dokumentstruktur Förklarad

Ett HTML-dokument följer en konsekvent struktur bestående av några nyckelelement.

<html>-tagg

Rot-elementet för varje sida. Allt innehåll placeras mellan den öppnande <html> och den avslutande </html>-taggen.

<html>
  <!-- Other elements go here -->
</html>

<head>-tagg

Innehåller information om sidan som inte är synlig för användaren. Detta inkluderar titel, metadata och länkar till stilmallar eller skript.

<head>
  <title>Title of the Document</title>
  <meta charset="UTF-8" />
  <!-- Other meta tags, links, and scripts go here -->
</head>

Vanliga element i <head>:

  • <title>: text som visas på webbläsarens flik;
  • <meta charset="UTF-8">: anger textkodning;
  • <meta name="description">: kort sidbeskrivning;
  • <meta name="viewport">: behövs för responsiv design.

<body>-taggen

Innehåller allt synligt på sidan: text, bilder, länkar, formulär, etc.

<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph of text.</p>
  <!-- Other content goes here -->
</body>

Dokumenttypdeklaration

Anger för webbläsaren att HTML5-standarden ska användas vid rendering av sidan.

<!DOCTYPE html>

Exempel på fullständig struktur

För att sammanfatta, samlas alla element vi har gått igenom och kombineras till ett enda HTML-dokument.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <meta charset="UTF-8" />
    <!-- Other meta tags, links, and scripts go here -->
  </head>

  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
    <!-- Other content goes here -->
  </body>
</html>

Nedan kan du se hur HTML-dokumentet visas i webbläsaren.

1. Vilken tagg är rottaggen i ett HTML-dokument?

2. Vad innehåller <head>-taggen?

3. Vad definierar taggen <title>?

4. Vad är syftet med taggen <body>?

question mark

Vilken tagg är rottaggen i ett HTML-dokument?

Select the correct answer

question mark

Vad innehåller <head>-taggen?

Select the correct answer

question mark

Vad definierar taggen <title>?

Select the correct answer

question mark

Vad är syftet med taggen <body>?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 1

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

bookHTML-Dokumentstruktur Förklarad

Svep för att visa menyn

Ett HTML-dokument följer en konsekvent struktur bestående av några nyckelelement.

<html>-tagg

Rot-elementet för varje sida. Allt innehåll placeras mellan den öppnande <html> och den avslutande </html>-taggen.

<html>
  <!-- Other elements go here -->
</html>

<head>-tagg

Innehåller information om sidan som inte är synlig för användaren. Detta inkluderar titel, metadata och länkar till stilmallar eller skript.

<head>
  <title>Title of the Document</title>
  <meta charset="UTF-8" />
  <!-- Other meta tags, links, and scripts go here -->
</head>

Vanliga element i <head>:

  • <title>: text som visas på webbläsarens flik;
  • <meta charset="UTF-8">: anger textkodning;
  • <meta name="description">: kort sidbeskrivning;
  • <meta name="viewport">: behövs för responsiv design.

<body>-taggen

Innehåller allt synligt på sidan: text, bilder, länkar, formulär, etc.

<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph of text.</p>
  <!-- Other content goes here -->
</body>

Dokumenttypdeklaration

Anger för webbläsaren att HTML5-standarden ska användas vid rendering av sidan.

<!DOCTYPE html>

Exempel på fullständig struktur

För att sammanfatta, samlas alla element vi har gått igenom och kombineras till ett enda HTML-dokument.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <meta charset="UTF-8" />
    <!-- Other meta tags, links, and scripts go here -->
  </head>

  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
    <!-- Other content goes here -->
  </body>
</html>

Nedan kan du se hur HTML-dokumentet visas i webbläsaren.

1. Vilken tagg är rottaggen i ett HTML-dokument?

2. Vad innehåller <head>-taggen?

3. Vad definierar taggen <title>?

4. Vad är syftet med taggen <body>?

question mark

Vilken tagg är rottaggen i ett HTML-dokument?

Select the correct answer

question mark

Vad innehåller <head>-taggen?

Select the correct answer

question mark

Vad definierar taggen <title>?

Select the correct answer

question mark

Vad är syftet med taggen <body>?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 1
some-alt