HTML pabrėžimo žymos

Viena iš žymų, kurią jūs išmoksite anksti savo žiniatinklio dizaino švietime, yra žymų pora, vadinama "akcentuotosios žymos". Pažvelkime į tai, kas yra šios žymos, ir kaip šiandien jos naudojamos interneto dizaino.

Atgal į XHTML

Jei anksčiau išmokote HTML prieš HTML5 kilimą, tikriausiai naudojate paryškintas ir kursyvu pažymėtas žymes. Kaip tikėjotės, šios žymos atitinkamai pakeitė elementus į paryškintą tekstą arba kursyvu pažymėtą tekstą. Problema, susijusi su šiomis žymėmis, ir kodėl jos buvo pašalintos naujiems elementams (apie kuriuos trumpai apžvelgsime), yra tai, kad jie nėra semantiniai elementai. Taip yra todėl, kad jie apibrėžia, kaip tekstas turėtų atrodyti, o ne informacija apie tekstą. Atminkite, kad HTML (tai kur bus parašytos šios žymos) yra visa informacija apie struktūrą, o ne vizualinį stilių! Vaizduokliai yra tvarkomi CSS, o interneto dizaino geroji patirtis jau seniai nusprendė, kad turėtumėte aiškiai atskirti stilių ir struktūrą savo tinklalapiuose. Tai reiškia, kad nenaudokite elementų, kurie nėra semantikai ir kurių detalės atrodo, o ne struktūra. Štai kodėl drąsos ir kursyvu pažymėtos žymos dažniausiai buvo pakeistos stipriomis (drąsiai) ir akcentais (kursyvu).

& lt; strong & gt; ir & lt; em & gt;

Stiprūs ir pabrėžti elementai papildo jūsų tekstą informaciją, nurodydami turinį, kuris turėtų būti vertinamas skirtingai ir pabrėžiamas, kai kalbama apie tą turinį. Jūs naudojate šiuos elementus beveik tuo pačiu būdu, kaip praeityje naudosite drąsiai ir kursyvu. Tiesiog supa savo tekstą su atidarymo ir uždarymo ženklais ( ir , skirtuose dėmesio, ir , kad būtų pabrėžtas), ir pridedamas tekstas bus pabrėžtas.

Galite pritvirtinti šias žymes ir nesvarbu, kas yra išorinė žyma. Štai keletas pavyzdžių.

Šis tekstas pabrėžiamas , o dauguma naršyklių rodytų jį kursyvu. Šis tekstas yra stipriai pabrėžiamas , o dauguma naršyklių rodė jį kaip paryškintuoju.

Abiejuosiuose pavyzdžiuose mes ne diktuojame vizualų išvaizdą su HTML. Taip, numatytoji žyma pasirodys kursyvu ir bus paryškintas, bet tuos išvaizdus būtų galima lengvai pakeisti CSS. Tai geriausias iš abiejų pasaulių. Galite panaudoti numatytuosius naršyklės stilius, norėdami gauti kursyvu pažymėtą tekstą arba paryškintą tekstą be jokio kryžminio teksto ir maišymo struktūros bei stiliaus. Pasakykite, kad norite, kad tekstas būtų ne tik drąsus, bet ir raudonas, galite jį pridėti prie CSS

stiprus {
spalva: raudona;
}

Šiame pavyzdyje jums nereikia pridėti turinio šrifto svorio, nes jis yra numatytasis. Tačiau jei nenorite to palikti atsitiktinai, visada galite jį pridėti:

stiprus {
šrifto svoris: paryškintas;
spalva: raudona;
}

Dabar jūs būsite tikras, kad turėsite puslapio su paryškintu (ir raudonu) tekstu, kur bus naudojama žyma.

Dvigubas akcentas

Vienas dalykas, kurį aš pastebėjau per metus, yra tai, kas atsitiks, jei bandysite sustiprinti dėmesį. Pavyzdžiui:

Šio teksto tekstas turi būti išspausdintas ir paryškintas .

Galėtumėte manyti, kad ši eilutė sukurtų sritį, kurioje tekstas yra standus ir kursyvas. Kartais tai iš tikrųjų atsitinka, bet aš mačiau, kad kai kurios naršyklės garbina tik antrą iš dviejų akcentų stilių, tai yra arčiausiai tikrojo teksto, ir rodyti jį tik kursyvu. Tai yra viena iš priežasčių, kodėl aš nesubriešinuosi dėmesio žymeles.

Kita priežastis, kodėl išvengti šio "dvigubinimo", yra stiliaus tikslais. Viena akcento forma, jei paprastai pakankama, kad pateiktumėte tonas, kurį norite nustatyti. Jums nereikia paryškinti, paraginti kursyvu, spalvoti, išplėsti ir pabrėžti tekstą, kad jis išsiskirtų. Šis tekstas, ar visi šie skirtingi akcentai, taptų ilgais. Todėl būkite atsargūs, kai naudosite akcentuotosios žymeles arba CSS stilius, kad pabrėžtumėte ir nepersidrunkite.

Pastaba apie "Bold" ir "Italics"

Viena paskutinė mintis - nors paryškintuosius () ir kursyvinius () žymenis nebėra rekomenduojama naudoti kaip pabrėžimo elementus, yra keletas interneto dizainerių, kurie naudoja šias žymes, kad stiliaus teksto teksto eilutes. Iš esmės jie naudoja jį kaip elementą . Tai malonu, nes žymos yra labai trumpos, tačiau šių elementų naudojimas šiuo būdu paprastai nėra rekomenduojamas. Aš paminauju, jei matysite, kad kai kuriose svetainėse naudojamasi nesukelti drąsios ar kursyvuotos teksto, bet kurti CSS kablys tam tikram kitam vizualiniam stiliui.

Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard 16.2.16.