Enstaka ord eller hela avsnitt kan enkelt markeras som kursivt och fetstils. Först till det fetstilsmarkera alternativet. För detta finns principiellt två HTML-element tillgängliga, b och strong.
Välkommen till PSD-Tutorials.de!
Välkommen till PSD-Tutorials.de!
En titt på resultatet i webbläsaren ger följande bild:
Uppenbarligen ger båda elementen samma visuella resultat. Men varför finns det då två olika element? Faktum är att det finns andra sätt att representera webbsidor än vad standardwebbläsare gör. Tänk till exempel på läsare för blinda personer eller mobila enheter. HTML-elementen som erbjuds av W3C syftar till att stödja semantiken. Så betyder nu b-elementet faktiskt inte längre att något ska visas fettstilt. Istället betyder b en synligt framhävd text som inte har ökad viktighet. Det kan till exempel handla om produktnamn eller nyckelord i dokument.
strong-elementet har hittills använts för en starkare betoning. em har däremot använts för betonad, viktig text (emet). strong har tidigare varit överlägsen mot em i äldre HTML-versioner. Båda elementen har fått en annan betydelse i HTML5.
Först en text med normal betoning.
<p> Katter är söta djur. </p>
Nu samma text igen, men denna gång med betoning på det första ordet.
<p> <em>Katter</em> är söta djur. </p>
Genom att använda em betonas ordet Katter. Det kan tänkas användas i en diskussion om hundar eller katter är sötare.
Nu kan man också applicera em-elementet på ordet är i exemplet.
<p> Katter <em>är </em> söta djur. </p>
Detta skulle kunna vara ett svar i en diskussion där någon hävdar att katter inte är söta alls.
Faktum är att textstycken som märks med em visas kursivt i webbläsaren. Samma visuella effekt uppnås med i-elementet.
Enligt HTML5-draft står i-elementet inte längre för kursivt.
<p> Välkommen till <i>PSD-Tutorials.de</i> </p>
Istället betyder detta element från och med nu att man vill förmedla en annan stämning. i-elementet är till exempel intressant för att markera tekniska termer eller taxonomiska benämningar.
Allt detta är mycket teoretiskt, jag vet det. Generellt sett bör man försöka hålla sig till HTML5-riktlinjerna. Å andra sidan kommer ingen att klandra dig om du använder strong istället för b.
<p> <em>Rad med em</em><br /> <i>Rad med i</i><br /> <strong>Rad med strong</strong><br /> <b>Rad med b</b> </p>
I slutändan är det webbläsartillverkarna som måste agera här.
Det är i slutändan CSS som ansvarar för den faktiska utformningen av texterna som är märkta med de nämnda elementen.
Akronymer med abbr
För att markera ett akronym använder man samma element som tidigare användes för förkortningar, nämligen abbr.
Das Deutsch-Österreichische Büro des <abbr title="World Wide Web Consortium">W3C</abbr> hat seit April 2009 seinen Sitz an der Fachhochschule Potsdam.
Webbläsare som korrekt tolkar abbr-elementet visar den inneslutna texten understruken.
Det rekommenderas att tilldela abbr ett title-attribut. Där skrivs vanligtvis den fullständiga uttrycket för akronymet. När besökaren sveper över akronymet med muspekaren visas uttrycket i en verktygstipsruta.
Adressuppgifter med address
Med address-elementet kan man markera adressinformation.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Webbläsare visar vanligtvis innehållet i address-elementet kursivt.
Markera kod med code
Elementet code används för att markera programkod. I denna mening har ingenting förändrats jämfört med tidigare HTML-versioner. code används fortfarande för det syftet.
<pre>
Detta är en HTML-huvudsektion:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Vanligtvis kombinerar man kod med pre-elementet för att behålla indragningarna som används i programkoden.
HTML5-specifikationen rekommenderar användning av class-attributet i samband med code-elementet. Detta attribut kan tilldelas språket som används inuti code-elementet. Här är några typiska exempel på hur sådana markeringar kan se ut:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Om och hur webbläsarna implementerar dessa anvisningar är inte fastställt av W3C.
<pre>
Detta är en HTML-huvudsektion:
<code class="language-html">
<html>
<head>
<title&></title>
</head>
</code>
</pre>
För närvarande har class-attributet i alla fall ingen synlig effekt i webbläsaren. Men mänskliga användare kan på detta sätt se vilket språk programkoden är baserad på när de tittar på sidans källkod.
Små bokstäver med small
Elementet small var ursprungligen avsett att visa text i mindre storlek än normalt. I HTML5 är small specifikt avsett för småtryck. Detta kön vara exempelvis:
• Upphovsrättsinformation
• Ansvarsfriskrivningar
• Licensbestämmelser
• Allmänna villkor
W3C påpekar tydligt att small inte ska användas för långa textpassager.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Understrykning av text
Ni kan markera ord med u-elementet för att visa dem understrukna. Här är ett exempel:
<p>Välkommen till <u>PSD-Tutorials.de</u></p>
Resultatet visas i webbläsaren på följande sätt:
När man tittar på resultatet är det verkligen den önskade effekten. Men det finns en hake. På internet representerar understrukna texter vanligtvis hyperlänkar. Om ni nu skriver en text eller ett ord understruket, kan besökare möjligen tro att det är en hyperlänk. Försöket att klicka på den kommer naturligtvis att misslyckas. Därför bör ni undvika att använda understrykning.
