Det finns väldigt många taggar för att formatera text i HTML. De flesta har väldigt specifika användningsområden och jag kommer gå igenom några.

<abbr> är en tag för förkortningar. Abbr är själv en förkortning på engelskan abbreviate som då betyder förkortning. Denna tag används på följande sätt: <abbr title="abbreviate">abbr</abbr>.
Resultatet blir då abbr (håll muspekaren över "abbr").

<acronym> gör rent tekniskt exakt samma sak som <abbr> . P.g.a. detta så har acronym slutat användas i HTML5 och man bör använda abbr istället. Det går att använda acronym utan några större problem och det är väldigt vanligt att man ser det på redan skrivna sidor. Man bör dock använda abbr eftersom om det kommer ändringar som ändrar dess beteende så gäller det inte för acronym. Acronym kommer också att flaggas av validators.

<address> är en tag för precis vad det låter som; en adress. I många webläsare ändras fonten texten till italic inom adress. Det finns inga specifika krav på hur en adress skrivs (eller ens vad som finns där). Den används som en enkel tag precis som tidigare: <address> Gata: Hittapåvägen 5 <br>Postort: Fantasi, 66554</address>
blir:

Gata: Hittapåvägen 5
Postort: Fantasi, 66554

Ni märkte kanske att <br> taggen användes i det tidigare exemplet. Det är en tag som gör ett radavbrott. Ren text i HTML skrivs på en rad i den mån möjligt och bryts när den inte får plats längre. Med br (som är en förkortning för break, alltså line break) kan man dock ange att man vill ha ett radavbrott själv. Det finns vissa skillnader för hur den används jämfört med tidigare taggar. Till att börja med så har den ingen start och inget slut. Det är helt onödigt eftersom det gör ett enkelt radavbrott och att därför kräva ett avslut på den är dumt. Den används väldigt enkelt: Te<br>xt blir: Te
xt

<q> används för citat. Taggen heter q för engelskan quote som betyder citat. Förutom <q> så finns <blockquote> och <cite> för citat. De används som de enklaste taggarna genom att helt enkelt omge vald text med öppning och stänging av taggen. Tanken är att man ska ha olika taggar beroende på längden eller syftet med ens citat. <q> är till för kortare citat, <blockquote> är till för långa citat och <cite> är till för referenser. Webläsare brukar också visa dem olika. <q> brukar visas med citattecken, <blockquote> brukar indenteras och <cite> brukar visas kursivt. Ex:

q

blockquote

cite

Notera att blockquote används helt felaktigt i exemplet eftersom det ju är till för längre innehåll. I XHTML var det ett krav att blockquote skulle innehålla minst en tag för text. Denna regel är bra att ha i åtankte när man ska välja vilken tag man bör använda. Det är vanligt att se sidor helt utan <cite> där man istället använder <q>.

Det finns flera taggar som är till för att definiera vad det är för typ av text inom dem. De har väldigt specifika användningsområden och webläsare visar dom ofta med en annan stil än den vanliga texten. Innan jag går igenom några av dessa ska jag nämna att man kan ange attribut till taggar. Det har visats vissa exempel på dessa men t.ex. title atributet går att lägga till många. Vad man får då är precis som vid <abbr> taggen att det som står efter title syns om man muspekaren över texten i denna tag. Just attributet title är vanligt att använda vid flera av de kommande taggarna.

<code> är till för programmeringskod och webläsare ändrar ofta vilken font texten syns i (om man inte angett vilken font som ska användas för code taggen via CSS). Det är vanligt att man anger vilket programmeringsspråk texten är skriven i genom title attributet. Ex: public int count = 0; .

<dfn> är till för definitioner. Det ord som definieras är den text som då ska ligga inom taggarna. Det ska noteras att om texten som ska definieras är en förkortning så ska <abbr> taggen användas för att ange den fullsätndiga texten. Om vi tar termen HTML som exempel: <dnf><abbr title="HyperText Markup Language">HTML</abbr></dfn> blir: HTML.

