HTML yemukati chimiro: gwara rakazara rekuvaka mapeji akasimba

Home » Python » HTML yemukati chimiro: gwara rakazara rekuvaka mapeji akasimba

Kudzidza kugadzira zvemukati muHTML mutsauko uripo pakati pepeji inongo "kuratidza chimwe chinhu pachiratidziro" uye peji iri nyore kufamba, inowanikwa, uye SEO-inoshamwaridzika. Kana HTML yako yakarongeka neakajeka hierarchy, mabhurawuza, injini dzekutsvaga, uye tekinoroji inobatsira ipapo nzwisisa zvinorehwa nechikamu chimwe nechimwe uye kuti zvese zvinopindirana sei.

Panzvimbo yekufunga nezve HTML senzira yekukanda ma tag pane peji, inobatsira kuiona seyiyo dhizaini yegwaro rako. Nechimiro chakasimba iwe unotsanangura panogara yako huru yemukati, kuti misoro ine hukama sei, chii chinonzi navigation, chii chechipiri ruzivo, uye zvikamu zvipi zvinotsanangura gwaro pacharo mumusoro. Mugwaro rino tichaenda zvakadzama muchimiro chemukati muHTML: kubva pasi rose skeleton yepeji, kusvika kumisoro, semantics, kusvikika, uye mamwe magadzirirwo ekongiri emapeji epasirese chaiwo.

1. Mafupa epasi rose egwaro reHTML

Gwaro rega rega reHTML rinotanga neyakafanana yakakwira-level chimiro: doctype, html, musoro uye muviri. Izvi zvingaite senge boilerplate, asi chidimbu chega chega chinoita basa rakakosha mumafambisirwo ebrowser nekupa zvirimo uye kuti injini dzekutsvaga dzinodudzira sei peji rako.

Mutsara wekutanga ndewe doctype declaration, yakanyorwa se mu HTML5. Murairo uyu haubudisi zvinoonekwa; inoudza bhurawuza kuti ishandise mwero modhi pachinzvimbo chequirks modhi, kudzivirira legacy inopa maitiro anogona kutyora zvachose dhizaini yako kana CSS.

Mushure meiyo doctype inouya iyo midzi element , iyo inoputira gwaro rose. Zvinenge zvese — zvese zvinyorwa metadata uye peji rinoonekwa — zvinogara mukati … . Apa ndipowo paunozivisa mutauro wevanhu wegwaro nelang hunhu, semuenzaniso yeChirungu kana yeSpanish kubva kuSpain.

Kuzivisa mutauro ne lang kwakakosha pakuwanikwa, SEO uye maturusi ekushandura. Vaverengi vemasikirini vanoishandisa kusarudza iyo chaiyo mataurirwo emitemo, injini dzekutsvaga uye vaturikiri vega vanoishandisa kunzwisisa mutauro wekutanga, uye CSS inogona kutonanga manyorerwo chaiwo emutauro vachishandisa vasarudza vakaita se[lang|=”fr”] kana :lang(en).

Mukati memudzi html element unogara uine vana vaviri vakananga: uye . Musoro une metadata yese uye zviwanikwa zvinodiwa kududzira uye kupa peji (encoding, zita, CSS, zvidhori, canonical URLs, nezvimwewo), nepo mutumbi uine izvo vashandisi vemukati vanonyatsoona nekudyidzana nazvo mubrowser hwindo.

2. Chii chiri mu (uye nei zvichikosha)

Chikamu chemusoro hachionekwe kune vashanyi vanoona, asi chakanyanya kukosha kune yako saiti maitiro, maitiro uye mazinga. Ruzivo rwaunoisa pano rwunotungamira injini dzekutsvaga, masocial platform, mabhurawuza uye zvishandiso zvemabatiro nekupa peji rako.

