> For the complete documentation index, see [llms.txt](https://jens-andreasson.gitbook.io/webbutveckling/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jens-andreasson.gitbook.io/webbutveckling/html/html-start.md).
# Din första HTML fil
> Märkspråk och deras inbördes roller, syntax och semantik – där det huvudsakliga innehållet är standarderna för HTML och CSS samt orientering om Ecmaskript och dokumentobjektsmodellen (DOM).
## Vad är HTML?
* **HTML** står för **Hyper Text Markup Language**
* HTML är ett **märkspråk** (ett språk för att märka upp textfiler)
* HTML är standardspråket för att skapa webbsidor
* HTML beskriver strukturen för en webbsida
* HTML består av **element** som berättar för webbläsaren hur webbsidan ska se ut
## Ett exempel
{% hint style="info" %}
Om en HTML-fil har filnamnet **index** så kommer den automatiskt öppnas av webbläsaren när adressen besöks. Filändelsen är **.html**
{% endhint %}
Nedan följer grunden för ett korrekt HTML-dokument. Det består av ett antal element med tillhörande **attribut**. Element skrivs med **taggar** (namnet inom < > tecken).
{% code title="index.html" %}
```markup
Mitt första html dokument
Välkommen!
Detta är p elementets värde.
```
{% endcode %}
### Element
* `` deklarerar att dokument är ett HTML5 dokument.
* `` är **root** (det första) elementet för ett HTML dokument.
* `` elementet innehåller information om webbsidan till webbläsaren.
* `` elementet specificerar [teckenkodning ](/webbutveckling/teknisk-orientering/teckenkodning.md)bland annat.
* `` innehåller sidans titel som värde, vilket syns in webbläsarens titel eller **tab.**
* `<body>` elementet definierar sidans kropp, det innehåll som vi ser på webbsidan.
* `<h1>` elementet skapar en **rubrik** (engelska **heading**).
* `<p>` elementet skapar en **paragraf** (engelska **paragraph**).
Notera att de flesta element har en öppnings- och stängnings-tagg. Ett elements värde skrivs mellan taggarna. Taggar stängs med ett snedstreck /.
{% hint style="info" %}
Studera indragen i exemplet, det är väldigt viktigt att skriv koden med indrag för att öka dess läsbarhet. Det underlättar för dig som utvecklar koden.
{% endhint %}
### Attribut
Exemplet ovanför har ett antal **attribut** som tillhör taggarna.
* `lang`, med ett värde som anger webbsidans språk. Webbläsaren använder det för eventuell översättning av sidan baserat på användarens språk.
* `charset`, vilket [teckenkodning ](/webbutveckling/teknisk-orientering/teckenkodning.md)sidan ska använda. Detta kommer i 99.9% av fallen vara [UTF-8](/webbutveckling/teknisk-orientering/teckenkodning.md#utf-8).
* `name`, `viewport`. Detta anger skalan som används av olika enheter när sidan visas.
{% hint style="info" %}
Med element, attribut och tillhörande text så byggs en webbsidas struktur upp.
{% endhint %}
## Att koda exemplet
Exemplet som finns här ovanför innehåller de element som krävs för en korrekt skriven HTML sida, vi säger att den [validerar ](/webbutveckling/tester/kodkvalitet.md#validering)som korrekt HTML. Du kommer att behöva dessa element för varje sida du skapar, så att skriva av dem för hand är inte rimligt.
Du kan kopiera koden från exemplet här, men det är inte praktiskt i längden. Istället är det viktigt att du bekantar dig med den textredigerare eller [IDE ](/webbutveckling/verktyg/visual-studio-code.md)som du använder för att koda. Den innehåller med största sannolikhet ett verktyg för att skapa viss kod. I [Visual Studio Code](/webbutveckling/verktyg/visual-studio-code.md) skapar du en .html fil, sedan skriver du `html:5` och trycker tab.
{% hint style="info" %}
Nästan alla kod-element har kortkommandon i ditt IDE, lär dig dem!
{% endhint %}