Skip to main content

Hur och när ska man använda en betoningstag i HTML

Anonim

En av de taggar som du kommer att lära dig tidigt i din webbdesign utbildning är ett par taggar som kallas "betoningstaggar". Låt oss ta en titt på vad dessa taggar är och hur de används i webbdesign idag.

Tillbaka till XHTML

Om du lärt dig HTML år sedan, väl innan HTML5 uppstod, använde du förmodligen både de djärva och kursiva taggarna. Som du förväntar dig, omvandlade dessa taggar till fetstil eller kursiv text. Problemet med dessa taggar, och varför de drevs till fördel för nya element (som vi kommer att titta på inom kort), är att de inte är semantiska element. Detta beror på att de definierar hur texten ska se ut snarare än information om texten. Kom ihåg att HTML (vilket är var dessa taggar skulle skrivas) handlar om struktur, inte visuell stil! Visuella hanteras av CSS och webbdesign bästa praxis har länge hävdat att du borde ha en tydlig åtskillnad mellan stil och struktur på dina webbsidor. Det betyder inte att använda element som är icke-semantiska och vilken detalj ser snarare än struktur. Därför har de djärva och kursiva taggarna i allmänhet ersatts av starka (för fetstil) och betoning (för kursiv).

och

De starka och viktiga elementen lägger till information i din text och beskriver innehåll som bör behandlas annorlunda och betonas när innehållet talas. Du använder dessa element på ungefär samma sätt som du skulle ha använt fet och kursiv i det förflutna. Omslut din text med öppnings- och stängningskoderna ( och för betoning och och för stark vikt) och den bifogade texten kommer att betonas.

Du kan bo på dessa taggar och det spelar ingen roll vilken extern tagg som är. Här är några exempel.

Denna text betonas och de flesta webbläsare skulle visa den som kursiv.

Denna text är starkt betonad och de flesta webbläsare skulle visa den som fet typ.

I båda dessa exempel diktar vi inte visuellt utseende med HTML. Ja, standardutseendet på taggen skulle vara kursiv och skulle vara djärvt, men de ser lätt ut att ändras i CSS. Detta är det bästa av båda världarna. Du kan hävda standardwebbläsars stilar för att få kursiv eller fet text i ditt dokument utan att verkligen korsa linjen och blandningsstrukturen och stilen. Säg att du ville ha det text för att inte bara vara fet, men att också vara röd, kan du lägga till detta i CSS

stark { färgen röd;}

I det här exemplet behöver du inte lägga till en egendom för fet stil, eftersom det är standardvärdet. Om du inte vill lämna det till en chans, kan du dock alltid lägga till den i:

stark { font-weight: bold; färgen röd;}

Nu skulle du vara men garanterad att ha en sida med fet (och röd) text var som helst tagg används.

Dubbel upp på betoning

En sak som jag har märkt under året är vad som händer om du försöker dubbla upp tonvikten. Till exempel:

Denna text ska ha båda fet och kursiv text inuti den.

Du skulle tro att den här raden skulle producera ett område som har text som är fet och kursiv. Ibland händer det faktiskt, men jag har sett att vissa webbläsare bara heder den andra av de två betoningstilarna, den som ligger närmast den aktuella texten, och visar bara detta som kursiv. Detta är en av anledningarna till att jag inte dubblar upp betoningskoden.

En annan anledning att undvika detta "fördubbla" är för stilistiska ändamål. En form av betoning om det vanligtvis är tillräckligt för att förmedla tonen du vill ställa in. Du behöver inte djärva, kursivera, färga, förstora och understryka text så att den kan sticka ut. Den texten kommer alla de olika typerna av betoning att bli galen. Var därför försiktig när du använder betoningskoder eller CSS-stilar för att lägga tonvikt på och överdriv inte det.

En anteckning på fet och kursiv

En sista tanke - medan den djärva () och kursiv () taggar rekommenderas inte längre att användas som betoningskomponenter, det finns några webbdesigners som använder dessa taggar för att utforma inline textområden. I grund och botten använder de den som a element. Det här är trevligt eftersom taggarna är väldigt korta, men det rekommenderas inte generellt att använda dessa element på detta sätt. Jag nämner i om du ser det där ute på vissa webbplatser som används för att inte skapa fet eller kursiv text, men att skapa en CSS-krok för någon annan form av visuell styling.

Originalartikel av Jennifer Krynin. Redigerad av Jeremy Girard den 12/2/16.