Google Play badge

hypertextmarkeringsspråk


Hypertext Markup Language (HTML)

HTML står för Hypertext Markup Language. Det är standardspråket för märkning av dokument som är utformade för att visas i en webbläsare. HTML kan få hjälp av tekniker som Cascading Style Sheets (CSS) och skriptspråk som JavaScript.

Grunden för webben

I grunden är internet ett stort nätverk av datorer anslutna globalt. Det primära sättet vi interagerar med detta nätverk är genom World Wide Web (WWW), ett system av sammanlänkade hypertextdokument som nås via internet. I hjärtat av WWW finns webbsidor, som är dokument skrivna i HTML. HTML tillhandahåller den grundläggande strukturen för webbplatser, som sedan förbättras och modifieras av andra tekniker som CSS och JavaScript.

HTML-dokumentstruktur

Ett HTML-dokument är strukturerat enligt en uppsättning kapslade taggar, som är element omgivna av vinkelparenteser. Dessa taggar talar om för webbläsaren hur innehållet ska visas. Ett exempel på en enkel HTML-dokumentstruktur är:

 <!DOCTYPE html>
<html>
    <huvud>
        <title>Sidrubrik</title>
    </head>
    <kropp>
        <h1>Detta är en rubrik</h1>
        <p>Detta är ett stycke.</p>
    </body>
</html>

Den här koden definierar en grundläggande webbsida med en titel, en rubrik och ett textstycke.

HTML-element och taggar

HTML-dokument består av HTML-element. Varje element representeras av en starttagg, visst innehåll och en sluttagg. Start- och sluttaggar för ett element är identiska, förutom att sluttaggen innehåller ett snedstreck före elementnamnet.

Taggen <code><p></code> omsluter till exempel ett stycke text, och den är strukturerad enligt följande:

 <p>Detta är ett exempelstycke.</p>

Olika element tjänar olika syften. Till exempel:

Attribut

HTML-element kan ha attribut som ger ytterligare information om elementen. Attribut placeras i starttaggen för ett element och ges ofta i namn/värdepar som <code>name="value"</code>.

För att till exempel bädda in en bild använder vi taggen <code><img></code> med attributet <code>src</code> (källa) för att ange webbadressen till bilden:

 <img src="url to image.jpg" alt="Beskrivning av bild">

Attributet <code>alt</code> tillhandahåller alternativ text för bilden om den inte kan visas.

Länkar och navigering

Användningen av taggen <code><a></code> skapar hyperlänkar som är grundläggande för webbens sammanlänkning. En hyperlänk kan länka till en annan webbsida, ett annat avsnitt på samma sida eller till och med en nedladdningsbar fil. Till exempel:

 <a href="https://example.com">Besök Exempel.com</a>

Detta skapar en länk till <code>https://example.com</code>.

Listor

HTML tillhandahåller element för att skapa listor. Det finns två primära typer av listor:

Varje objekt i listan omges av taggen <code><li></code> (listobjekt).

HTML5

HTML5 är den senaste utvecklingen av standarden, och introducerar många nya funktioner som speglar moderna behov av multimedia och interaktiva dokument. Dessa inkluderar nya strukturella element (<code><header></code>, <code><footer></code>, <code><article></code>, <code><section></code>) , grafiska element (<code><canvas></code> för ritning, <code><svg></code> för skalbar vektorgrafik) och mediaelement (<code><audio></code> och <kod> ><video></code>).

Semantisk HTML

Semantisk HTML hänvisar till användningen av HTML-uppmärkning för att förstärka semantiken, eller innebörden, av informationen på webbsidor. Istället för att bara definiera hur element ser ut eller beter sig (det är ett jobb för CSS och JavaScript), beskriver semantisk HTML strukturen och typen av innehåll korrekt. Till exempel anger en <code><article></code>-tagg att innehållet inuti är en artikel, medan en <code><nav></code>-tagg anger en navigeringsmeny.

Att använda semantisk HTML förbättrar tillgängligheten och sökbarheten för webbinnehåll, vilket gör det mer användbart och upptäckbart.

Slutsats

HTML är en hörnstensteknik för World Wide Web, som tillhandahåller den grundläggande strukturen för webbsidor. Genom att använda taggar, attribut och element tillåter HTML skapande av strukturerade dokument. Genom att förstå och använda HTML kan man skapa ett brett utbud av innehåll tillgängligt på webben, från enkla textdokument till komplexa interaktiva multimediaupplevelser. Som grunden för webbutveckling är behärskning av HTML avgörande för alla som vill designa eller utveckla för webben.

Download Primer to continue