Text på webben

Något av det enskilt mest förekommande på webben är text. Bara på den här sidan är det hur mycket text som helst i förhållande till allt annat. Därför är det inte konstigt att HTML-kod innehåller kommandon för hur text ska behandlas. Mycket av det som en gång i tiden gjordes i HTML har dock flyttats över till CSS-kod. Men mycket finns kvar och det är nyttigt att känna till det som man helst nu ska undvika.

Rubriker

Det finns sex nivåer av rubriker, <h1> till <h6>. <h1> markerar huvudrubriken och bör således bara användas en gång. En <h3>-rubrik bör inte heller användas om det inte också finns en <h2>-rubrik. Som du kan se nedanför så ser de olika rubrik-elementen olika ut. Man ska dock inte använda en viss rubrik på grund utav sitt utseende. Utseendet kan man ändra på. Man ska välja rubrik-nivå utefter vad som passar med texten man presenterar.

Detta är ett <h1>-element

Detta är ett <h2>-element

Detta är ett <h3>-element

Detta är ett <h4>-element

Detta är ett <h5>-element

Detta är ett <h6>-element

Textstycken

Textstycken, eller paragrafer (paragraphs på engelska), ska inte skrivas rakt in i koden utan att de innefattas av ett paragraf-element. Paragraf-, eller textelementet, öppnas med en <p>-tagg.

Estetik

När det kommer till estetik på en HTML-sida så bör så mycket som möjligt överlämnas åt CSS. Men det är några saker som passar sig bättre att göra direkt i HTML, och några saker som man behöver känna till inte ska göras i HTML.

<b>-fetstilt

Ett stycke text inkappslat mellan <b>och </b> blir fetstilt. Detta är ett gammalt kommando från HTML:s skapande och bör numera undvikas så gott det går.

I HTML5, den nuvarande standarden, så har <b> fått en ny betydelse. <b>-elementet ska användas för att dra uppmärksamhet till ett stycke text utan att lägga någon extra eller annorlunda betoning på ordet. Exempelvis en ingress eller nyckelord i ett abstract. Du kan läsa mer om detta här och här.

<i>-kursivt

Ett stycke text inkappslat mellan <i>och </i> blir kursivt. Detta är precis som <b> ett gammalt kommando som har bytt betydelse. Förr var elementets syfte att göra texten just kursiv, en uppgift som nu ska skötas av CSS. I HTML5 så ska <i> användas för att markera att ett stycke text ska läsas med en annorlunda betoning. Det kan vara att man använder en teknisk-term eller en direktöversättning (det regnar katter och hundar). Precis som för <b>-elementet finns det mer att läsa här och här.

<sup>-upphöjning

När du läser "upphöjt" så tänker du kanske på matematik och något i stil med 3²=9. Men det kan också användas för att markera tid: 10¹⁵. Eller placering i engelsk text: 1^st. Alternativt i franska förkortningar: M^lle.

<sub>-nedsänkning

Nedsänkt text associeras nog mest med kemiska formler, H₂O (vatten) eller H₂SO₄ (svavelsyra).

<sub> och <sup> ska som så många andra element inte användas för att göra texten "vackrare" utan bara när det är för att göra texten begripligare. Som till exempel när man skriver kemiska formler.

<br/>-ny rad

Elementet <br/> är ett tomt element. Vilket inte är särskilt förvånande eftersom det skapar en ny rad. I vanlig text är det ganska ovanligt att man använder det. Enligt HTML-specifikationen ska det användas så här: br-element får enbart användas för radbrytningar som faktiskt är en del av innehållet, såsom i dikter och adresser. Det ska alltså inte användas för att dela in en text i stycken.

<hr/>-linje

<hr/> är precis som <br/> ett tomt element. Resultatet av <hr/> är en linje som går över sidan:

Den här linjen ska helst inte användas runt rubriker eller annat som tydligt markerar att "här börjar något nytt". Istället ska den användas mellan stycken för att visa på att det sker en förändring i innehåll.

Övningar 1

På Vklass finns en text som heter Cinderella. Ladda ner den.

