Hur och när man använder en betoningstagg i HTML

click fraud protection

En av taggarna som du lär 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ärde dig HTML för många år sedan, långt innan uppkomsten av HTML5, du antagligen använde både fet och kursiv taggar. Som du förväntar dig förvandlade dessa taggar element till fet text respektive kursiv text. Problemet med dessa taggar och varför de skjuts åt sidan till förmån 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 (det är där dessa taggar skulle skrivas) handlar om struktur, inte visuell stil! Visuals hanteras av CSS och bästa metoder för webbdesign har länge hävdat att du bör ha en tydlig åtskillnad mellan stil och struktur på dina webbsidor. Detta innebär att man inte använder element som inte är semantiska och som ser detalj ut snarare än struktur. Det är därför den djärva och

instagram viewer
kursiv taggar har vanligtvis ersatts med starka (för fetstil) och betoning (för kursiv).

och

De starka elementen och betoning elementen lägger till information i din text och beskriver innehåll som ska behandlas annorlunda och betonas när innehållet talas. Du använder dessa element på ungefär samma sätt som du tidigare skulle ha använt fetstil och kursiv stil. Omge bara din text med inledande och stängande taggar ( och för betoning och och för stark betoning) och den bifogade texten kommer att betonas.

Du kan bo dessa taggar och det spelar ingen roll vilken som är den externa taggen. Här är några exempel.

Denna text betonas och de flesta webbläsare visar det som kursiv. 
Denna text betonas starkt och de flesta webbläsare skulle visa det som fet stil. 

I båda dessa exempel dikterar vi inte visuellt utseende med HTML. Ja, standardutseendet för tag skulle vara kursiv och skulle vara djärva, men dessa utseende kunde lätt ändras i CSS. Detta är det bästa från båda världar. Du kan använda standardwebbläsarformaten för att få kursiv eller fet text i ditt dokument utan att faktiskt korsa linjen och blanda struktur och stil. Säg att du ville ha det text för att inte bara vara fet men också vara röd, kan du lägga till detta i SCS.

stark {
färgen röd;
}

I det här exemplet behöver du inte lägga till en egenskap för fet textvikt eftersom det är standard. Om du inte vill lämna det åt slumpen kan du dock alltid lägga till det i:

stark {
font-vikt: fet;
färgen röd;
}

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

Dubbel upp på betoning

En sak som vi har märkt under året är vad som händer om du försöker fördubbla betoning. Till exempel:

Denna text borde ha båda fetstil och kursiv text inuti den.

Du skulle tro att den här raden skulle ge ett område som har text med fetstil OCH kursiv. Ibland händer detta verkligen, men vi har sett att vissa webbläsare bara hedrar den andra av de två betonstilarna, den som ligger närmast den aktuella texten i fråga, och visar bara denna som kursiv. Detta är en av anledningarna till att vi inte fördubblar betoningstaggarna.

En annan anledning att undvika att "fördubblas" är för stiländamål. En form av betoning är vanligtvis tillräcklig för att förmedla den ton du vill sätta. Du behöver inte fet, kursiv, färglägga, förstora och understryka texten för att den ska sticka ut. Den texten, kommer alla dessa olika typer av betoning, skulle bli garish. Så var försiktig när du använder betoningstaggar eller CSS-stilar för att betona och inte överdriva det.

En anteckning om fetstil och kursiv stil

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

instagram story viewer