En af de tags, som du vil lære tidligt i din webdesign uddannelse er et par tags kendt som "fremhævelsestags". Lad os se på, hvad disse tags er, og hvordan de bruges i webdesign i dag.
Tilbage til XHTML
Hvis du lærte HTML for mange år siden, længe før stigningen i HTML5, har du sandsynligvis brugt både fed og kursiv tags. Som du kunne forvente, omdannede disse tags elementer til henholdsvis fed tekst eller kursiv tekst. Problemet med disse tags, og hvorfor de blev skubbet til side til fordel for nye elementer (som vi snart vil se på), er at de ikke er semantiske elementer. Dette skyldes, at de definerer, hvordan teksten skal se ud snarere end information om teksten. Husk, at HTML (det er her disse tags ville blive skrevet) handler om struktur, ikke visuel stil! Visuals håndteres af CSS og bedste praksis med webdesign har længe fastslået, at du skal have en klar adskillelse af stil og struktur på dine websider. Dette betyder ikke at bruge elementer, der er ikke-semantiske, og som detaljer ser ud snarere end struktur. Dette er grunden til, at den dristige og
kursiv tags er generelt erstattet af stærk (med fed skrift) og fremhævning (for kursiv).og
De stærke og fremhævende elementer tilføjer information til din tekst, der beskriver indhold, der skal behandles forskelligt og understreges, når dette indhold tales. Du bruger disse elementer stort set på samme måde, som du tidligere havde brugt fed og kursiv. Du skal blot omgive din tekst med åbnings- og lukemærkerne ( og til vægt og og for stærk vægt) og den vedlagte tekst vil blive fremhævet.
Du kan rede disse tags, og det betyder ikke noget, hvilket er det eksterne tag. Her er nogle eksempler.
Denne tekst fremhæves og de fleste browsere viser det som kursiv.
Denne tekst er stærkt fremhævet og de fleste browsere vil vise det som fed skrift.
I begge disse eksempler dikterer vi ikke visuelt udseende med HTML. Ja, standardudseendet for tag ville være kursiv og ville være fed, men disse udseende kunne let ændres i CSS. Dette er det bedste fra begge verdener. Du kan udnytte standardbrowserformaterne for at få kursiv eller fed tekst i dit dokument uden at krydse linjen og blande struktur og stil. Sig, du ville have det tekst for ikke kun at være fed, men også være rød, kan du tilføje dette til SCS.
stærk {
farve: rød;
}
I dette eksempel behøver du ikke tilføje en egenskab til fed skriftvægt, da det er standard. Hvis du ikke vil overlade det til tilfældighederne, kan du dog altid tilføje det i:
stærk {
font-vægt: fed;
farve: rød;
}
Nu ville du være næsten garanteret at have en side med fed (og rød) tekst, uanset hvor tag bruges.
Dobbelt op med vægt
En ting, vi har bemærket i løbet af året, er, hvad der sker, hvis du forsøger at fordoble vægten. For eksempel:
Denne tekst skal have begge dele fed og kursiv tekst inde i den.
Du ville tro, at denne linje ville producere et område, der har tekst med fed skrift og kursiv. Nogle gange sker dette faktisk, men vi har set, at nogle browsere kun ærer den anden af de to fremhævningsstile, den der er tættest på den aktuelle tekst, og viser kun denne kursiv. Dette er en af grundene til, at vi ikke fordobler vægtningskoder.
En anden grund til at undgå denne "fordobling" er til stilistiske formål. En form for vægt er normalt nok til at formidle den tone, du ønsker at sætte. Du behøver ikke at fed, kursiv, farve, forstørre og understrege tekst for at den skal skille sig ud. Denne tekst, vil alle disse forskellige former for vægt, blive garish. Så vær forsigtig, når du bruger betoningsmærker eller CSS-stilarter for at give vægt og ikke overdrive det.
En note om fed og kursiv
En sidste tanke - mens den dristige () og kursiv () tags anbefales ikke længere at blive brugt som vægtelementer. Der er nogle webdesignere, der bruger disse tags til at style indlejrede områder af tekst. Dybest set bruger de det som en element. Dette er rart, fordi tags er meget korte, men det anbefales generelt ikke at bruge disse elementer på denne måde. Vi nævner det, hvis du ser det derude på nogle websteder, der ikke bruges til at oprette fed eller kursiv tekst, men til at oprette en CSS-krog til en anden form for visuel styling.