Chimwe chezvinhu zvekutanga mukati inofanira kunge iri chiziviso chemavara encoding uchishandisa . UTF‑8 ndiyo chiyero cheHTML5, inotsigira angangoita mavara ese uye emoji, uye inova nechokwadi chekuti mazita ako, zvinyorwa, CSS uye JavaScript zvinodudzirwa nemazvo zvisinei nemutauro kana zviratidzo zvaunoshandisa.

Peji rega rega rinofanirawo kutsanangura rakasiyana uye rinotsanangura element. Zviri mukati … inoonekwa mubrowser tab, mabhukimaki, nhoroondo yebrowser uye, zvakanyanya kukosha, semusoro wepamusoro unodzvanywa mumapeji enjini yekutsvaga kunze kwekunge anyorwa nemamwe meta tags. Kubva pane SEO maonero, ichi ndicho chimwe chepamusoro-kukosha zvidimbu zvemavara mugwaro rako.

Chimwe chinenge chinosungirwa meta chinhu mumagadzirirwo emazuva ano chiziviso chekuona. Kushandisa unoudza mabhurawuza enhare kuti asakure dhizaini kuhupamhi hwechishandiso pachinzvimbo chekumisikidza dhizaini yedesktop kuita diki skrini, iyo yakakosha padhizaini inopindura uye yekupfuura yekutanga nharembozha uye kuwanikwa kwekuongorora.

Beyond charset, zita uye viewport, musoro ndiko kwaunotsanangura yako yakawanda metadata, masitayera uye kiyi link. Izvi zvinosanganisira tsananguro yemeta yakanangana neSEO, mafaera eCSS, zvidhori zvesaiti, dzimwe shanduro dzemitauro, canonical URLs, web manifests, preconnects nezvimwe zvakawanda. Zvese zvidimbu izvi zvinopa zvisina kunanga kuti yako yemukati chimiro inonzwisiswa sei uye mashandisiro anoita saiti yako.

Essential metadata uye zvigadziriso zviwanikwa

CSS inowanzobatanidzwa mukati kushandisa . Mashizha ekunze ekunze anochengeta mharidzo yakaparadzana nechimiro, inogona kuvharirwa pamapeji ese kuti iite zvirinani, uye kubatsira kuchengetedza imwe sosi yechokwadi yedhizaini yako.

Iwe unogona zvakare kusanganisira CSS mune a block within , or even import additional stylesheets from there. Semuyenzaniso, vanogadzira dzimwe nguva vanoshandisa @import mukati metagi yekuisa stylesheet mune chaiyo cascade layer, kana kuzivisa CSS tsika zvivakwa (zvinoshanduka) pa :root level usati wazvirevera pasaiti yese.

The element inoshanda zvimwe zvinangwa pane kungoita masitayera. Nekushandura rel hunhu unokwanisa kunongedza kune favicon ine rel=”icon”, tsanangura dzimwe shanduro dzemitauro ine rel=”alternate” uye hreflang, tsanangura kanonika URL ine rel=”canonical”, kana rengedzo app inotaridza uye humwe hukama mabhurawuza uye vanokambaira vanofanira kuziva nezvazvo.

Kutsanangura zvidhori ne inova nechokwadi chekuti brand yako inoonekwa mubrowser tab uye mabhukimaki. Iwe unogona kudoma hukuru hwakasiyana kana mhando (senge PNG kana SVG), uye kunyange kupa yakakosha mifananidzo yemapuratifomu seIOS ine rel = "apple-touch-icon" kana mask icons emapini tabo muSafari.

Alternate links akakosha pamitauro yakawanda kana zvemukati-syndication setups. Paunoshandisa , semuenzaniso, uri kuudza injini dzekutsvaga kuti vhezheni yechiFrench yepeji imwechete iripo uye kuti inonangana nemutauro/dunhu musanganiswa upi. Saizvozvo, mamwe malink anogona kunongedza kuRSS feeds kana maPDF akasiyana kana iwe ukatsanangura yakakodzera mhando.

Canonical URLs, zvinyorwa uye zvisingawanzo shandiswa