<em> används för att ange att en text har en annan betoning. Taggen tar sitt namn från engelskans emphasis. Innan XHTML kom användes taggen <i> för samma sak (och används så fortfarande). En annan tag som har samma problem är <strong>. Innan XHTML (och efter!) så användes taggen <b> för precis samma sak. Saken är den att alla dessa tags ändrar utseendet på texten; <em> och <i> gör texten kursiv medans <strong> och <b> gör texten fetstilt. Det kan verka förvirrande med taggar som gör ungefär samma sak men det finns vissa tumregler när man ska använda dessa. <em> ska användas när ett ord har en annan betoning än den övriga texten. Ofta en starkare betoning än den övriga texten. Ex: När jag säger 100% så menar jag 100%. Grannen <i> används för text som inte skiljer sig i betoningen men används för text som skiljer sig från den övriga texten på nåt sätt, t.ex. ett annat språk eller en teknisk term. Det man kan se som kursivt i en bok hamnar ofta inom <i>. Ex: Det var som att han gjorde en touchdown. <strong> används för text som har en viktigt innebörd och som snabbt ska stå ut från övrig text, t.ex. varningar eller notiser. Ex: Varning toaletten på våning 3 är trasig. <b> används för sånt som traditionellt är fetstilt men inte har extra viktig innebörd t.ex. namn eller nyckelord i en text. Ex: När jag gick genom dörren så började mitt svärd vibrera och ljuset slocknade.

<kbd> är en tag som används för att ange tangentbords input. Taggen tar sitt namn från engelskans keyboard och med det menas då keyboard input. Används för att ange vad läsaren ska ange för input. Webläsaren ändrar oftast fonten till en mer enhetlig font. Ex: Skriv c:\windows för att ställa dig i rätt katalog.

<samp> används för output från ett datorprogram. Är på vissa sätt motsvarigheten till <kbd>. Ex: Type delete *.class and you will be promted Are you sure? Y/N.

<var> används för text som är en variabel, t.ex. en variabel i matematik eller programmering. Ex: Och via a1 kan du då komma åt elementet på arrayens plats 1.

<span> används för att dela in en del av en text i ett eget logiskt element. Det blir ingen visuell skillnad men man kan genom span ange attribut som sedan låter CSS göra visuella förändringar. Kan användas till en mängd olika saker och det är egentligen bara fantasin som begränsar.

<pre> är till för text med annorlunda format. Taggens namn kommer från preformatted alltså redan formaterad text. Text inom denna tag byter font (oftast till Courier) och har kvar all formatering. Används väldigt ofta när man ska visa programmeringskod (som ju har speciell indentering). Utan denna tag blir det nästintill oläsligt. Ex: se tidigare (Här) när jag ger exempel på hur en start på en sida skulle kunna se ut. Utan <pre> tag skulle indenteringen försvinna.

<h1> - <h6> är till för rubkriker. Namnet kommer delvis av engelskans heading och siffran står för vilken vikt den har. 1 har störst vikt och 6 minst. Webläsare ändrar ofta storleken på fonten och gör de viktigare (lägre siffror) större. Dessa används ofta lite slött på många sidor men det är väldigt bra att verkligen se till att använda dem som de ska användas. Det hjälper delvis för sökverktyg men också för läsare för folk med handikapp, t.ex. blinda. Ex:

Detta är skrivet i <h1>

medans detta är skrivet i <h6>

<p> är till för paragrafer. Det blir lite avstånd innan och efter text som hamnar inom dessa taggar. Används precis som en paragraf och i allämnhet anges fri text inom <p> taggen om den inte ligger inom en annan mer specifik tag. Ex:<p>Första paragrafen</p><p>Andra paragrafen</p> blir:

Första paragrafen

Andra paragrafen

