Enkelte ord eller hele passasjer kan enkelt kursiveres og gjøres fet. Først til varianten som gjør teksten fet. For dette formålet finnes det generelt to HTML-elementer tilgjengelig, b og strong.
Velkommen til <b>PSD-Tutorials.de</b>! <br /> Velkommen til <strong>PSD-Tutorials.de</strong>!
En titt på resultatet i nettleseren gir følgende bilde:
Tydeligvis gir begge elementene samme visning. Hvorfor finnes det da to forskjellige elementer? Faktisk finnes det andre visningsmåter for nettsider enn de kjente standardnettleserene. Tenk for eksempel på leserne for blinde eller også på mobile enheter. Med HTML-elementene som tilbys av W3C, er målet å støtte semantikken. Så betyr nå b-elementet ikke lenger at noe skal vises fet. I stedet betyr b tekst som er visuelt fremhevet, men som ikke har økt viktighet. Dette kan for eksempel være produktnavn eller nøkkelord i dokumenter.
strong-elementet har stått for sterkere vektlegging tidligere. em derimot har blitt brukt for viktig tekst (emfatisk). strong var tidligere en forsterkning av em i HTML-versjoner. Begge elementene tildeles en annen betydning i HTML5.
Først en tekst med normal vektlegging.
<p> Katter er søte dyr. </p>
Nå samme tekst igjen, men denne gang med vektlegging på det første ordet.
<p> <em>Katter</em> er søte dyr. </p>
Ved bruk av em blir fokuset satt på ordet Katter. Dette kan være aktuelt i en diskusjon hvor man diskuterer om hunder eller katter er søtest.
Nå kunne man i dette eksemplet også bruke em-elementet på ordet er.
<p> Katter <em>er</em> søte dyr. </p>
Dette kunne være et svar i en diskusjon hvor noen påstår at katter ikke er søte i det hele tatt.
Tekster som er markert med em vises kursiv i nettleseren. Den samme visuelle effekten oppnås med i-elementet.
Ifølge HTML5-draften betyr nå i-elementet ikke lenger kursiv.
<p> Hjertelig velkommen til <i>PSD-Tutorials.de</i> </p>
Denne elementet betyr nå snarere at man vil formidle en annen stemning. i-elementet er for eksempel interessant for å markere tekniske uttrykk eller taksonomiske betegnelser.
Dette er alt veldig teoretisk, jeg vet det. Prinsipielt bør man prøve å holde seg til HTML5-retningslinjene. På den annen side vil ingen rive hodet av deg hvis du bruker strong istedenfor b.
<p> <em>Linje med em</em><br /> <i>Linje med i</i><br /> <strong>Linje med strong</strong><br /> <b>Linje med b</b> </p>
Til syvende og sist må nettleserprodusentene handle her.
For den faktiske utformingen av tekstene som er utstyrt med de nevnte elementene, er det uansett CSS som er ansvarlig.
Akronymer med abbr
For å markere et akronym, brukes det samme elementet som tidligere har vært brukt for forkortelser, nemlig 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.
Nettlesere som tolker abbr-elementet riktig, viser teksten inni abbr-elementet understreket.
Det bør også tilordnes abbr et title-attributt. Der skal man vanligvis notere den fullstendige uttrykket for akronymet. Når besøkende svever over akronymet med musen, vil uttrykket vises i et verktøytipp-vindu.
Adresser med address
Med address-elementet kan du fremheve adressinformasjon.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Nettlesere viser vanligvis innholdet i address-elementet kursiv.
Utheving av programkode med code
Elementet code brukes til å fremheve programkode. I denne sammenheng har det ikke skjedd noe i forhold til tidligere HTML-versjoner. code brukes fortsatt til det formålet.
<pre>
Dette er en HTML-hode:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Vanligvis kombineres code med pre-elementet for å beholde innrykkene som brukes i programkoden. HTML5-spesifikasjonen anbefaler bruken av class-attributtet i forbindelse med code-elementet. Dette attributtet kan tilordnes språket som brukes innenfor code-elementet. Her er noen typiske eksempler på slik utheving:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Det er ikke fastsatt av W3C hvordan, eller om, nettlesere skal implementere disse instruksjonene.
<pre>
Dette er en HTML-hode:
<code class="language-html">
<html>
<head>
<title&> </title;>
</head>
</code>
</pre>
Foreløpig har ikke class-attributtet synlige effekter i nettleseren. Imidlertid kan menneskelige betraktere på denne måten se hvilket språk programkoden er basert på, hvis de ser på kildekoden til siden.
Små bokstaver med small
Elementet small var opprinnelig ment for å vise tekst mindre enn normalt. I HTML5 er small uttrykkelig for småtrykk. Dette småtrykket kan for eksempel være:
• Opphavsrett
• Ansvarsfraskrivelse
• Lisensvilkår
• Vilkår og betingelser
<small> Opphavsrett av PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Understrekning av tekster
Du kan fremheve ord ved å bruke u-elementet. Her er et eksempel:
<p>Velkommen til <u>PSD-Tutorials.de</u></p>
Resultatet vises i nettleseren på følgende måte:
Å se på resultatet, er faktisk den ønskede effekten. Imidlertid har dette en liten ulempe. På internett indikerer understrekede tekster vanligvis koblinger. Hvis du nå viser en tekst eller et ord med understrekning, vil besøkende kanskje tro det er en kobling. Forsøket på å klikke på det vil naturligvis mislykkes. Derfor bør du unngå understrekning.