Canonical links ine rel = "canonical" inobatsira kugadzirisa duplicate-content mamiriro nekuratidza kuti ndeipi URL ine chiremera. Kana chinyorwa chimwe chetecho chiripo munzira dzakawanda, kana kuti chaiswa pane mamwe madhomeini, iyo canonical URL inobatanidza masiginecha uye inodzivirira injini yekutsvaga kufungidzira kuti ndeipi vhezheni ye index.

JavaScript inosungirirwa uchishandisa iyo element, which can either embed inline code or reference an external file through the src attribute. Nekuti JavaScript iri kuvharira nekusarudzika, vagadziri vazhinji vanoisa ma tag kumagumo emuviri kana kushandisa defer kana async hunhu kuitira kuti HTML yemukati ibude zvinyorwa zvisati zvaitwa.

Iyo defer hunhu inoudza bhurawuza kuti itore script pasina kuvharira kupa uye kuti iite mushure mekunge iyo HTML yapepetwa zvizere. Kusiyana neizvi, async inodzivirirawo kuvharira panguva yekurodha asi inomhanyisa script kana yangogadzirira, zvinogona kukanganisa kuyerera kweparse, izvo zvinogona kuve dambudziko kana script ichienderana neDOM zvinhu zvinotsanangurwa gare gare mugwaro.

The element, iyo inongoonekwa mumusoro, inotsanangura iyo base URL uye default tarisiro yezvese hukama zvinongedzo. Nokugadzirisa iwe unonyatso taurira bhurawuza kuti yega yega URL iri papeji inofanirwa kugadziriswa kubva pamudzi iwoyo uye, nesarudzo, yakavhurwa mune yakatarwa mamiriro ekubhurawuza senge hwindo nyowani kana yepamusoro-level furemu.

Nyangwe inogona kuva ine simba, ine maside effects, kunyanya e-in-peji ma anchor uye nzira dzekushandisa. Chete base element inotenderwa pagwaro rega rega, inofanirwa kuoneka pamberi pechero maURL, uye inoshandura maanchors akareruka sekuita zvikumbiro zveURL zvizere nezvimedu zvakanamirwa kubase href.

3. Iyo inoonekwa yemukati layer: uye semantic marongerwo

Zvese vashandisi vanonyatsoona uye kufambidzana nehupenyu mukati me element. Apa ndipo paunoronga zvemukati ne semantic zvinhu zvinotsanangura basa rechikamu chega chega peji: kufamba, chikuru zvirimo, zvinyorwa, mativi epadivi, tsoka nezvimwe.

HTML5 yakaunza seti ye semantic marongero zvinhu zvakatsiva generic midziyo mumamiriro mazhinji. Zvinhu zvakadai , , , , , uye tsanangura zvinoreva pane kungotaridzika, izvo zvinobatsira tekinoroji uye injini dzekutsvaga kuvaka mepu yepfungwa yepeji rako.

kazhinji ine zvinyorwa zvenhanganyaya kana kufamba kwepeji kana chimwe chikamu. Izvi zvinogona kusanganisira logo, zita resaiti, menyu yekutanga kana musoro wegamba. Unogona kuva nemusoro wepeji-level padhuze nepamusoro pemuviri, uye mamwe misoro mukati mezvikamu kana zvinyorwa paunenge uchida diki-sumo.

yakatsaurirwa kumabhuroki ekufambisa uye inowanzo shandiswa kumamenu makuru kana mapoka ezvibatanidza zvakakosha. Iwe unogona kuisa iyo huru yekufambisa mukati memusoro, asi nav inogonawo kuoneka kune imwe nzvimbo, semuenzaniso mupadivi kana muzasi, chero ichishandiswa pakufamba uye kwete generic muunganidzwa weasina hukama.