Länkar i ett HTML dokument anges med taggen <a>. För denna tag är attributet href väldigt viktigt för det anger destinationen på länken. Denna destination kan vara absolut eller relativ. Med en absolut länk menas att man anger hela länken. Med relativ menas att man länkar relativt till det dokument som länken ligger i. Ex: Tänk en hemsida med adressen www.hesmsida.se där index.html ligger i rotkatalogen medans det finns en katalog som heter sport som har en fil som heter speedway.html. Den absoluta länken till speedway.html skulle vara www.hemsida.se/sport/speedway.html medans den relativa, från index.html, skulle vara /sport/speedway.html. Så om man skulle länka till en annan hemsida skulle man kanske kunna skriva: <a href="http:\\www.zombo.com" target="_blank">Zombo</a>. Resultatet blir då Zombo. Notera att texten för länken ofta får lite annat format beroende på webläsare (detta kan ändras via CSS) och att det är texten mellan taggarna som är det som syns. Det märktes också kanske att jag lade till target attributet. Denna är till för hur webläsaren skall bete sig när länken är klickad. _blank gör så att länken öppnas i ett nytt fönster (ofta inställt som en ny "tab" i många webläsare). _self öppnar länken i samma fönster. _parent öppnar länken inom parent frame. Används bara när man använder frames. _top är som _self men den ignorerar alla möjliga frames. Man kan också länka till en punkt i ett HTML dokument. Först måste man skapa denna punkten och det görs på följande sätt: <a name="link_target"></a>. Sen skapar man länken: <a href="#link_target">Kod exempel</a>. Denna länk är till kodexemplet för starten på en sida: Kod exempel. Notera att man börjar destinationen med # sedan följt med vad man döpte punkten till.

Länkar behöver inte vara ren text utan man kan ha en bild som länk också och en sådan länk görs på ett väldigt snarlikt sätt. Dock så måste man då kunna lägga in bilder i ett HTML dokument och det gör man via <img> taggen. Denna tagg kräver att man har med ett par attribut. Dessa attribut är src och alt. Src är fårn engelskans source och är en URL till den bild man vill använda. Alt är det som visas om inte bilden kan laddas. Man kan också ange hur stor bilden skall vara via width och height attributen. Man bör dock tänka på att om man inte behåller rätt förjållande mellan höjd och bredd kan bilden se konstig ut. Nu när man kan lägga in en bild så är det helt enkelt så att man ersätter texten inom <a< taggen med koden för en bild. Ex: <a href="http:\\www.google.com" target="_blank"><img src="images/google.jpg" alt="Google" width="300" height="120"></a>. Detta blir då:

Som synes är har jag angett både höjd och bredd för bilden med inte helt perfekt förhållande till varandra (orginalet var 800 pixlar bred och 319 hög, som var för stort).

För att länka till andra protokoll så ändrar man bara på protokollet innan själva adressen. Så om man vill länka till en ftp blir det:<a href="ftp:\\...">FTP</a>. Man kan också ange användarnamn, lösenord och port genom att modifiera länken lite, ex:<a href="ftp:\\användare:lösenord@ftp.hemma.se:22>FTP</a>. Användarnamn och lösenord anges då direkt efter vilket protokoll som angetts och separeras med ett kolon, :. Användaruppgifter och adressen separeras med ett @ tecken. URL och port separeras med ett ytterligare kolon. Man bör i allämnhet inte ange användarnamn och lösenord eftersom ett HTML dokument kan läsas av alla som har tillgång till det och dessa personer kan då få fram lösenord. Om man inte anger dem blir användaren frågad efter dessa uppgifter.

Det går också att göra länkar direkt till en e-mailadress. Detta görs som följande: <a href="mailto:support@nisses.se">Nisses Support</a>. När man då klickar på denna länk så öppnas ens standard mailklient med adressen redan inskriven. Resultatet blir då: Nisses Support

