Skip to main content

Miten ja milloin käyttää korostusmerkintää HTML: ssä

Anonim

Yksi tunnisteista, jotka oppitat aikaisin verkko-opetuksessasi, on pari tunnisteita, jotka tunnetaan nimellä "korostustunnisteet". Katsotaanpa, mitä nämä tunnisteet ovat ja miten niitä käytetään verkkosuunnittelussa tänään.

Takaisin XHTML

Jos olet oppinut HTML-vuotta sitten, hyvin ennen HTML5-mallin nousua, olet todennäköisesti käyttänyt sekä lihavoituja että kursiivilla olevia tunnisteita. Kuten odotit, nämä tagit muuttivat elementtejä lihavoiduksi tekstiksi tai kursivoituna tekstiä vastaavasti. Ongelma näillä tunnisteilla ja miksi heidät työnnettiin syrjään uusien elementtien hyväksi (mitä tarkastelemme pian) on, että he eivät ole semanttisia elementtejä. Tämä johtuu siitä, että ne määrittelevät, miten tekstin pitäisi näyttää tekstin sijaan. Muista, että HTML (missä kyseiset tunnisteet kirjoitetaan) on kyse rakenteesta, ei visuaalisesta tyylistä! Visuaaliset käsittelyt CSS: llä ja verkkosuunnittelun parhaat käytännöt ovat jo pitkään todenneet, että sinun on selkeästi erotettava tyylisi ja rakenne web-sivuillasi. Tämä tarkoittaa, että elementtejä, jotka eivät ole semanttisia, ja joiden yksityiskohtaisuus näyttää rakenteen sijasta, ei ole. Siksi lihavoidut ja kursiivilla olevat tunnisteet on korvattu yleisesti voimakkailla (lihavoitu) ja painotuksella (kursiivilla).

ja

Vahva ja painotuselementit lisäävät tekstisi tietoja, joissa käsitellään sisältöä, jota on käsiteltävä eri tavoin ja korostettava, kun kyseistä sisältöä puhutaan. Käytät näitä elementtejä melko samalla tavalla kuin olisit käyttänyt aiemmin rohkeita ja kursiivisia. Yksinkertaisesti ympäröi tekstiä avaus- ja sulkumerkillä ( ja painopiste ja ja korostetaan voimakkaasti) ja liitteenä olevaa tekstiä korostetaan.

Voit kiinnittää nämä tunnisteet ja sillä ei ole väliä, mikä on ulkoinen tunniste. Seuraavassa on muutamia esimerkkejä.

Tämä teksti korostuu ja useimmat selaimet näyttävät sen kursiivina.

Tätä tekstiä korostetaan voimakkaasti ja useimmat selaimet näyttävät sen lihavana.

Molemmissa näissä esimerkeissä emme sanele ulkoasua HTML: llä. Kyllä, oletuksena merkintä olisi kursiivi ja olisi rohkea, mutta niitä voi helposti muuttaa CSS: ssä. Tämä on molempien maailmojen parhaita. Voit käyttää oletusselaimen tyyliä saadaksesi kursiivilla tai lihavoidulla tekstillä asiakirjan ilman, että olet todella ylittänyt rivin ja sekoitusrakenteen ja tyylin. Sano että halusit teksti ei ole vain lihavointi, vaan myös punainen, voit lisätä sen CSS: ään

vahva { väri punainen;}

Tässä esimerkissä sinun ei tarvitse lisätä lihavoitua fonttia, koska se on oletusarvo. Jos et kuitenkaan halua jättää sattumaa, voit lisätä sen aina:

vahva { font-weight: bold; väri punainen;}

Nyt sinulla olisi kaikki, mutta taatusti on sivu, jossa on lihavoitu (ja punainen) teksti missä tahansa tunnistetta käytetään.

Kaksoistuin korostukseen

Yksi asia, jonka huomasin vuoden aikana, tapahtuu, jos yrität kaksinkertaistaa painotuksen. Esimerkiksi:

Tässä tekstissä on oltava molemmat lihavoitu ja kursivoitu tekstin sisällä.

Luulisi, että tämä rivi tuottaa alueet, joilla on tekstiä, joka on lihavoitu ja kursiivi. Joskus tämä todellakin tapahtuu, mutta olen nähnyt, että jotkut selaimet kunnioittavat vain toista korostustyyliä, jotka ovat lähinnä kyseessä olevaa tekstiä, ja näyttävät sen vain kursiivina. Tämä on yksi syy, miksi en tuplata painotusmerkkejä.

Toinen syy välttää tätä "kaksinkertaistumista" on tyylillisiin tarkoituksiin. Yksi painotusmuoto, jos tarpeeksi yleensä välittää haluamasi äänen. Sinun ei tarvitse lihavoittaa, kursivoida, väriä, suurentaa ja korostaa tekstiä, jotta se erottuu. Tämä teksti, kaikki nämä erilaiset painotukset, tulevat raivokkaaksi. Joten ole varovainen, kun käytät korostustunnisteita tai CSS-tyyliä korostaen ja älä liioittele sitä.

Huomautus lihavoidusta ja kursiivista

Viimeinen ajatus - kun taas lihavoitu () ja kursiivi () tageja ei enää suositella käytettäväksi korostuselementteinä, on olemassa joitain web-suunnittelijoita, jotka käyttävät näitä tunnisteita tyylille inline-alueita tekstiä. Pohjimmiltaan he käyttävät sitä kuten elementti. Tämä on mukavaa, koska tunnisteet ovat hyvin lyhyitä, mutta näitä elementtejä tällä tavoin ei yleensä suositella. Mainitsen siinä tapauksessa, että näet sen, että jotkut sivustot eivät ole luoneet rohkeita tai kursivoituja tekstejä, vaan luodaan CSS-koukku jonkin muun tyyppiselle visuaaliselle muotoilulle.

Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 12.2.16.