inocherekedza yakasarudzika, yepakati zviri mukati peji uye inofanira kuoneka kamwe chete pagwaro. Mukati me main iwe unowanzo kuronga zvemukati uchishandisa zvemabhuroko emadingindira, zvezvimedu zvakazvimiririra senge blog posts kana nhau zvinhu, uye kune ruzivo rwakabatana asi rwechipiri senge manotsi epadivi, kushambadzira kana kufambirana navigation.

Zvikamu, zvinyorwa, maasides uye footers

inomiririra chinyorwa chakasiyana chemukati, kazhinji chine musoro wayo. Ichi chinogona kunge chiri chitsauko muchinyorwa chakareba, "Zvinhu" papeji yechigadzirwa, kana chikamu chepeji yako yekumba se" Testimonials" kana "Pricing". Zvikamu zvinobatsira kutyora magwaro akaoma kuita zvidimbu zvine musoro.

rinoshandiswa kuzvimiririra izvo zvinokwanisa kuzvimiririra kunze kwemamiriro akatenderedza. Mienzaniso inosanganisira zvinyorwa zvemabhurogi, zvinyorwa, zvinyorwa zvevashandisi, nyaya dzenhau kana mameseji eforum. Chinyorwa chinowanzo sanganisira musoro waro (une zita, munyori uye zuva) uye tsoka (ine ma tag, share link kana metadata).

inochengeterwa zvemukati zvine hukama nekuyerera kukuru, senge mativi, dhonza makotesheni, zvine hukama zvinongedzo kana zvivharo zvekushambadzira. Nekuti chinangwa chayo chiri chekuwedzera, vanoverenga skrini uye zvimwe maturusi vanogona kuzvibata zvinoenderana, uye vashandisi vanogona kusiyanisa zviri nyore rondedzero yepakati kubva kune yechipiri yekuwedzera.

inooneka kumagumo kwechikamu kana pazasi pepeji rose. Mutsara wepeji-level kazhinji une zviziviso zvekodzero, ruzivo rwekuonana, kufambisa kwechipiri, zvinongedzo zviri pamutemo kana zvikwereti zvesaiti, nepo chinyorwa-chikamu chezasi chinogona kunge chine nhoroondo dzevanyori, zvikamu, mazuva ekuvandudza kana zvinyorwa zvine hukama.

Iko kuchinjika kwezvinhu izvi zvinoreva kuti unogona kusanganisa nekuzviisa mudendere kuti zvienderane nedhizaini yako, asi kuomerera kune zvavanenge vafunga kunochengeta HTML yako ichitakurika uye inonzwisisika. Semuenzaniso, unogona kuisa zviri pamutemo nav mukati memusoro kana kumwe kunhu mumuviri, asi haufanirwe kushandisa nav kune zvisina tsarukano seti yezvinongedzo isiri chikamu chekufamba, kana kushandisa hombe kakawanda papeji.

4. Musoro wehutungamiri uye chimiro chezvinyorwa

Misoro ndiyo musana wechimiro chako chemukati, ichitsanangura iyo hierarchy yemisoro uye subtopics mugwaro rese. HTML inopa matanhatu emusoro mazinga, kubva (zvakakosha) kusvika (zvisinganyanyi kukosha), uye maitiro aunozvironga anobata vese vaverengi vevanhu uye injini dzekutsvaga.

Kazhinji pane imwe chete iyo inotaura musoro mukuru wepeji, ichiteverwa na yezvikamu zvekutanga uye - zvezvikamu zvakadzika. Kana misoro miviri ichigovana nhanho imwe chete, inomiririra zvikamu zvehama, nepo musoro wepazasi uchisuma chikamu chidiki mukati meyepamusoro-level yekutanga.

Ndima nezvimwe zviri kutevera musoro ndezvechikamu chinotsanangurwa nemusoro iwoyo. Kana musoro mutsva wezinga rimwechete uchionekwa, chikamu chekare chinonzi chakavharwa uye chitsva chinotanga. Ichi chimiro chakajeka ndicho chinoshandiswa nehunyanzvi hwekubatsira kuvaka chinyorwa icho vashandisi vanogona kusvetuka kuburikidza nekukasira.

