Ang isa sa mga tag na matututunan mo nang maaga sa iyong web design education ay isang pares ng mga tag na kilala bilang "mga tag ng diin." Tingnan natin kung ano ang mga tag at kung paano ito ginagamit sa web disenyo ngayon.
Bumalik sa XHTML
Kung natutunan mo ang mga HTML na taon na ang nakalipas, bago ang pagtaas ng HTML5, malamang na ginamit mo ang parehong mga naka-bold at italika tag. Tulad ng iyong inaasahan, ang mga tag na ito ay naging mga elemento sa naka-bold na teksto o italicized na teksto ayon sa pagkakabanggit. Ang problema sa mga tag na ito, at kung bakit sila ay pinahintulutan sa pabor ng mga bagong elemento (na kung saan ay titingnan natin sa ilang sandali), ay hindi sila mga sangkap ng semantiko. Ito ay dahil tinukoy nila kung paano ang hitsura ng teksto kaysa sa impormasyon tungkol sa teksto. Tandaan, ang HTML (na kung saan ang mga tag na ito ay nakasulat) ay tungkol sa istraktura, hindi estilo ng visual! Ang mga visual ay hinahawakan ng CSS at web design best practices na matagal nang hawak na dapat kang magkaroon ng isang malinaw na paghihiwalay ng estilo at istraktura sa iyong mga web page. Nangangahulugan ito na hindi gumagamit ng mga elemento na di-semantiko at kung anong detalye ang tumingin sa halip na istraktura. Ito ang dahilan kung bakit ang mga naka-bold at italika tag ay karaniwang pinalitan ng malakas (para sa naka-bold) at diin (para sa italics).
& lt; strong & gt; at & lt; em & gt;
Ang mga elemento ng malakas at diin ay nagdaragdag ng impormasyon sa iyong teksto, na nagdedetalye ng nilalaman na dapat tratuhin nang naiiba at binibigyang diin kapag ang nilalamang iyon ay sinasalita. Ginagamit mo ang mga elementong ito sa halos parehong paraan na iyong ginamit ang naka-bold at italika sa nakaraan. Lamang palibutan ang iyong teksto sa pagbubukas at pagsasara ng mga tag ( at para sa diin at at para sa malakas na diin) at ang nakapaloob na teksto ay binibigyang diin.
Maaari mong pugad ang mga tag na ito at hindi mahalaga kung aling panlabas na tag. Narito ang ilang mga halimbawa.
Ang teksto na ito ay binibigyang diin at ang karamihan sa mga browser ay ipapakita ito bilang mga italics. Mahigpit na binigyang diin ang tekstong ito at ipapakita ito ng karamihan sa mga browser bilang naka-bold na uri.Sa pareho ng mga halimbawa na ito, hindi kami dictating visual na hitsura sa HTML. Oo, ang default na hitsura ng tag ay italics at ang ay magiging bold, ngunit ang mga hitsura ay madaling mabago sa CSS. Ito ang pinakamahusay sa parehong mundo. Maaari mong gamitin ang default na mga estilo ng browser upang makakuha ng italicized o naka-bold na teksto sa iyong dokumento nang hindi aktwal na tumatawid sa linya at paghahalo ng istraktura at estilo. Sabihing nais mo na ang text ay hindi lamang maging bold, ngunit upang maging pula, maaari mong idagdag ito sa CSS
malakas {
Kulay pula;
}
Sa halimbawang ito, hindi mo kailangang magdagdag ng isang ari-arian para sa naka-bold font-timbang dahil iyon ang default. Kung hindi mo nais na iwanan iyon sa pagkakataon, gayunpaman, maaari mong palaging idagdag ito sa:
malakas {
font-weight: bold;
Kulay pula;
}
Ngayon ay gagawin mo ang lahat ngunit ginagarantiyahan na magkaroon ng isang pahina na may naka-bold (at pula) na teksto kung saan ginamit ang tag na .
Double Up sa diin
Ang isang bagay na napansin ko sa paglipas ng taon ay kung ano ang mangyayari kung susubukan mong i-double up sa diin. Halimbawa:
Ang tekstong ito ay dapat magkaroon ng parehong tekstong naka-bold at italicized sa loob nito.Gusto mong isipin na ang linya na ito ay makagawa ng isang lugar na may teksto na naka-bold AT italics. Minsan ito ay mangyayari, ngunit nakita ko na ang ilang mga browser ay nagpaparangal lamang sa ikalawang ng dalawang estilo ng diin, ang pinakamalapit sa aktwal na teksto na pinag-uusapan, at ipapakita lamang ito bilang mga italics. Ito ang isa sa mga dahilan kung bakit hindi ako nag-double up sa mga tag ng emphasis.
Ang isa pang dahilan upang maiwasan ang "pagdodoble" ay para sa mga layuning pang-istilong. Isang paraan ng diin kung karaniwang sapat upang ihatid ang tono na nais mong itakda. Hindi mo kailangang i-bold, italicize, kulay, palakihin, at salungguhit ang teksto upang ito ay tumayo. Ang tekstong iyon, ang lahat ng mga iba't ibang uri ng diin, ay magiging mabait. Kaya maging maingat kapag gumagamit ng mga tag ng emphasis o mga estilo ng CSS upang magbigay ng diin at huwag lumampas ang labis dito.
Isang Paalala sa Bold at Italics
Ang isang pangwakas na pag-iisip - habang ang mga naka-bold () at mga italics () ay hindi na inirerekomenda upang magamit bilang mga elemento ng diin, may ilang mga taga-disenyo ng web na gumagamit ng mga tag na ito sa estilo ng inline na mga lugar ng teksto. Talaga, ginagamit nila ito tulad ng isang elemento ng . Mabuti ito dahil ang mga tag ay masyadong maikli, ngunit ang paggamit ng mga elementong ito sa ganitong paraan ay hindi inirerekomenda sa pangkalahatan. Banggitin ko kung sakaling makita mo ito doon sa ilang mga site na ginagamit hindi upang lumikha ng naka-bold o italicized teksto, ngunit upang lumikha ng isang CSS hook para sa ilang iba pang uri ng visual na estilo.
Orihinal na artikulo ni Jennifer Krynin. Na-edit ni Jeremy Girard noong 12/2/16.