Det går också att ha flera länkar i en bild. Man kan ange vilka delar i en bild som skall länka till vad med <map> taggen. Då krävs dock att man lägger till ett attribut till ens bild och det attributet är usemap. Så om vi använder bilden på Googles logotyp igen så skulle koden för bilden se ut på följande sätt:<img src="images/google.jpg" alt="Google" width="300" height="120" usemap"#googlemap">. Efter detta måste man då göra själva kartan för indelningen av bilden. Detta görs då med <map> som kräver att man har name attributet. I vårt fall skulle den då bli <map name="googlemap">. Detta är då den överliggande kartan men för själva indelningen avänder man sig av <area> taggen. Denna tag har flera attribut som är indelade i attribut för själva länken samt positionen och formen för indelningen. alt, href och target är precis som för vanliga länkar. Det finns också nohref för att ange att indelningen inte skall länka alls. Detta används oftast i samband med Javascript. De attribut som gäller skepnad och platsen för indelningen är coords och shape. Formen av indelningen ligger i shape attributet och kan ha fyra olika värden; default, rect, circle och poly. Default anger att hela bilden används som form, rect är en rektangel, circle är självklart en cirkel och poly är den mer avancerade formen polygon. Coords anger positionen, och genom denna också storleken, på indelningen. För rect så gäller; vänster, upp, höger, ner. Så 0,0,50,50 anger att det är en rektangel där övre vänstra hörnet är i övre vänstra hörnet av själva bilden och nedre högra hörnet är 50 pixlar in i bredd och 50 pixlar i höjd (höjden är räknat negativt så högre siffra är längre ner). Circle anges med tre olika värden där de två första är x- samt y-positionen för mittpunkten i cirkeln. Den tredje är radien för cirkeln. Så 50,50,50 är en cirkel vars mittpunkt lligger 50 pixlar in i både höjd och bredd och som har radien 50. Poly är till för mer avancerade former och kan ha ett variabelt antal punket. Dessa punkter kommer i par, en för x- och en för y-position. Så 0,0,50,0,50,50,0,50,0,0 skulle vara samma rektangel som i exemplet för rect. Så om Google logotypen skulle delas in i två delar skulle vi kunna skriva denna kod;

			
			<img src="images/google.jpg" alt="Google" width="300" height="120" usemap="#googlemap">
			<map name="googlemap">
				<area shape="rect" coords="0,0,200,120" href="http://en.wikipedia.org/wiki/Goo" alt="Goo">
				<area shape="rect" coords="200, 0, 300, 120" href="http://en.wikipedia.org/wiki/GLE" alt="gle">
			</map>
			
			

Detta ger då resultatet:

Notera att man hamnar på olika adresser om man klickar på "Goo" eller "gle" i logotypen.

Det finns också några taggar för att bygga listor i HTML. <ol> och <ul> står för ordered list samt unordered list och är precis vad dom heter. För att bygga en lista anger man vilken typ av lista som skall användas och sedan lägger man varje punk i listan inom <li> taggen, som står för list item. För en oordnad lista blir då koden:

				
					<ul>
						<li>Punkt 1</li>
						<li>Punkt 2</li>
						<li>Punkt 3</li>
					</ul>
				
			

Resultatet av detta blir:

• Punkt 1
• Punkt 2
• Punkt 3

Som synes så markeras varje punkt i listan och har ett jämnt avstånd mellan varandra. För ordnade listor så markeras punkterna med en ordning, vanligast med enkla siffror. Ex:

1. Punkt 1
2. Punkt 2
3. Punkt 3

Man kan däremot ange olika typer av markering genom attributet type. Dessa typer är: 1 för vanliga siffror, A för stora bokstäver (enligt engelska alfabetet), a för små bokstäver, I för romerska siffror skrivet med stora bokstäver och i för romerska siffror med små bokstäver. Om man använder bokstäver som typ och går över 26, som är antalet bokstäver i engelska alfabetet, så skrivs nästa punkt ut med AA (eller aa om man använder små bokstäver) och fortsätter med AB. Om man går ännu ett varv så byts första ut mot B och så fortsätter det. Går man tillräckligt långt så läggs ytterligare en bokstav till så det blir AAA. Romerska siffror kan bara användas upp till 4999 sedan ersätts dom med vanliga siffror. Man kan också ange på vilken siffra listan skall starta genom attributet start. Detta anges då med en siffra och i fallet med bokstäver så är denna siffra den ordning som bokstaven kommer i alfabetet (så 1 är A och 26 är Z). Det går också att skriva ut listan baklänges med attributet reversed, som skrivs ut reversed="reversed". Så om den tidigare listan skrivs om med romerska siffror med start på nummer 10 och som går baklänges så skulle <ol> taggen se ut på detta sätt: <ol type="I" start="10" reversed="reversed">. Och resultatet blir då:

10. Punkt 1
11. Punkt 2
12. Punkt 3

Förutom <ol> och <ul> finns <dl> som står för definition list som är ungefär vad det låter som, en lista där man kan ange definitioner för varje punkt. Rent tekniskt så fungerar den på så sätt att varje punkt i listan anges med <dt> och varje definition anges med <dd>. Man kan använda flera stycken <dd> taggar inom varje <dt> och på så sätt bygga "listor inom en lista". Ex:

				
					<dl>
						<dt>Banan</dt>
							<dd>Frukt</dd>
							<dd>Exotisk</dd>
						<dt>Gurka</dt>
							<dd>Grönsak</dd>
							<dd>Lokal</dd>
					</dl>
				
			

Blir:

Banan

Frukt

Exotisk

Gurka

Grönsak

Lokal

För att göra tabeller så finns taggen <table> att använda. Som nämnt tidigare så användes tabeles ibland tidigare för att sköta layouten på en sida men det är inte vad den är tänkt för och de nuvarande taggarna är bättre att använda. En tabell byggs upp med flera olika taggar men de grundläggande (förutom då <table>) är <tr> för att ange rader och <td> är för varje cell. Det finns också ett attribut för att ange om tabellen skall ha en ram eller inte och detta attribut heter border. Denna skrivs: border="1". De värden den kan ha är "1" eller "" där den sista då betyder ingen visuell ram. Ex:

				
					<table border="1">
						<tr>
							<td>Namn</td>
							<td>Ålder</td>
						</tr>
						<tr>
							<td>David</td>
							<td>28</td>
						</tr>
					</table>
				
			

Skulle se ut så här:

Namn	Ålder
David	28

Nu finns det många flera taggar för att förenkla användningen av tabeller. Det finns t.ex. <thead>, <tbody> och <tfoot> som fungerar som taggarna <header>, <body> och <footer> fast bara inom själva tabellen. Det betyder då att alla rader inom <tfoot> hamnar överst i tabellen, <tbody> i mitten och <tfoot> nederst. Det finns också <th> som gör att texten blir centrerad och fetstil och är då till för de celler som har titlar för kolumner. Det finns också <colgroup> och <col> som är till för att underlätta stilsättningen på tabellen. Innan dessa fanns så var man tvungen att återupprepa koden för stil för varje cell men med dessa så kan man sätta still för hela kolumner. En <colgroup> måste skrivas innan andra indelningar såsom <thead>. <col> anger då kolumner inom denna <colgroup> och kan ha attributet span som anger hur många kolumner som den ska sträcka sig. Om man då har två stycken <col> taggar efter varandra och den första har span="2" så gäller den de två första kolumnerna (från vänster) och den andra gäller den tredje kolumnen. Det finns också <caption> som är titeln för hela tabellen. Denna måste anges direkt efter <table> taggen och blir då en text som är centrerad över tabellen. Så om man skulle skriva en större och lite korrektare tabell så kan den se ut så här:

				
					<table border="1">
						<caption>Kurser</caption>
						<colgroup>
							<col span="2" id="course_column">
						</colgroup>
						<thead>
							<tr>
								<th>Namn</th>
								<th>Poäng</th>
							</tr>
						</thead>
						<tfoot>
							<tr>
								<td>Summa</td>
								<td>15p</td>
							</tr>
						</tfoot>
						<tbody>
							<tr>
								<td>Webutveckling - Klientsidan</td>
								<td>7.5p</td>
							</tr>
							<tr>
								<td>Webutveckling - Serversidan</td>
								<td>7.5p</td>
							</tr>
						</tbody>
					</table>
				
			

Kurser

Namn	Poäng
Summa	15p
Webutveckling - Klientsidan	7.5p
Webutveckling - Serversidan	7.5p

Notera att <colgroup> och <col> faktiskt inte gör någonting men kan stilsättas via CSS enkelt. För att förbereda detta har <col> fått ett globalt attribut som heter id och som är till för att identifiera en viss tagg. Man kan också använda class som då är till för ungefär samma sak men är tänkt till att användas på flera taggar som skall ha samma stilsättning.s