Kusvetuka nhanho zvisina tsarukano-sekusvetuka kubva pah1 zvakananga kuenda pah4-kunogona kuvhiringa zvese maturusi otomatiki nevaverengi. Kurudziro yakajairika ndeyekufamba nhanho nhanho mune hierarchy: kubva pah1 kuenda kuh2 yezvikamu zvidiki, wozozvisarudzira kuenda kuh3, zvichingodaro, uchingodzika nhanho imwe panguva yekunyura zvemukati.

Mabhurawuza anowanzo shandisa masitaera ekutanga kumisoro: akakura mafonti saizi, uremu hwakashinga uye yakawedzera yakatwasuka nzvimbo. Aya masitaera akavakirwa-mukati anotoita kuti chimiro chionekwe, asi iwe unogona kunatsa mharidzo neCSS uchichengeta iyo yepasi semantic hierarchy yakasimba.

Ndima, zvinyorwa uye inline semantics

Normal text content inopinda zvinhu, chimwe nechimwe chichimiririra ndima yakasiyana. Kuchengeta pfungwa huru pandima inovandudza kuverenga uye inofambirana nemabatiro anoita tekinoroji tekinoroji inobvumira vashandisi kufamba nemabhuraki ezvinyorwa.

Mazita akaodha ( ) uye mazita asina kurongeka ( ) pamwe zvinhu zvakanakira ruzivo rwakaiswa mumapoka senge nhanho, maficha kana FAQs. Rondedzero dzakaodha dzinopa nhevedzano kana kuti zvinokosha, nepo zvinyorwa zvisina kurongeka zvinongoratidzira zvinhu zvine chokuita neboka pasina kurongeka; ese ari maviri anobatsira zvakanyanya pakuronga tsananguro dzakaoma.

Inline zvinhu zvakaita se , , , nezvimwe zvinopfumisa zvirimo pasina kutyora kuyerera kwendima. inotaura kukosha kwakasimba (uye inowanzoita seyakashinga), inosimbisa zvinyorwa (kazhinji italic), uye inogadzira hyperlink inobatanidza magwaro pane yako saiti kana kune zvekunze zviwanikwa.

Mifananidzo ne zvinoonekwa zvakatsiviwa zvinhu uye hazviputire zvirimo, asi ivo vachiri kutora chikamu muchimiro che semantic kuburikidza nehunhu senge alt. Iyo alt hunhu inonyanya kukosha pakuwanikwa uye SEO, sezvo ichitsanangura mufananidzo kune vashandisi vasingazvione uye nekutsvaga injini dzinongoparura zvinyorwa.

Kubatanidza block-level uye inline zvinhu zvine hungwaru zvinokutendera iwe kuti utaure hierarchy, hukama uye kusimbisa chete kuburikidza neHTML, uchisiya zvinoonekwa zvakaita semavara, mafonti uye spacing kuCSS. Uku kupatsanurwa kwekunetseka kunoita kuti markup yako irambe yakachena uye inoita kuti shanduko yedhizaini ive nyore gare gare.

5. Kuwanika uye mutauro mune zvinyorwa zvinyorwa

Gwaro rakanyatsorongeka reHTML harisi rekutarisa kutsvinda; chinhu chinodiwa kuti usvike. Vanhu vanovimba nevaverengi vescreen, keyboard navigation kana humwe hunyanzvi hwekubatsira zvinoenderana neHTML semantics yako kuti unzwisise uye ufambe kuburikidza nemukati nemazvo.

Kuzivisa mutauro wegwaro nelang pa element ndeimwe yematanho ekutanga ekuwanikwa. Kana mutauro wacho uchijeka, vanoverenga skrini vanosarudza mataurirwo nemaduramanzwi echokwadi, uye maturusi ekushandura ega anobata zvirimo nemazvo munzvimbo dzese nemitauro.

