Mga Tag ng Nesting HTML

Paano Tamang-tama ang Mga Tag ng Nest HTML

Kung titingnan mo ang HTML markup para sa anumang webpage ngayon, makikita mo ang mga elemento ng HTML na nilalaman sa loob ng iba pang mga elemento ng HTML. Ang mga sangkap na ito na "nasa loob" ng iba ay tinatawag na "nested elements", at ang mga ito ay mahalaga sa pagbuo ng anumang web page ngayon.

Ano ang Ibig Sabihin nito sa Mga Tags ng Nest ng HTML?

Ang pinakamadaling paraan upang maunawaan ang nesting ay mag-isip ng mga HTML tag bilang mga kahon na humahawak sa iyong nilalaman. Ang iyong nilalaman ay maaaring magsama ng teksto, mga imahe, atbp. Ang mga tag na HTML ay ang mga kahon sa paligid ng nilalaman. Minsan, kailangan mong ilagay ang mga kahon sa loob ng iba pang mga kahon. Ang mga "panloob na" na mga kahon ay nested sa loob ng iba.

Kung mayroon kang isang bloke ng teksto na nais mong naka-bold sa loob ng isang talata, magkakaroon ka ng dalawang elemento ng HTML pati na rin ang teksto mismo.

Halimbawa: Ito ay isang pangungusap ng teksto.

Ang tekstong iyon ang gagamitin natin bilang ating halimbawa. Narito kung paano ito isusulat.

Halimbawa: Ito ay isang pangungusap ng teksto.

Dahil gusto mo ang salitang "pangungusap" na maging bold, ikaw ay nagdadagdag ng pagbubukas at pagsasara ng naka-bold na mga tag bago at pagkatapos na ang worod.

Halimbawa: Ito ay isang pangungusap ng teksto.

Tulad ng makikita mo, mayroon kaming isang kahon (ang talata) na naglalaman ng nilalaman / teksto ng aming pangungusap, kasama ang pangalawang kahon (ang malakas na pares ng tag), na magbibigay ng salitang tulad ng bold.

Kapag nakasuot ka ng mga tag, mahalaga na isara mo ang mga tag sa kabaligtaran ng pagkakasunod-sunod na iyong binuksan. Buksan mo ang

una, na sinusundan ng , na nangangahulugang baligtarin mo iyon at isara ang at pagkatapos ay ang .

Isa pang paraan upang isipin ang tungkol dito ay upang muling gamitin ang pagkakatulad ng mga kahon. Kung inilalagay mo ang isang kahon sa loob ng isa pang kahon, kailangan mong isara ang panloob na isa bago mo maitatakip ang panlabas o naglalaman ng kahon.

Pagdaragdag ng Higit pang Mga Nested na Tag

Paano kung nais mo lamang ang isa o dalawang salita na maging matapang, at isa pang itinakda na italiko? Narito kung paano gawin iyon.

Halimbawa: Ito ay isang pangungusap ng teksto at mayroon ding ilang italicized text rin.

Makikita mo na ang aming panlabas na kahon, ang

, ngayon ay may dalawang nakapugad na mga tag sa loob nito - ang at ang . Dapat silang sarado bago ang saradong naglalaman ng kahon ay maaaring sarado.

Halimbawa: Ito ay isang pangungusap ng teksto at mayroon din itong ilang italiko na teksto .

Ito ay isa pang talata. < / p>

Sa kasong ito mayroon kaming mga kahon sa loob ng mga kahon! Ang pinakamabisang kahon ay ang

o isang "dibisyon". Sa loob ng kahon na iyon ay isang pares ng mga tag na may pamagat na nested, at sa loob ng unang talata mayroon kaming susunod na at tag na par. Muli, tingnan ang anumang web page ngayon at makikita mo ito at marami pang iba ang nesting nangyayari! Ito ay kung paano binuo ang mga pahina - mga kahon sa loob ng mga kahon.

Bakit Dapat Mong Pangalagain Tungkol sa Pagpipinta

Ang bilang isang dahilan na dapat mong pag-aalaga ang tungkol sa nesting ay kung gagamit ka ng CSS. Ang mga Cascading Style Sheet ay umaasa sa mga tag na patuloy na nakapugad sa loob ng dokumento upang masabi nito kung saan nagsisimula at nagtatapos ang mga estilo. Kung nag-set up ka ng isang estilo na dapat makaapekto sa lahat ng mga "link na nasa loob ng dibisyon na may isang klase ng" main-content "" na teksto sa pahina, ang hindi tamang pagsasara ay nagpapahirap sa browser na malaman kung saan ilalapat ang mga estilo. Tingnan natin ang ilang HTML:

Halimbawa: Ito ay isang pangungusap ng teksto at mayroon ding ilang italiko na teksto .

Ito ay isa pang talata .

Gamit ang mga halimbawa lamang ako nakasaad, kung nais kong magsulat ng isang estilo ng CSS na makakaapekto sa link sa loob ng dibisyong ito, at tanging ang link na iyon (kumpara sa iba pang mga link sa iba pang mga seksyon ng pahina), kailangan kong gamitin ang nesting upang isulat ang aking estilo, bilang tulad:

.main-content a {color: # F00; }

Kabilang sa iba pang mga kadahilanan ang accessibility at compatibility ng browser. Kung hindi tama ang iyong HTML, hindi ito magiging naa-access sa mga mambabasa ng screen at mas lumang mga browser - at maaaring ganap na masira nito ang visual na hitsura ng isang pahina kung hindi makita ng mga browser kung paano maayos na magre-render ng pahina dahil ang mga elemento at tag ng HTML ay wala sa lugar.

Sa wakas, kung nagsisikap kang magsulat ng ganap na wasto at wastong HTML, kakailanganin mong gamitin ang tamang nesting. Kung hindi man, i-flag ng bawat validator ang iyong HTML bilang hindi tama.