Även om moderna webbplatser i allmänhet är byggda med användarvänliga gränssnitt, är det användbart att känna till lite grundläggande HTML. Om du känner till följande 17 HTML-exempeltaggar (och några extrafunktioner) kommer du att kunna skapa en grundläggande webbsida från början eller justera koden som skapats av en app som WordPress.
Vi har tillhandahållit HTML-kodexempel med utdata för de flesta taggarna. Om du vill se dem i aktion laddar du ner HTML-exemplet i slutet av artikeln. Du kan leka med den i en textredigerare och ladda upp den i en webbläsare för att se vad dina ändringar gör.
1.
Du behöver den här taggen i början av varje HTML-dokument du skapar. Det säkerställer att en webbläsare vet att den läser HTML och att den förväntar sig HTML5, den senaste versionen.
Även om detta egentligen inte är en HTML-tagg, är det fortfarande bra att veta.
2.
Detta är en annan tagg som talar om för en webbläsare att den läser HTML. -taggen går direkt efter DOCTYPE-taggen och du stänger den med en -tagg precis i slutet av din fil. Allt annat i ditt dokument går mellan dessa taggar.
3.
Taggen
startar rubrikdelen av din fil. Det som går in här visas inte på din webbsida. Istället innehåller den metadata för sökmotorer och information för din webbläsare.
För grundläggande sidor kommer
-taggen att innehålla din titel, och det är ungefär det. Men det finns några andra saker som du kan ta med, som vi ska gå igenom om en stund.
4.
Den här taggen anger titeln på din sida. Allt du behöver göra är att sätta din titel i taggen och stänga den, så här (jag har även inkluderat header-taggarna för att visa sammanhanget):
<head>
<title>My Website</title>
</head>
Det är namnet som kommer att visas som fliktitel när den öppnas i en webbläsare.
Precis som titeltaggen, placeras metadata i rubrikområdet på din sida. Metadata används främst av sökmotorer och är information om vad som finns på din sida. Det finns ett antal olika metafält, men dessa är några av de mest använda:
beskrivning: En grundläggande beskrivning av din sida. nyckelord: Ett urval av sökord som är tillämpliga på din sida. författare: Författaren till din sida. utsiktsplats: En tagg för att se till att din sida ser bra ut på alla enheter.
Här är ett exempel som kan gälla den här sidan:
<meta name="description" content="A basic HTML tutorial">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="MUO">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Taggen “viewport” ska alltid ha “width=device-width, initial-scale=1.0” som innehåll för att se till att din sida visas bra på mobila och stationära enheter.
6.
När du stänger rubriksektionen kommer du till brödtexten. Du öppnar den med taggen
och stänger den med taggen . Det går precis i slutet av din fil, precis före -taggen.
Allt innehåll på din webbsida hamnar mellan dessa taggar. Det är så enkelt som det låter:
<body>
Everything you want displayed on your page.
</body>
7.
Taggen
definierar nivå två rubriker såsom avsnittsrubriker,
nivå tre underrubriker, och så vidare, ner till
. Som ett exempel är namnen på taggarna i den här artikeln nivå två rubriker.
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>
. Som ett exempel är namnen på taggarna i den här artikeln nivå två rubriker.
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>
Resultat:
Som du kan se blir de mindre på varje nivå.
8.
Paragraftaggen startar ett nytt stycke. Detta infogar vanligtvis två radbrytningar.
Titta till exempel på brytningen mellan föregående rad och denna. Det är vad en
-tagg kommer att göra.
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>
Resultat:
Ditt första stycke.
Ditt andra stycke.
Du kan också använda CSS-stilar i dina stycketaggar, som den här som ändrar textstorleken:
<p style="font-size: 150%;">This is 50% larger text.</p>
Resultat:
9.
Radbrytningstaggen infogar en enda radbrytning:
<p>The first line.<br>
The second line (close to the first one).</p>
Resultat:
Att arbeta på ett liknande sätt är taggen
. Detta ritar en horisontell linje på din sida och är bra för att separera textavsnitt.
10.
Den här taggen definierar viktig text. I allmänhet betyder det att den kommer att vara fet. Det är dock möjligt att använda CSS för att få text att visas annorlunda.
Du kan dock säkert använda för att feta text.
<strong>Very important things you want to say.</strong>
Resultat:
Mycket viktiga saker du vill säga.
Om du är bekant med taggen för fet text kan du fortfarande använda den. Det finns ingen garanti för att det kommer att fortsätta att fungera i framtida versioner av HTML, men för närvarande fungerar det.
11.
Liksom och är och relaterade. Taggen identifierar framhävd text, vilket vanligtvis betyder att den kommer att bli kursiv. Återigen, det finns möjligheten att CSS kommer att få betonad text att visas annorlunda.
<em>An emphasized line.</em>
Resultat:
En betonad linje.
Taggen fungerar fortfarande, men återigen, det är möjligt att den kommer att fasas ut i framtida versioner av HTML.
12.
Taggen , eller ankare, låter dig skapa länkar. En enkel länk ser ut så här:
<a href="https://www.muo.com/>Go to MUO</a>
Resultat:
Gå till MUO
Attributet “href” identifierar länkens destination. I många fall kommer detta att vara en annan webbplats. Det kan också vara en fil, som en bild eller en PDF.
Andra användbara attribut inkluderar “target” och “title”. Målattributet används nästan uteslutande för att öppna en länk i en ny flik eller ett nytt fönster, så här:
<a href="https://www.muo.com/" target="_blank">Go to MUO in a new tab</a>
Resultat:
Gå till MUO i en ny flik
Attributet “title” skapar ett verktygstips. Håll muspekaren över länken nedan för att se hur det fungerar:
<a href="https://www.muo.com/" title="This is a tool tip">Hover over this to see the tool tip</a>
Resultat:
Håll muspekaren över detta för att se verktygstipset
13. ![]()
Om du vill bädda in en bild på din sida måste du använda bildtaggen. Du kommer normalt att använda det tillsammans med attributet “src”. Detta anger källan till bilden, så här:
<img src="https://www.makeuseof.com/tag/simple-html-code-learn-minutes/wp-content/uploads/2019/04/sunlit-birds.jpg">
Resultat:
Andra attribut är tillgängliga, som “höjd”, “bredd” och “alt”. Så här kan det se ut:
<img src="https://www.makeuseof.com/tag/simple-html-code-learn-minutes/wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image">
Som du kanske förväntar dig, anger attributen “höjd” och “bredd” bildens höjd och bredd. I allmänhet är det en bra idé att bara ställa in en av dem så att bilden skalas korrekt. Om du använder båda kan du få en uttöjd eller klämd bild.
“alt”-taggen talar om för webbläsaren vilken text som ska visas om bilden inte kan visas och är en bra idé att inkludera med vilken bild som helst. Om någon har en särskilt långsam anslutning eller en gammal webbläsare kan de fortfarande få en uppfattning om vad som ska finnas på din sida.
14.
Den ordnade listtaggen låter dig skapa en ordnad lista. I allmänhet betyder det att du får en numrerad lista. Varje objekt i listan behöver en listobjekttagg (
<ol>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ol>
Resultat:
- Första sak Andra sak Tredje sak
I HTML5 kan du använda
- för att vända ordningen på siffrorna. Och du kan ställa in startvärdet med startattributet.
Attributet “type” låter dig tala om för webbläsaren vilken typ av symbol som ska användas för listobjekten. Den kan ställas in på “1”, “A”, “a”, “I” eller “i”, vilket gör att listan visas med den angivna symbolen så här:
<ol type="A">
15.
Den oordnade listan är mycket enklare än dess ordnade motsvarighet. Det är helt enkelt en punktlista.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Resultat:
Första föremålet Andra föremålet Tredje föremålet
Oordnade listor har också “typ”-attribut, och du kan ställa in den på “skiva”, “cirkel” eller “fyrkantig”.
16.
Även om det är ogrundat att använda tabeller för formatering, finns det många tillfällen då du vill använda rader och kolumner för att segmentera information på din sida. Det behövs flera taggar för att få ett bord att fungera. Här är exempel på HTML-koden:
<table>
<tbody>
<tr>
<th>1st column</th>
<th>2nd column</th>
</tr>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tbody>
</table>
Taggarna
anger början och slutet av tabellen. Taggen
innehåller allt tabellinnehåll.Varje rad i tabellen är innesluten i en
Resultat:
| 1:a kolumnen | 2:a kolumnen |
|---|---|
| Rad 1, kolumn 1 | Rad 1, kolumn 2 |
| Rad 2, kolumn 1 | Rad 2, kolumn 2 |
17.
När du citerar en annan webbplats eller person och du vill skilja citatet från resten av ditt dokument, använd blockquote-taggen. Allt du behöver göra är att bifoga citatet i öppnande och avslutande blockquote-taggar:
<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote>
Resultat:
Webben som jag föreställde mig den, vi har inte sett den än. Framtiden är fortfarande så mycket större än det förflutna.
Den exakta formateringen som används kan bero på webbläsaren du använder eller CSS på din webbplats. Men taggen förblir densamma.
HTML-kodprov
Med dessa 17 HTML-exempel bör du kunna skapa en enkel webbplats. Du kan testa dem alla just nu i en textredigerare online för att få en känsla för hur de fungerar.
Om du vill ha fler lektioner i HTML, prova några mikrolärningsappar för kodning. De hjälper dig att få fart på nolltid.
Om författaren
Andy Betts (217 publicerade artiklar)
Andy är frilansskribent och juniorredaktör för Android på MUO. Han har skrivit om konsumentteknologi sedan början av 2000-talet för ett brett utbud av publikationer och har en passion för allt som rör mobilt.
Mer från Andy Betts
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
Cookie Settings