Iwe unogona zvakare kumaka shanduko yemutauro mukati memuviri uchishandisa lang pazvinhu zvakaita se kana . Kana chidimbu chichichinjisa kune mumwe mutauro, kuseta lang=”fr-CA” kana lang=”pt-BR” pane iyo snippet masiginecha kune anobatsira maturusi ayo mataurirwo uye mitemo yekuverenga inofanira kuchinjika kune icho chikamu chete.

Kupfuura mutauro, misoro, micherechedzo uye mamwe mavara anoumba musimboti wechimiro chinosvikika. Bvisa musoro wenyaya, kushandisa kwakaringana main, nav, musoro, tsoka, chikamu uye parutivi, pamwe neane musoro alt hunhu pamifananidzo, inogonesa tekinoroji yekuvaka rondedzero uye nekupa mafambiro akakosha se "svetukira kune chikuru zvirimo" kana "enda kunofamba".

Ruvara uye manyorerwo ekuona ega haafanire kunge ari iwo ega nzira yekuendesa ruzivo rwakakosha. Musiyano wepamusoro, saizi yefonti inoverengeka, inotarisisa nyika dzezvinopindirana uye zvinyorwa zvinotsanangura zvinongedzo senge "Verenga zvakawanda nezvekudzivirira moto" pane kungoti "Tinya apa" zvese chikamu chekuita kuti zvinyorwa zvako zvakarongwa zvishandiswe nevanhu vazhinji sezvinobvira.

Kusimbisa HTML yako uye kuita macheki ekusvikika uchishandisa otomatiki maturusi uye bvunzo dzemanyorero kunobatsira kufumura zvimiro zvekutanga. Zvishandiso zvinokwanisa kuona hunhu hwakashaikwa, dendere risingaite, kutevedzwa kwemusoro kana kutadza kushandiswa kwenzvimbo, izvo zvese zvinogona kugadziriswa zvakananga mumarkup yako zvisati zvakanganisa vashandisi chaivo.

6. Kuronga chimiro chemukati chewebhusaiti

Usati wanyora tag imwe chete, inobhadhara kuronga chimiro chinonzwisisika chesaiti yako nemapeji. Kufunga maererano nezvikamu, zvekutanga zveruzivo uye mafambiro ekufambisa zvinotungamira kune HTML iri nyore kuchengetedza, kuwedzera uye optimize yekutsvaga injini.

Chinhu chakajairika chekutangira ndechekudhirowa saitimepu kana dhizaini yesaiti. Izvi zvinowanzo sanganisira mapeji epamusoro-soro akadai seKumba, Nezve, Masevhisi, Blog, Bata, uyezve chero mapeji madiki kana zvikamu zvinosiyana kubva kune izvo, zvichiratidza kuti vashandisi vachafamba sei pakati pavo.

Mukati mepeji rimwe chete, unogona mepu yako yeramangwana HTML chimiro seyakatevedzana semantic blocks. Semuenzaniso, unogona kutsanangura musoro une logo uye nav, nzvimbo huru ine zvikamu zvakati wandei (gamba, maficha, zvipupuriro, mitengo), parutivi rwezvechipiri zvemukati, uye tsoka ine yekuonana ruzivo uye zviri pamutemo zvinongedzo.

Kugovera misoro kune izvo zvidhinha kutanga kunochengeta yako h1-h6 hierarchy yakabatana. Iwe sarudza pachine nguva kuti iyo imwe chete h1 ichave yei, ndezvipi zvikamu zvakakodzera h2 misoro, uye painodiwa misoro midiki yakaita seh3 kana h4 kutsanangura misoro yakaoma pasina kuremedza muverengi.

Kubva pane SEO uye UX maonero, zvine hungwaru kuisa zvakakosha zvemukati uye zvakakosha zvikamu pakutanga muDOM. Injini dzekutsvaga dzinowanzo tarisa zvakanyanya kune zviri padhuze nepamusoro pegwaro, uye vashandisi vanokoshesa kuwana ruzivo rwekutanga nekukurumidza pane kupuruzira yapfuura marefu ma intros kana zvinhu zvekushongedza.

