Skrift med understregning med HTML
Fremhævelse af skrift med understregning
Fordi man til webudvikling i stor udstrækning anvender understregninger til hyperlinks, anbefales det generelt ikke at anvende understregning til tekstdekoration. Dette skal dog ikke afholde nogen fra at anvende understregning, men blot være en henstilling til at man bruger understregning med omtanke, således at det for læseren intuitivt er til at gennemskue at der er tale om understregninger og ikke hyperlinks.
Understregningen kan laves på to måder: Tag'en <U> eller STYLE="text-decoration:underline". Style skal være lagt på en tag til tekstafsnit som f.eks. <P>, <DIV> og <SPAN>. Som man normalt bruger understregning i en tekst vil <SPAN> sædvanligvis være en god løsning. Så langt som jeg har testet de to metoder giver de nøjagtig samme effekt, også ved kombinationer med andre styles. Officielt understøtter HTML 5 ikke U-tag'en, og ved valideringer af koden vil man få en advarsel eller fejlmeddelelse, men understregningen bliver vist uden problemer.
Et stykke tekst med understregning vil som kode se således ud:
På siden, når den vises, ser det således ud:
Understregningen kan laves på to måder: Tag'en <U> eller STYLE="text-decoration:underline". Style skal være lagt på en tag til tekstafsnit som f.eks. <P>, <DIV> og <SPAN>. Som man normalt bruger understregning i en tekst vil <SPAN> sædvanligvis være en god løsning. Så langt som jeg har testet de to metoder giver de nøjagtig samme effekt, også ved kombinationer med andre styles. Officielt understøtter HTML 5 ikke U-tag'en, og ved valideringer af koden vil man få en advarsel eller fejlmeddelelse, men understregningen bliver vist uden problemer.
Et stykke tekst med understregning vil som kode se således ud:
Her er der normal tekst, <U>her får teksten en understregning med U-tag'en,</U> og her bliver den normal igen.
Her er der normal tekst, <SPAN STYLE="text-decoration:underline">her får teksten en understregning med text-decoration:underline,</SPAN> og her bliver den normal igen.
På siden, når den vises, ser det således ud:
Her er der normal tekst, her får teksten en understregning med U-tag'en, og her bliver den normal igen.
Her er der normal tekst, her får teksten en understregning med text-decoration:underline, og her bliver den normal igen.
Kombinationseffekter med andre typer styling
Denne type styling er, ved kombination med andre effekter, yderst følsom over for både programmering og browser. Så her er det af største vigtighed at få testet både forskellige browsertyper og forskellige versioner af de enkelte typer.
Linjens tykkelse påvirkes for nogle browserer af at teksten bliver med fede typer, så her skal man være lidt opmærksom på sine kombinationer. Når man arbejder med en tekst-streng der alligevel er stylet af en tag som f.eks. <SPAN>, så plejer jeg at anbefale at man tilføjer sin styling på dette, hvis det er praktisk muligt. Det er en praktisk ting omkring overskueligheden af koderne. Koden for kombinationen ser i så fald således ud:
På siden, når den vises, ser det således ud:
Linjens tykkelse påvirkes også af størrelsen på skriften, men effekten varierer afhængigt af hvilken browser man anvender. Her skal man yderligere være opmærksom på kombinationseffekter, hvor variationer i programmeringen også kan give varierende effekter.
Hvis vi prøver at se på et midlertidigt skift til 16.0 pt, hvor hver sektion er styret af sin egen kode, så ser koden således ud:
På siden, når den vises, ser det således ud:
Hvis man derimod laver en sektion med ny fontstørrelse, inden i den sektion der har understregning, ser koden således ud:
På siden ser det således ud.
Linjens tykkelse påvirkes for nogle browserer af at teksten bliver med fede typer, så her skal man være lidt opmærksom på sine kombinationer. Når man arbejder med en tekst-streng der alligevel er stylet af en tag som f.eks. <SPAN>, så plejer jeg at anbefale at man tilføjer sin styling på dette, hvis det er praktisk muligt. Det er en praktisk ting omkring overskueligheden af koderne. Koden for kombinationen ser i så fald således ud:
Her er der normal tekst, <SPAN STYLE="text-decoration:underline; font-weight:bold">her bliver teksten med fed skrift og understreget,</SPAN> og her bliver den normal igen.
På siden, når den vises, ser det således ud:
Her er der normal tekst, her bliver teksten med fed skrift og understreget, og her bliver den normal igen.
Linjens tykkelse påvirkes også af størrelsen på skriften, men effekten varierer afhængigt af hvilken browser man anvender. Her skal man yderligere være opmærksom på kombinationseffekter, hvor variationer i programmeringen også kan give varierende effekter.
Hvis vi prøver at se på et midlertidigt skift til 16.0 pt, hvor hver sektion er styret af sin egen kode, så ser koden således ud:
Her er der normal tekst, <SPAN STYLE="text-decoration:underline">her er teksten understreget,</SPAN> <SPAN STYLE="text-decoration:underline; font-size:16pt;">her skifter teksten med understregning til 16.0 pt,</SPAN> og her bliver den normal igen.
På siden, når den vises, ser det således ud:
Her er der normal tekst, her er teksten understreget, her skifter teksten med understregning til 16.0 pt, og her bliver den normal igen.
Hvis man derimod laver en sektion med ny fontstørrelse, inden i den sektion der har understregning, ser koden således ud:
Her er der normal tekst, <SPAN STYLE="text-decoration:underline">her bliver teksten understreget, <SPAN STYLE="font-size:16pt;">her skifter teksten størrelse til 16.0 pt,</SPAN></SPAN> og her bliver den normal igen.
På siden ser det således ud.
Her er der normal tekst, her bliver teksten understreget, her skifter teksten størrelse til 16.0 pt, og her bliver den normal igen.