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).
& Lt; strong & gt; ja & lt; em & gt;
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 painotukselle ja ja voimakkaalle korostukselle) ja liitteenä oleva teksti korostuu.
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ämä teksti on korostettu voimakkaasti ja useimmat selaimet näyttävät sen lihavana.Molemmissa näissä esimerkeissä emme sanele ulkoasua HTML: llä. Kyllä, -tunnisteen oletusnäköisyys olisi kursiivilla ja olisi rohkea, mutta niitä voidaan 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ä halusi, että teksti ei ole vain rohkea, 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 varmasti on sivu, jossa on lihavoitu (ja punainen) teksti aina, kun käytetään -tunnistetta.
Kaksoistuin korostukseen
Yksi asia, jonka huomasin vuoden aikana, tapahtuu, jos yrität kaksinkertaistaa painotuksen. Esimerkiksi:
Tässä tekstissä on oltava sekä lihavoitu että kursivoitu teksti sen 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 lihavoituja () ja kursivoituja () merkkejä ei enää suositella käytettäväksi painotuselementeinä, on olemassa joitain web-suunnittelijoita, jotka käyttävät näitä tunnisteita tyylille inline-alueille. Pohjimmiltaan ne käyttävät sitä kuin -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.