Maitiro akanakisa ekuchengetedza HTML zvimiro

Shandisa mazita ekirasi anotsanangura uye maID kuisa mazita ezvimiro pazvinenge zvakakodzera, asi dzivisa kudarika-nesting div. Makirasi akaita se .main-nav, .site-header kana .sidebar anokuudza pakarepo zvinoitwa nechikamu, zvichiita kuti HTML yako neCSS zvive nyore kuverenga mwedzi gare gare.

Chengetedza HTML yako seyakatsetseka sezvinobvira uchiri kuratidza hutongi hwechokwadi. Zvidzitiro zvakadzika zvakadzika zviripo zvekushongedza chete zvinogona kutsiviwa neCSS ine pfungwa, zvichikonzera kuchena uye kureruka markup izvo zviri nyore kune wese munhu kushanda nazvo.

Boka zvine chekuita nezvemukati mukati mesemantic element pane kuzviparadzira papeji. Semuyenzaniso, chinyorwa chebhurogu chinofanira kugara mukati mechinyorwa, chine musoro wacho, zuva, munyori uye zvirimo pamwe chete, nepo zvinyorwa zvine hukama kana munyori bio anogona kugara padivi kana munyasi yechinyorwa, akaparadzaniswa zvakajeka kubva kurondedzero huru.

Dzokorora chimiro chako pese paunowedzera peji kana kugadzirisazve chikamu. Zviri nyore kuti magwaro eHTML aunganidze mapeji ega ega uye ad-hoc zvinhu nekufamba kwenguva, saka nguva nenguva kuzvigadzirisa kuti zvidzokere muchimiro chakabatana semantic kunobhadhara mukuchengetedza, kuita uye kuwanikwa.

Kunyora maumbirwo ako - senge magadzirirwo aunoita misoro, zvikamu, zvinyorwa uye mazasi - zvinobatsira kuti zvikwata zvikuru zvisafanana. Nhungamiro diki yemukati inotsanangura kuti ndezvipi zvinhu zvekushandisa pakufamba, kuronga misoro uye maitiro ekumaka zvakadzokororwa zvikamu zvinogona kudzivirira yako codebase kubva kushanduka kuita chigamba chechimiro.

7. Maitiro ekugadzirisa maitiro emhando dzepeji dzakajairika

Mapeji akasiyana-siyana anowanzo kugovera maitiro ezvimiro aunogona kushandisa zvakare uye kugadzirisa mapurojekiti ese. Kuziva mapatani aya kuchakubatsira iwe kugadzira zvimiro zvemukati zvinonzwa zvakasikwa kune vashandisi uye zviri nyore kuita muHTML.

Peji rekutanga rinogona kutanga nepasi rose ine logo uye yekutanga . Izvi zvinowanzoteverwa nea nezvakawanda blocks: chikamu chegamba chine h1 uye kudanwa-ku-chiito, chikamu chezvimiro, pamwe chikamu chezvipupuriro, uye chikamu chekupedzisira chinokoka vashandisi kuti vabatane kana kunyoresa.

Pazasi pezvinyorwa zvikuru, a kazhinji inopa ruzivo rwepasirese uye yekuwedzera navigation. Zvinongedzo kune zvakavanzika marongero, mazwi ebasa, sarudzo dzekusangana, masocial network uye sekondari mamenu anogara pano, zvichiita kuti zvive nyore kuwana pasina kukanganisa kubva kune yekutanga zviri pamusoro.

A blog post peji inokodzera mumiriri weiyo element. Chinyorwa ichi chaiwanzo kuve nemusoro waro une musoro wepositi (kazhinji peji iri h1), zuva rekuburitswa uye ruzivo rwemunyori, zvichiteverwa nemutumbi weposvo, zvakatsemurwa muzvikamu zvine h2/h3 misoro, uye pakupedzisira chinyorwa chepasi chine ma tag, mabhatani ekugovana kana zvine hukama zvinongedzo.

