Tillbaka till lista
Digital Ordlista

HTML

HTML, eller HyperText Markup Language, är grunden för alla webbplatser och används för att strukturera innehåll såsom text, bilder och länkar. Det fungerar som skelettet i en webbsida, där olika element som rubriker, stycken och tabeller definieras med hjälp av taggar. HTML samverkar med CSS för design och JavaScript för interaktivitet, vilket gör det till en central del av modern webbutveckling.
Kontakta

Vad är HTML?

HTML (HyperText Markup Language) är ett märkspråk som används för att strukturera och beskriva innehållet på en webbsida. Med hjälp av HTML-taggar berättar du för webbläsaren hur text, bilder, länkar, listor och andra element ska visas. Varje webbsida på internet bygger på en grundstruktur av HTML som sedan kompletteras med CSS för utseende och JavaScript för funktionalitet.

Grundläggande HTML-struktur

Ett enkelt HTML-dokument har följande struktur:

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min Första Webbsida</title>
</head>
<body>
<h1>Välkommen till min webbsida!</h1>
<p>Detta är en enkel HTML-sida.</p>
</body>
</html>

Viktiga HTML-element

  • Rubriker (Headings): Används för att skapa rubriker på olika nivåer från <h1> (viktigast) till <h6> (minst viktig).
    <h1>Huvudrubrik</h1>
    <h2>Underrubrik</h2>
  • Stycken (Paragraphs): För textstycken används <p>-taggen.
    <p>Detta är ett stycke text.</p>
  • Länkar (Links): För att skapa hyperlänkar används <a>-taggen med attributet href.
    <a href="https://example.com">Besök vår sida</a>
  • Bilder (Images): Bilder visas med <img>-taggen som innehåller src (bildens URL) och alt (alternativ text för skärmläsare).
    <img src="bild.jpg" alt="Beskrivning av bilden">
  • Listor: Det finns både numrerade listor <ol> och punktlistor <ul>.
    <ul>
    <li>Första punkten</li>
    <li>Andra punkten</li>
    </ul>

HTML-attribut

HTML-element kan ha attribut som ger ytterligare information eller funktionalitet. Exempelvis kan en länk öppnas i en ny flik med hjälp av attributet target="_blank".

<a href="https://example.com" target="_blank">Öppna i ny flik</a>

Formulär i HTML

Formulär används för att samla in data från användare. Ett enkelt kontaktformulär kan se ut så här:

<form action="/submit" method="POST">
<label for="namn">Namn:</label>
<input type="text" id="namn" name="namn">
<input type="submit" value="Skicka">
</form>

Fördelar med HTML

  • Lätt att lära sig: HTML har en enkel syntax och är ett bra första steg för att lära sig webbutveckling.
  • Universellt språk: Alla webbläsare förstår HTML, vilket gör det till en grundstandard för webbplatser.
  • Flexibelt: HTML kan användas för att bygga allt från enkla bloggar till komplexa webbsidor.

Nackdelar med HTML

  • Begränsad funktionalitet: HTML kan bara strukturera innehåll och behöver kompletteras med CSS och JavaScript för design och interaktivitet.
  • Statiskt: En webbsida byggd endast med HTML är statisk och saknar dynamiskt innehåll.

HTML5 – den senaste versionen

HTML5 är den senaste versionen av HTML och introducerade nya element som <header>, <footer>, <article> och <section> för bättre semantik och struktur. Dessutom har HTML5 stöd för multimedia med <audio>– och <video>-taggar, vilket gör det enklare att lägga till ljud och video utan tredjepartstillägg.

Exempel på HTML5-element

  • Video:
    <video controls>
    <source src="video.mp4" type="video/mp4">
    Din webbläsare stödjer inte video.
    </video>
  • Semantiska element:
    <article>
    <h2>Nyhetsartikel</h2>
    <p>Detta är en artikel med viktigt innehåll.</p>
    </article>

Sammanfattning

HTML är det grundläggande språket för att bygga webbsidor. Det används för att definiera sidans struktur och innehåll, från rubriker och text till bilder och länkar. Med HTML5 har språket blivit ännu kraftfullare och mer anpassat för moderna webbplatser genom förbättrat stöd för multimedia och semantiska element. Genom att kombinera HTML med CSS och JavaScript kan du skapa dynamiska och visuellt tilltalande webbplatser som fungerar på alla enheter och skärmstorlekar.