1. Skapa en HTML-fil och se till att namnet uppe på fliken är Cinderella.
2. Lägg in dikten i din body och ha varje stycke mellan varsina <p> och </p>-taggar.
3. Gör diktens titel till sidans rubrik
4. Gör författarens namn fetstilt.
5. Lägg till radbrytningar mellan varje rad i dikten.
6. Lägg till en horizontell linje mellan varje stycke i dikten (detta är dock inte god sed).
7. Gör varje dialog i dikten kursiv.
8. Skapa en rubrik under dikten och döp den till Matematik
9. Lägg till underrubriken Polynomtåg
10. Skriv in följande polynom:
    • 5x²-2x+3
    • a₀x³+a₁x²+a₃x+a₄

Semantik

Eftersom HTML är gjord för att presentera information i digital form så har man gjort det möjligt att lägga till extra information i text. Det kan vara allt från länkar till förklaringar. De element som beskrivs här är inte menade för att ändra så mycket på utseendet av texten utan mer för att ge information om texten.

<strong>-viktigt

<strong>-elementet ska användas för att visa att något är särskilt viktigt. Till exempel: <strong> Varning: </strong>Starka strömmar. Som standard visas <strong>-element som fetstilta.

<em>-betoning

<em> ska användas för att markera att ett ord ska ha extra betoning. Detta kan göra en väldig skillnad på hur en mening uppfattas.

• Jag sa inte det.
• Jag sa inte det.
• Jag sa inte det.
• Jag sa inte det.

<blockquote>-citat-stycke

När man citerar ett större stycke text så är det brukligt att använda <blockquote> för att markera detta. Det brukar leda till att texten indenteras.

<q>-citat

När man bara citerar en kortare bit text så använder man sig utav <q> vilket gör att citatet visas i texten: For even the very wise cannot see all ends. En sak att lägga märke till är att webbläsaren här själv har lagt till citat-tecknen runt citatet.

<abbr>-förkortningar

<abbr>-elementet är användbart när man använder sig utav förkortningar i sin text. Då kan man använda det för att förklara en förkortning utan att ha en massa extra text på sidan.

CSN är en myndighet många har blandade åsikter om. För att man ska få upp vad förkortningen betyder så får man lägga till attributet title i sin öppningstagg: <abbr title="Gymnasiearbetet">GyA</abbr>

<cite>-citerat verk

När man hänvisar till ett verk så använder man sig av elementet <cite>. Som oftast gör titeln kursiv.

<cite>The Hobbit</cite> är en barnbok av J. R. R. Tolkien.

cite är dels ett element, men det kan också användas som ett attribut i tillexempel <blockquote> eller <q>.

<dfn>-definition

Det här elementet används när man för första gången använder ett uttryck eller förkortning. Det här kan vara rätt att använda i ett dokument där man introducerar nya termner. I Chrome så blir en <dfn> kursiv.

ESKO är bra att ha. Vanligtvis väljer varje klass någon till ESKO.

<address>-adress

Om man vill presentera författaren till en text med kontaktuppgifter kan man använda sig utav <address>. Som standard så blir varje rad kursiv.

<ins>-insert & <del>-delete

De här två elementen används för att visa att man har förändrat ett dokument. Om man har lagt till något i ett dokument brukar det markeras med ett understreck, men om man tagit bort så stryks det över.

Om man vill ha understrykningar och överstrykningar av estetiska skäl så ska man använda sig utav CSS istället.

<s>-struket

När något har förändats och inte längre är aktuellt så kan man använda sig utav <s> för att markera det. Till exempel:

Tidigare: 100 kr

Nu: 99⁹⁰kr

Övningar 2

En grupp elever har startat en butik på Hedda, men inte gått kursen webbutveckling. Hjälp dem att fixa till sin sida.

1. Rätta titeln i <head>
2. Eau de Toilette ska ju dofta gott, markere illa med <del> och stoppa in gott
3. Förfalskade intyg har slutat att säljas. Markera det.
4. Alla andra bästsäljare ska markeras tydligt med <strong>
5. Försvinnande bläck har ett nytt pris på 22 kr.
6. Snygga till adressen med en <address>
7. Omdömmena är citat, fixa till det.
8. Lärarens kommentar ska vara ett blockquote.
9. Tidningarnas omdömmen ska vara citat och tidningsnamnen ska vara inom <cite>
10. Personalens namn är förkortade. Lägg till <abbr> och fyll i deras fulla namn.