Ano ang Semantiko HTML at Bakit Dapat Mong Gamitin Ito

Ang isang mahalagang prinsipyo ng kilusan ng Web Standards na responsable para sa industriya na mayroon tayo ngayon ay ang ideya ng paggamit ng mga elemento ng HTML para sa kung ano ang mga ito sa halip na kung paano sila maaaring lumitaw sa browser sa pamamagitan ng default. Ito ay kilala bilang paggamit ng Semantiko HTML.

Ano ang Semantiko HTML

Ang Semantiko HTML o semantiko ay ang HTML na nagpapakilala ng kahulugan sa web page sa halip na pagtatanghal lamang. Halimbawa, isang

Ang tag ay nagpapahiwatig na ang nakapaloob na teksto ay isang talata.

Ito ay parehong semantiko at presentational, dahil alam ng mga tao kung ano ang mga talata at mga browser kung paano ipapakita ang mga ito.

Sa flip side ng equation na ito, gusto ng mga tag at ay hindi semantiko, dahil tinutukoy lamang nila kung paano dapat tumingin ang teksto (naka-bold o italic) at hindi nagbibigay ng anumang karagdagang kahulugan sa markup.

Kabilang sa mga halimbawa ng mga tag ng semantiko na HTML ang mga tag ng header

sa pamamagitan ng

,

, at . Mayroong maraming iba pang mga tag ng semantiko na maaaring magamit habang nagtatayo ka ng isang website na sumusunod sa pamantayan.

Kung Bakit Dapat Mong Alagaan Tungkol sa Semantika

Ang benepisyo ng pagsusulat ng semantiko HTML ay nagmumula sa kung ano ang dapat maging layunin sa pagmamaneho ng anumang web page-ang pagnanais na makipag-usap. Sa pagdaragdag ng mga tag ng semantiko sa iyong dokumento, nagbibigay ka ng karagdagang impormasyon tungkol sa dokumentong iyon, na tumutulong sa komunikasyon. Sa partikular, ginagawang malinaw ng mga tag ng semantiko sa browser kung ano ang kahulugan ng isang pahina at nilalaman nito.

Ang kaliwanagan ay nakipag-ugnayan din sa mga search engine, tinitiyak na ang mga tamang pahina ay inihatid para sa mga tamang query.

Ang mga tag ng Semantiko na HTML ay nagbibigay ng impormasyon tungkol sa mga nilalaman ng mga tag na napupunta nang lampas lamang kung paano sila tumingin sa isang pahina. Teksto na nakapaloob sa Ang tag ay agad na kinikilala ng browser bilang ilang uri ng coding na wika.

Sa halip na sinusubukang i-render ang code na, nauunawaan ng browser na ginagamit mo ang tekstong iyon bilang halimbawa ng code para sa mga layunin ng isang artikulo o online na tutorial ng ilang uri.

Ang paggamit ng mga tag ng semantika ay nagbibigay sa iyo ng maraming iba pang mga kawit para sa estilo ng iyong nilalaman. Marahil ngayon ay mas gusto mong ipakita ang iyong mga sample code sa estilo ng default na browser, ngunit bukas, nais mong tawagan sila gamit ang isang grey na kulay ng background, at kalaunan nais mong tukuyin ang tumpak na mono-spaced na font na pamilya o font stack na gagamitin para sa ang iyong mga halimbawa. Maaari mong madaling gawin ang lahat ng mga bagay na ito sa pamamagitan ng paggamit ng semantiko markup at smartly inilapat CSS.

Gamitin nang Tama ang Mga Semantiko

Kapag nais mong gamitin ang mga tag ng semantiko upang ihatid ang kahulugan sa halip na para sa mga layunin ng pagtatanghal, kailangan mong maging maingat na hindi mo ginagamit ang mga ito nang mali para lamang sa kanilang mga karaniwang mga katangian ng display. Ang ilan sa mga karaniwang ginagamit na mga tesis ng semantiko ay ang:

• blockquote - Ang ilang mga tao ay gumagamit ng

  tag para sa indenting text na hindi isang panipi. Ito ay dahil ang mga blockquote ay naka-indent sa pamamagitan ng default. Kung gusto mo lamang ng mga benepisyo ng indentation, ngunit ang teksto ay hindi isang blockquote, gumamit ng mga margins ng CSS sa halip.

• p - Ginagamit ng ilang mga editor ng web (isang puwang na hindi pagsira na nakapaloob sa isang paragraoph) upang magdagdag ng dagdag na puwang sa pagitan ng mga elemento ng pahina, sa halip na tukuyin ang mga aktwal na talata para sa teksto ng pahinang iyon. Tulad ng naunang nabanggit na halimbawa ng pag-indent, dapat mong gamitin ang margin o padding na estilo ng ari-arian upang magdagdag ng espasyo.
• ul - Tulad ng blockquote, kalakip na teksto sa loob ng isang
  Ang mga indent ng tag na teksto sa karamihan ng mga browser. Ang parehong ito ay mali at hindi wastong HTML, bilang lamang
  • Ang mga tag ay may bisa sa loob ng isang
    tag. Muli, gamitin ang margin o padding style sa indent text.
  • h1-h6 - Maaaring gamitin ang mga heading na tag upang gawing mas malaki at mas matapang ang mga font, ngunit kung ang teksto ay hindi isang heading, hindi ito dapat nasa loob ng isang heading na tag. Gamitin ang font-weight at font-size na mga katangian ng CSS sa halip kung nais mong baguhin ang laki o bigat ng partikular na teksto sa iyong pahina ..

  Sa pamamagitan ng paggamit ng mga tag ng HTML na may kahulugan, lumikha ka ng mga pahina na nagbibigay ng karagdagang impormasyon kaysa sa pamamagitan lamang ng nakapaligid na bagay

  mga tag.

  Aling mga HTML Tags Sigurado Semantiko?

  Habang ang halos bawat HTML4 tag at ang lahat ng mga HTML5 tag ay may isang semantiko kahulugan, ang ilang mga tag ay lalo na semantiko sa kalikasan.

  Halimbawa, muling tinukoy ng HTML5 ang kahulugan ng at mga tag na semantiko. Ang Ang tag ay hindi nagpapahiwatig ng sobrang kahalagahan, kundi ang teksto na kadalasang isinasalin sa bold. Ang ang tag ay hindi nagpapahiwatig ng sobrang kahalagahan o diin, ngunit sa halip ay tumutukoy sa teksto na karaniwang isinasalin sa italics.

  Semantiko Mga Tag sa HTML

  	Pagpapaikli
  	Acronym
  	Long quotation
  	Kahulugan
  	Address para sa (mga) may-akda ng dokumento
  	Pagsipi
  	Reference code
  	Teletype text
  	Lohikal na dibisyon
  	Generic inline style container
  	Tinanggal na teksto
  	Ipinasok ang teksto
  	Diin
  	Malakas na diin
  	Unang antas ng headline
  	Pangalawang antas ng headline
  	Ikatlong antas ng headline
  	Pang-apat na antas ng headline
  	Fifth-level headline
  	Sixth-level headline
  	Istatistika break
  	Ang teksto na ipinasok ng gumagamit
  	Pre-format na teksto
  	Maikling panipi sa inline
  	Sample na output
  	Subscript
  	Superscript
  	Variable o tinukoy ng user na teksto