Nesting HTML Tags

Hvernig á að bæta HTML HTML merkjum rétt

Ef þú skoðar HTML markup fyrir hvaða vefsíðu sem er í dag, muntu sjá HTML þætti sem eru að finna í öðrum HTML þætti. Þessir þættir sem eru "inni" annarra eru þekktar sem "hreiður þættir" og þau eru nauðsynleg til að byggja upp hvaða vefsíðu sem er í dag.

Hvað þýðir það að tengjast HTML-merkjum?

Auðveldasta leiðin til að skilja hreiður er að hugsa um HTML merkingar sem kassa sem innihalda efni. Efnið þitt getur innihaldið texta, myndir osfrv. HTML tags eru kassarnir í kringum efnið. Stundum þarftu að setja kassa inni í öðrum kassa. Þessir "innri" kassar eru hreiður innan annarra.

Ef þú ert með textablokk sem þú vilt vera með djörf í málsgrein, þá hefur þú tvær HTML-þættir og texta sjálft.

Dæmi: Þetta er setning textans.

Þessi texti er það sem við munum nota sem dæmi okkar. Hér er hvernig það væri skrifað.

Dæmi: Þetta er setning textans.

Vegna þess að þú vilt að orðið "setning" sé feitletrað, bætirðu við opnun og lokun feitletraðra merkja fyrir og eftir það.

Dæmi: Þetta er setning af texta.

Eins og þú sérð höfum við einn reit (málsgreinin) sem inniheldur innihaldið / textann í setningunni okkar, auk annars reit (sterkur merkaparinn) sem gerir þetta orð feitletrað.

Þegar þú hreiður, er mikilvægt að þú lokar merkjunum í gagnstæða röð sem þú opnaði þau. Þú opnar

fyrst og síðan , sem þýðir að þú snúir því við og lokar og síðan .

Önnur leið til að hugsa um þetta er að nota aftur á móti hliðstæðum kassa. Ef þú setur kassa í annan kassa þarftu að loka innri áður en þú getur lokað ytri eða meðhöndluðum kassa.

Bætir við fleiri köflumerki

Hvað ef þú vilt aðeins eitt eða tvö orð til að vera feitletrað og annað að vera skáletrað? Hér er hvernig á að gera það.

Dæmi: Þetta er setning af texta og það hefur einnig einhverja skáletraðan texta líka.

Þú getur séð að ytri kassi okkar,

, hefur nú tvær nested tags inni í henni - og . Þeir verða að vera lokaðir áður en það inniheldur kassann má loka.

Dæmi: Þetta er setning af texta og það hefur einnig skáletrað texta .

Þetta er annar málsgrein. < / p>

Í þessu tilfelli höfum við kassa inni í kassa! Mest út kassi er

eða "deild". Inni þessi kassi er par af hreinum merkjamerkjum og innan fyrsta málsgreinar höfum við næsta og tagpar. Enn og aftur, líta á hvaða vefsíðu sem er í dag og þú munt sjá þetta og margt fleira hreiður! Þetta er hvernig síður eru byggðar - kassar inni í kassa.

Hvers vegna ættir þú að hugsa um Nesting

Talan einn ástæða þess að þú ættir að hugsa um hreiður er ef þú ætlar að nota CSS. Cascading Style Sheets treysta á merki til að vera stöðugt hreiður innan skjalsins svo að það geti sagt hvar stíll byrjar og endar. Ef þú setur upp stíl sem ætti að hafa áhrif á alla "tengla sem eru inni í deildinni með bekknum" aðal innihald "texta á síðunni, veldur röng hreiður erfitt fyrir vafrann að vita hvar á að nota þessar stíll. Við skulum skoða nokkrar HTML:

Dæmi: Þetta er setning af texta og það hefur einnig skáletrað texta líka.

Þetta er annar málsgrein .

Notaðu dæmið sem ég hef bara sagt ef ég vildi skrifa CSS stíl sem myndi hafa áhrif á hlekkinn innan þessa deildar, og aðeins þessi hlekkur (í stað þess að tengjast öðrum tenglum í öðrum köflum síðunnar), myndi ég þurfa að nota nesting að skrifa stíl mína, sem slík:

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

Aðrir ástæður eru meðal annars aðgengi og vafra eindrægni. Ef HTML þinn er ranglega hreiður, þá mun það ekki vera eins aðgengilegt fyrir skjálesendur og eldri vafra - og það gæti jafnvel alveg brotið sjónræna útliti síðunnar ef vafrar geta ekki fundið út hvernig á að gera síðuna rétt vegna þess að HTML-þættir og merkingar eru út af stað.

Að lokum, ef þú ert að reyna að skrifa fullkomlega rétt og gild HTML, þá þarftu að nota rétta hreiður. Annars mun hver löggiltur flagga HTML þinn sem rangt.