Sidebars kana yechipiri mapaneru anomiririrwa ne zvinhu. Vanogona kusanganisira zvinyorwa zvezvinotumirwa, mafirita echikamu, mafomu ekusaina tsamba kana rubatsiro rwemamiriro ezvinhu. Nekuti padivi yakamisikidzwa semantiki seanopindirana zvemukati, tekinoroji yekubatsira inogona kuzviratidza seizvi kune vashandisi.

Mapeji ekuonana nemapeji ebasa anoshandisa zvakare zvivharo zvakafanana asi anosimbisa kujeka uye kureruka kwekudyidzana. Misoro yakajeka, ndima dzakapfupikiswa, zvidzoreso zvefomu zvine mazita uye zvine musoro kuverenga zvinova nechokwadi chekuti vashandisi vanogona kuwana nzira yekusvika kwauri kana kunzwisisa chipo chako pasina kufungidzira.

8. HTML zvinhu, hunhu uye basa ravo muchimiro

Pasi pemapatani ese aya, zvese zviri muHTML zvinodzika kusvika kune zvinhu, ma tag uye hunhu. Kunzwisisa mashandisiro avanoita pamwe chete kunokupa kudzora kwakaringana pamusoro pechimiro chako chemukati, machira ekuratidzira uye maitiro.

Chinhu cheHTML chinoumbwa tegi yekuvhura, hunhu hwekusarudza, zvimwe zvirimo uye, kazhinji, tegi yekuvhara. Semuyenzaniso, Iyi indima. inosanganisira yekutanga tag , node yemavara, uye tegi yekupedzisira , ose pamwe chete anomiririra chikamu chendima.

Hunhu hunooneka mukati meiyo teki yekuvhura uye inopa rumwe ruzivo nezve chinhu. Anouya sezita = "value" pairs, senge class="highlight", id="intro" or href="/contact". Humwe hunhu ndehwepasi rose uye hunogona kuoneka pane chero chinhu (sekirasi, id, lang), nepo mamwe akananga kune mamwe ma tag (senge src ye img kana mhando yekuisa).

Makirasi anonyanya kukosha pakugadzirisa uye kugadzira zvinyorwa zvakakura. Nekupa iyo kirasi imwechete kune akawanda maelementi - toti, kirasi = "yakakosha" -unogona kushandisa yakajairwa CSS mitemo kana kunanga iyo muJavaScript, kuchengetedza chimiro chako chichichinjika chichiri kudzoreka.

Haasi ese maelementi anoda kuvhara ma tag; zvimwe hazvina chinhu (zvisina) zvinhu zvisina zvirimo. Elements like , , uye kuwira muchikwata ichi. Ivo vachiri kutora chikamu muchimiro chako, asi chete kuburikidza nehunhu hwavo, sezvo vasingaputire chero chinyorwa chemukati kana vana.

Iyo World Wide Web Consortium (W3C) inochengetedza iyo yakatarwa inotsanangura kuti zvese izvi zvinhu uye hunhu zvinoshanda sei pamwechete. Kutevera zviyero izvi kunoita kuti mapeji ako arambe achipindirana mumabhurawuza nemidziyo, uye inova nechokwadi chekuti chimiro chako chakanyatsogadzirwa chemukati chinoita senge munhu anoshanya.

Kuisa zvese izvi mukuita kunoreva kubata HTML senge semantic musana wesaiti yako: yakajeka gwaro rondedzero, chaiyo kushandiswa kwemisoro, inofungisisa marongero ane huru, chikamu, chinyorwa, parutivi uye tsoka, inosvikika metadata mumusoro uye zvine musoro hunhu pane chimwe chinhu pamwe chete kuita kuti zvirimo zvive nyore kuverenga, kufamba uye chinzvimbo zvakanaka mumainjini ekutsvaga.