Kuinka ja milloin käyttää korostustagia HTML-muodossa

click fraud protection

Yksi tunnisteista, jotka opit varhaisessa vaiheessa Web-suunnittelu koulutus on pari tunnisteita, jotka tunnetaan nimellä "painotunnisteet". Katsotaanpa, mitä nämä tunnisteet ovat ja miten niitä käytetään verkkosivujen suunnittelussa tänään.

Takaisin XHTML: ään

Jos opit HTML: n vuosia sitten, paljon ennen HTML5, olet todennäköisesti käyttänyt sekä lihavoituja että kursivoituja tunnisteita. Kuten voit odottaa, nämä tunnisteet muuttivat elementit lihavoiduksi tekstiksi tai kursivoiduksi tekstiksi. Näiden tunnisteiden ongelma ja miksi ne työnnettiin syrjään uusien elementtien hyväksi (joita tarkastelemme pian), on, että ne eivät ole semanttisia elementtejä. Tämä johtuu siitä, että ne määrittelevät tekstin ulkoasun eikä tietoa tekstistä. Muista, että HTML (missä nämä tagit kirjoitettaisiin) on kyse rakenteesta, ei visuaalisesta tyylistä! Visuaalit hoitaa CSS ja verkkosivujen suunnittelun parhaat käytännöt ovat jo pitkään olleet sitä mieltä, että verkkosivuillasi on oltava selkeä tyyli ja rakenne. Tämä tarkoittaa, että ei käytetä elementtejä, jotka eivät ole semanttisia ja jotka näyttävät yksityiskohdilta rakenteen sijasta. Siksi rohkea ja

instagram viewer
kursivoitu Tunnisteet on yleensä korvattu voimakkailla (lihavoituna) ja korostuksilla (kursivoitu).

ja

Vahvat ja korostetut elementit lisäävät tekstiäsi, yksityiskohtaisesti sisältöä, jota on kohdeltava eri tavalla ja korostettava, kun sisältö puhutaan. Käytät näitä elementtejä melkein samalla tavalla kuin olisit aiemmin käyttänyt lihavoitua ja kursivoitua. Yksinkertaisesti ympäröi teksti avaus- ja sulkutunnisteilla ja korostamiseksi ja ja voimakkaaseen korostamiseen) ja oheinen teksti korostetaan.

Voit sijoittaa nämä tunnisteet ja ei ole väliä mikä on ulkoinen tunniste. Tässä on joitain esimerkkejä.

Tämä teksti on korostettu ja useimmat selaimet näyttävät sen kursivoituna. 
Tätä tekstiä korostetaan voimakkaasti ja useimmat selaimet näyttävät sen lihavoituna. 

Molemmissa näistä esimerkeistä emme sanele visuaalista ilmeä HTML. Kyllä, tag olisi kursivoitu ja olisi rohkea, mutta niitä voidaan helposti muuttaa CSS: ssä. Tämä on molempien maailmojen paras. Voit hyödyntää selaimen oletustyylejä saadaksesi kursivoidun tai lihavoidun tekstin asiakirjaasi ylittämättä tosiasiallisesti viivaa ja sekoittamatta rakennetta ja tyyliä. Sano että haluat sen Jos haluat paitsi rohkean myös punaisen tekstin, voit lisätä tämän SCS: ään.

vahva {
väri punainen;
}

Tässä esimerkissä sinun ei tarvitse lisätä ominaisuutta lihavoitavalle fontin painolle, koska se on oletusarvo. Jos et halua jättää sitä sattuman varaan, voit aina lisätä sen:

vahva {
fontin paino: lihavoitu;
väri punainen;
}

Nyt sinulla olisi kaikki, mutta taatusti, että sinulla on sivu lihavoidulla (ja punaisella) tekstillä missä tahansa -tunnistetta käytetään.

Tuplaa korostamalla

Yksi asia, jonka olemme huomanneet vuoden aikana, on se, mitä tapahtuu, jos yrität kaksinkertaistaa painotuksen. Esimerkiksi:

Tässä tekstissä tulisi olla molemmat lihavoitu ja kursivoitu tekstiä sen sisällä.

Luulisi, että tämä rivi tuottaisi alueen, jolla on lihavoitua ja kursivoitua tekstiä. Joskus näin todellakin tapahtuu, mutta olemme nähneet, että jotkut selaimet kunnioittavat vain toista kahdesta korostustyylistä, sitä, joka on lähinnä kyseessä olevaa tekstiä, ja näyttävät tämän vain kursivoituna. Tämä on yksi syy siihen, miksi emme kaksinkertaista korostustunnisteita.

Toinen syy välttää "kaksinkertaistuminen" on tyylitarkoituksiin. Yksi korostuksen muoto riittää yleensä asettamaan sävyn. Tekstiä ei tarvitse lihavoida, kursiivilla, väriä, suurentaa ja alleviivata, jotta se erottuu. Siitä tekstistä tulee kaikenlainen painotus, ja siitä tulee kiusallinen. Joten ole varovainen, kun käytät korostustunnisteita tai CSS-tyylejä korostamiseksi, älä liioittele sitä.

Huomautus lihavoidusta ja kursivoidusta

Viimeinen ajatus - vaikka rohkea () ja kursivoitu () -tunnisteita ei enää suositella käytettäväksi korostuselementteinä, on joitain verkkosuunnittelijoita, jotka käyttävät näitä tunnisteita tekstin tekstialueiden muotoiluun. Pohjimmiltaan he käyttävät sitä kuten elementti. Tämä on mukavaa, koska tunnisteet ovat hyvin lyhyitä, mutta näiden elementtien käyttöä tällä tavalla ei yleensä suositella. Mainitsemme sen, jos näet sen joissakin sivustoissa, joita ei käytetä lihavoidun tai kursivoidun tekstin luomiseen, vaan CSS-koukun luomiseen muulle visuaaliselle tyylille.

instagram story viewer