Denna hemsida beskriver bl.a. de fem grundläggande elementen som bör förekomma i alla hemsidor. Funktion hos taggars attribut (som bl.a. påverkar taggars utseende) behandlas liksom hur man markerar rubriker och stycken samt hur man infogar bilder.
... nya strukturella taggar i HTML 5.
... de fem som bör finnas i alla sidor, taggars attribut samt färg för bakgrund och text.
Det finns fem element som bör (måste) vara med i ett (X)HTML-dokument för att det ska vara en giltig hemsida. Webbläsare brukar dock vara "förlåtande" och visa hemsidan ändå, dock utan garanti om hur. Nedan visas taggarna för elementen och vad de betyder.
<!DOCTYPE html>DOCTYPE
brukar skrivas med gemener, bl.a. för bakåtkompabilitet, och följs av
html för att ange HTML version 5 (som numera är standard;
se mer nedan).
<html><head><title><body>Nedan visas ett exempel på var taggarna (för "de fem" elementen) ska placeras i dokumentet och hur de förhåller sig till varandra.
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
</body>
</html>Högerklicka i webbsida och välj Visa sidälla (View page source).
Som nämnt ovan så används taggen <!DOCTYPE ...> för att
ange hur webbläsare ska tolka dokument. Nedan är några exempel på versioner,
där endast den första används numera.
| <!DOCTYPE html> | HTML version 5 |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> | HTML version 4.01 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> | XHTML version 1 |
För att underlätta för besökare så bör språk för innehåll anges för sida
vilket görs i taggen <html>.
Genom att ange språk i sida så kan hjälpverktyg för t.ex. personer med nedsatt syn lättare göra det de gjorts för att göra. ;-) Det finns även riktlinjer (och lagar?) som visar på vad man bör göra för att göra webbsidor mer tillgängliga för personer med t.ex. nedsatt syn eller rörelseförmåga.
<html lang="sv">För att webbläsare ska kunna presentera innehåll korrekt, t.ex. svenska
tecken (å, ä och ö), så bör teckenkodning som använts för att redigera
webbsida med anges, vilket görs med taggen <meta>
i webbsidans huvud (<head>).
Rekommenderad teckenkodning är UTF-8, vilket brukar kunna anges när
fil sparas. (Andra vanliga teckenkodningar är windows-1252
och ISO 8859-1, som inte rekommenderas.)
<meta charset="UTF-8">viewport)För att ange den synliga delen av sida för webbläsare och för att s.k.
responsiv design ska fungera så bör man ange fönsterstorlek (viewport),
vilket görs med taggen <meta>.
Rekommenderat värde för fönsterstorlek är det nedan.
width=device-width, initial-scale=1.0.
<meta name="viewport"
content="width=device-width, initial-scale=1.0">Så, enligt information ovan så bör en webbsida minst innhålla koden i exempel till höger (eller nedan).
Många verktyg för att redigera webbsidor, t.ex. Microsofts Visual Studio Code, innehåller funktioner för att generera HTML-kod med kortkommando (s.k. "Emmet-kommando"). Ett mycket användbart kortkommando är utropstecknet (!) som expanderar till koden till höger (eller nedan). För att använda kortkommandona så skriver man kommandot och trycker sen på Tab-tangenten. (Tips: spara först sida så att verktyg kan avgöra typ av kod i fil - HTML i detta fall. ;-))
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>itel för sida</title>
</head>
<body>
</body>
</html>I detta exempel ges sidan titeln "En demonstration av HTML-kod". Dokumentets kropp (body) innehåller lite text och en kommentar. Observera att trots att texten till kroppen har skrivits på tre rader i HTML-koden så visas eventuellt inte texten med radbrytningar på samma ställe!
Observera att taggarna <!DOCTYPE html>
och <meta> har utelämnats här och i alla
efterföljande exempel för att minska kodens komplexitet.
<html>
<head>
<title>En demonstration av HTML-kod</title>
</head>
<body>
<p>Denna hemsida demonstrerar de grundläggande
elementen i HTML. Texten i kroppen syns i
webbläsarens fönster.</p>
<!-- Kommentar som inte syns -->
</body>
</html>Attribut används för att ange egenskaper för ett element,
t.ex. ändra elementets utseende, position, m.m., och brukar ha ett
värde, men några saknar värde (d.v.s. att attributet finns "är
värdet", t.ex. checked som anger att kryssruta ska vara
ibockad). Värdet för ett attribut anges på något
av sätten nedan.
checked="checked")checked)(Det rekommenderas att man tar för vana att använda det andra sättet för attribut utan värden över det sista så att man lättare kan konvertera till kod som bygger på XML-standard, så som den nu utdaterade XHTML-standarden.)
attributnamn="värde"
attributnamn="attributnamn"
attributnamnchecked="checked"
checked
disabled="disabled"
disabledAttribut som ska ges ett värde följs av ett lika med-tecken (=) och en sträng innesluten med antingen dubbla eller enkla citattecken (" resp. ') - bägge s.k. raka citattecken (alltså inte typografiska citattecken). Lika med-tecken kan föregås och efterföljas av inga eller flera mellanslag och/eller radbrytningar (whitespaces):
Tal och andra datatyper ska också inneslutas inom citattecken när de används som ett värdet för ett attribut.
Det går att utelämna citattecken om värdet inte innehåller något mellanslag (s.k. whitespace), men det rekommenderas att man tar för vana att alltid använda dem (så att kod lättare kan konverteras i framtiden och undvika prolem med eventuella JavaScript-ramverk).
attributnamn="värde"
attributnamn='värde'
attributnamn
=
"värde"rows="5"attributnamn=42
attributnamn=attributnamncolor och bgcolor)Tidigare användes attribut så som color och
bgcolor för att ändra för- och bakgrundsfärger
(i vissa element), vilket ersatts med stilmallar (CSS).
data-...)Det går att använda s.k. "dataattribut" för att associera
data med taggar, vilket ofta används av JavaScript-ramverk (så som Angular
och React), och dessa attribut ska börja med data-.
Använd inte svenska eller reserverade tecken i namn på dataattribut!
data-mitt-varde="en text"
data-ytterligare-varde="en annan text"
data-svaret-pa-allt="42"I HTML 5 introduceras ett antal strukturella taggar, d.v.s. taggar som inte påverkar webbsidans utseende (annat än kanske radbrytningar före och efter).
<header><footer><nav><section><article><aside><hgroup>Sidhuvud - <header> (inte att förväxla med taggen
<head>) - används för att märka ut t.ex. rubrik, ingress
och annan information för efterföljande innehåll och kan användas för en hel webbsida (d.v.s. i taggen
<body>) eller i t.ex. <section>
eller <article>.
Liknande gäller för <footer>, men dess innehåll används
ofta för att beskriva data om relaterat innehåll (d.v.s. det "ovanför").
Taggen <hgroup> är tänkt att användas för att gruppera
en rubrik med relaterat innehåll, t.ex. rubrik och en ingress.
Som exempel så används ett sidhuvud (<header>) för
denna webbsidas rubrik och navigeringsrad (vilka har färgats med färger
i skånska flaggan ;-)), men här skulle lika gärna taggen <hgroup>
använts.
<body>
<header>
<h1>En rubrik</h1>
<p>En ingress</p>
</header>
...
<footer>
<b>Uppdaterad:</b> 2024-12-28.
</footer>
</body>Taggen <nav> används för att märka upp länkar till
platser i dokument (d.v.s. en innehållsförteckning) och/eller till andra
webbsidor.
Navigeringstaggar används med fördel med s.k. ARIA-attribut för att definiera vad taggar innehåller, vilket gör det lättare för verktyg för t.ex. personer med nedsatt syn eller rörelseförmåga att tolka innehåll i webbsida.
<nav>
<ul>
<li><a href="#">En sida</a></li>
<li><a href="#">Annan sida</a></li>
<li><a href="#">Ytterligare sida</a></li>
</ul>
</nav>Taggen <section> används för att gruppera och dela
in innehåll i webbsidor, d.v.s. strukturera upp innehåll.
Taggen <article> däremot används för att markera
innehåll som kan användas i andra sammanhang än aktuell webbsida, t.ex.
ett blogginlägg eller en nyhetsartikel.
För innehåll som är startkt relaterat till annat innehåll i webbsida
kan taggen <aside> användas.
I något förenklat exempel till höger (eller nedan) grupperas (<section>)
en artikel (<article>) och referenser (<aside>),
vilket skulle kunna tolkas som att artikel kan användas annanstädes,
men att använda referenser utan artikel lär inte ge någon mening.
<section>
<article>
<h1>En artikel</h1>
<p>Innehåll i artikel</p>
</article>
<aside>
<h2>Referenser</h2>
<ul>...</ul>
</aside>
</section>Rubriker och stycken används, som i vilken ordbehandlare som helst, för att dela upp texten i mindre delar och därmed göra den mer lätt läst.
I HTML finns 6 fördefinierade nivåer för rubriker och
som alla oftast visas med fet stil och större storlek.
Rubrikerna för de olika nivåerna markeras med taggarna <h1>
till <h6> (eng. heading). Som exempel 1.4
visar så är oftast nivåerna 5 och 6 för rubriker mindre en vanlig text. Genom
att använda de fördefinierade rubrikerna kan man ganska enkelt ändra
utseendet på dem (i alla hemsidor på t.ex. en hel webbplats) m.h.a.
CSS.
Stycken i HTML (eller snarare i webbläsare) skiljer sig något från stycken i ordbehandlare då de oftast visas med en rads mellanrum mellan styckena. Stycken markeras med taggen <p> (eng. paragraph) och avslutande tagg bör alltid användas för att t.ex. CSS ska fungera).
<body>
<h1>Rubrik nivå 1</h1>
<h2>Rubrik nivå 2</h2>
<h3>Rubrik nivå 3</h3>
<h4>Rubrik nivå 4</h4>
<h5>Rubrik nivå 5</h5>
<h6>Rubrik nivå 6</h6>
<p>Ett stycke vanlig text</p>
<p>Ett stycke till med vanlig text.</p>
</body>(Se exempel 1.4 för resultat.)
Med risk för att låta lite klichéartat så vill även jag påstå att bilder säger mer än tusen ord. :-) Bilder gör även hemsidor roligare att titta på. Men viktigt att komma ihåg är att bilder tar tid att ladda ner - ganska lång tid om man har en dålig uppkoppling till Internet. Därför bör man begränsa antal och storlek på bilder i en hemsida för att minska nerladdningstiden för en hemsida (d.v.s. tiden det tar för webbläsaren att visa hela hemsidan).
Bilder kan vara något av formaten GIF (.gif), JPEG (.jpg) eller PNG (.png).
GIF-bilder används ofta för ikoner eller ritade bilder då detta format endast tillåter 256 färger.
För fotografier lämpar sig JPEG-bilder bättre då antalet färger kan vara mer än 256.
Den tredje bildtypen - PNG (uttals oftast "ping") - har utvecklats för Internet och är bl.a. tänkt som en ersättare till GIF-bilder (vilket är ett licensskyddat format).
<img>För att infoga (länka in) en bild i en hemsida så använder man
taggen <img> (eng. image) och anger sökvägen (URL:en) till
bildfilen i taggens attribut src (eng. source). Bildfilen är
m.a.o. inte en del av dokumentet (som i de flesta ordbehandlare) utan
måste finnas tillgänglig på webbservern (eller någon annan
webbserver). Attributet src är obligatoriskt.
Besökare på Internet kan vara ganska otåliga, d.v.s. ju längre tid det tar att ladda ner och visa en hemsida ju större chans är det att besökaren bestämmer sig för att gå till en annan hemsida. Ett sätt att snabba upp visningen av en hemsida med bilder är att alltid ange höjden och bredden på en bild. Genom att förse webbläsare med denna information kan webbläsaren snabbare avgöra en hemsidas uppbyggnad och därmed snabbare börja visa hemsidan för besökaren. Man bör m.a.o. alltid ange bredd och höjd på alla bilder.
<img src="bild.jpg"
alt="Text om bild inte visas" />För att ange bredd och höjd på en bild använder man attributen width
respektive height i taggen <img>. Värdet
för dessa attribut anges som bildpunkter (pixlar). I exemplet nedan har t.ex.
bilden bild.jpg bredden 283 pixlar och höjden 212 pixlar.
<img src="bild.jpg" width="283"
height="212" alt="Text om ..." />