HTML-sisällön rakenne: täydellinen opas kiinteiden sivujen rakentamiseen

Etusivu » Python » HTML-sisällön rakenne: täydellinen opas kiinteiden sivujen rakentamiseen

HTML-sisällön jäsentämisen oppiminen on ero sivun, joka vain "näyttää jotakin näytöllä", ja sivun, joka on helppo navigoida, saavutettava ja hakukoneoptimoitu. Kun HTML-koodisi on järjestetty selkeän hierarkian mukaisesti, selaimet, hakukoneet ja avustavat teknologiat ymmärtävät välittömästi, mitä kukin osio tarkoittaa ja miten se kaikki liittyy yhteen.

Sen sijaan, että ajattelisit HTML:ää vain tapana lisätä tageja sivulle, on hyödyllistä nähdä se dokumenttisi suunnitelmana. Vankan rakenteen avulla määrität, missä pääsisältösi sijaitsee, miten otsikot liittyvät toisiinsa, mitä on navigointi, mitkä ovat toissijaisia ​​tietoja ja mitkä osat kuvaavat itse dokumenttia otsikossa. Tässä oppaassa perehdymme syvällisesti HTML:n sisällön rakenteeseen: sivun globaalista rungosta otsikoihin, semantiikkaan, saavutettavuuteen ja joihinkin konkreettisiin asettelumalleihin tosielämän sivuille.

1. HTML-dokumentin globaali runko

Jokainen HTML-dokumentti alkaa samalla yleisrakenteella: doctype, html, head ja body. Tämä saattaa näyttää itsestäänselvyydeltä, mutta jokaisella osalla on ratkaiseva rooli siinä, miten selain jäsentää ja renderöi sisältöäsi ja miten hakukoneet tulkitsevat sivuasi.

Ensimmäinen rivi on doctype-deklaraatio, joka on kirjoitettu muodossa HTML5:ssä. Tämä käsky ei tuota näkyvää tulostetta; se käskee selainta käyttämään standarditilaa quirks-tilan sijaan, välttäen perinteisiä renderöintitoimintoja, jotka voivat täysin rikkoa asettelusi tai CSS:si.

Heti doctype-elementin jälkeen tulee juurielementti , joka rivittää koko dokumentin. Lähes kaikki – sekä dokumentin metatiedot että näkyvä sivu – sijaitsevat sen sisällä … Tässä kohtaa ilmoitat myös dokumentin ihmiskielen lang-attribuutin avulla, esimerkiksi englanniksi tai espanjaa Espanjasta.

Kielen määrittäminen lang-komennolla on olennaista esteettömyyden, hakukoneoptimoinnin ja käännöstyökalujen kannalta. Näytönlukijat käyttävät sitä oikeiden ääntämissääntöjen valitsemiseen, hakukoneet ja automaattiset kääntäjät käyttävät sitä ensisijaisen kielen ymmärtämiseen, ja CSS voi jopa kohdistaa kielikohtaisen tyylin käyttämällä valitsimia, kuten [lang|=”fr”] tai :lang(en).

Juurielementin html sisällä on aina kaksi suoraa alielementtiä: ja . Otsikko sisältää kaikki sivun tulkitsemiseen ja esittämiseen tarvittavat metatiedot ja resurssit (koodaus, otsikko, CSS, kuvakkeet, kanoniset URL-osoitteet jne.), kun taas runko sisältää sisällön, jonka käyttäjät tosiasiallisesti näkevät ja jonka kanssa he ovat vuorovaikutuksessa selainikkunassa.

2. Mikä kuuluu (ja miksi sillä on väliä)

Head-osio on näkymätön näkeville kävijöille, mutta se on ehdottoman tärkeä sivustosi toiminnan, suorituskyvyn ja sijoittumisen kannalta. Tänne antamasi tiedot opastavat hakukoneita, sosiaalisen median alustoja, selaimia ja laitteita sivusi käsittelyssä ja esittämisessä.

Yksi ensimmäisistä asioista sisällä pitäisi olla merkistökoodauksen määrittely käyttäen . UTF-8 on HTML5-standardi, joka tukee käytännössä kaikkia merkkejä ja emojeja ja varmistaa, että otsikot, teksti, CSS ja JavaScript tulkitaan oikein käyttämästäsi kielestä tai symboleista riippumatta.

Jokaisen sivun on myös määriteltävä yksilöllinen ja kuvaava elementti. Sisältö sisällä … näkyy selainvälilehdessä, kirjanmerkeissä, selainhistoriassa ja ennen kaikkea ensisijaisena napsautettavana otsikkona hakukoneiden tulossivuilla, ellei sitä korvata tietyillä metatunnisteilla. Hakukoneoptimoinnin näkökulmasta tämä on yksi asiakirjasi arvokkaimmista tekstiosista.

Toinen lähes pakollinen metaelementti nykyaikaisissa asetteluissa on viewport-deklaraatio. Käyttämällä Käsket mobiiliselaimia mukauttamaan asettelun laitteen leveyden mukaan sen sijaan, että työpöytäversio kutistuisi pienelle näytölle. Tämä on elintärkeää responsiivisen suunnittelun ja mobiili- ja esteettömyystarkastusten läpäisyn kannalta.

Merkistöjen, otsikoiden ja näyttöalueiden lisäksi otsikkoon (head) määritellään suurin osa metatiedoista, tyyleistä ja tärkeimmistä linkeistä. Tähän sisältyvät hakukoneoptimointiin keskittyvät metakuvaukset, CSS-tiedostot, sivuston kuvakkeet, vaihtoehtoiset kieliversiot, kanoniset URL-osoitteet, verkkosivustojen manifestit, esiyhteydet ja paljon muuta. Kaikki nämä osat vaikuttavat epäsuorasti siihen, miten sisällön rakenne ymmärretään ja kuinka käyttökelpoiselta sivustosi tuntuu.

Olennaiset metatiedot ja rakenteelliset resurssit

CSS on normaalisti kytketty sisäpuolelle käyttäen . Ulkoiset tyylitiedostot pitävät esityksen erillään rakenteesta, ne voidaan tallentaa välimuistiin useille sivuille paremman suorituskyvyn saavuttamiseksi ja ne auttavat ylläpitämään yhtä totuuden lähdettä suunnittelujärjestelmällesi.

Voit myös sisällyttää CSS:n block within , or even import additional stylesheets from there. Esimerkiksi kehittäjät käyttävät joskus @import-metodia tyylitagin sisällä sijoittaakseen tyylitiedoston tiettyyn kaskadikategoriaan tai määrittääkseen CSS:n mukautettuja ominaisuuksia (muuttujia) :root-tasolla ennen niihin viittaamista koko sivustolla.

The elementti palvelee muitakin tarkoituksia kuin vain tyylitiedostoina. Muuttamalla rel-attribuuttia voit osoittaa faviconiin rel=”icon”-metodilla, määrittää vaihtoehtoisia kieliversioita rel=”alternate”- ja hreflang-metodeilla, määrittää kanonisen URL-osoitteen rel=”canonical”-metodilla tai viitata sovellusten manifesteihin ja muihin suhteisiin, jotka selainten ja hakurobottien tulisi tietää.

Kuvakkeiden määrittely varmistaa, että brändisi on tunnistettavissa selaimen välilehdellä ja kirjanmerkeissä. Voit määrittää eri kokoja tai tyyppejä (kuten PNG tai SVG) ja jopa tarjota erityisiä kuvakkeita alustoille, kuten iOS, käyttämällä rel="apple-touch-icon" -asetusta tai peittää kiinnitettyjen välilehtien kuvakkeet Safarissa.

Vaihtoehtoiset linkit ovat ratkaisevan tärkeitä monikielisissä tai sisällön syndikointiympäristöissä. Kun käytät esimerkiksi kerrot hakukoneille, että samasta sivusta on olemassa ranskankielinen versio ja mihin kieli-/alueyhdistelmään se kohdistuu. Samoin vaihtoehtoiset linkit voivat osoittaa RSS-syötteisiin tai PDF-muunnelmiin, jos määrität sopivan tyypin.

Kanoniset URL-osoitteet, skriptit ja harvoin käytetyt

Kanoniset linkit, joissa on rel=”canonical”, auttavat ratkaisemaan päällekkäisen sisällön tilanteita osoittamalla, mikä URL-osoite on auktoriteettilähde. Jos sama artikkeli on olemassa useilla poluilla tai se on ristiinjulkaistu muilla verkkotunnuksilla, kanoninen URL-osoite yhdistää sijoitussignaaleja ja estää hakukonetta arvailemasta, mikä versio indeksoidaan.

JavaScript liitetään käyttämällä element, which can either embed inline code or reference an external file through the src attribute. Koska JavaScript estää oletuksena renderöinnin, monet kehittäjät sijoittavat komentosarjatunnisteet rungon loppuun tai käyttävät defer- tai async-attribuutteja, jotta HTML-sisältö voidaan renderöidä ennen komentosarjojen suorittamista.

Defer-attribuutti käskee selainta lataamaan skriptin estämättä renderöintiä ja suorittamaan sen HTML-koodin täydellisen jäsentämisen jälkeen. Async-tilassa sitä vastoin vältetään latauksen estyminen, mutta komentosarja suoritetaan heti sen valmistuttua, mikä voi keskeyttää jäsennysprosessin. Tämä voi olla ongelma, kun komentosarja on riippuvainen dokumentin myöhemmin määritellyistä DOM-elementeistä.

The elementti, joka näkyy vain otsikossa, määrittää perus-URL-osoitteen ja oletuskohteen kaikille suhteellisille linkeille. Asettamalla Käytännössä kerrot selaimelle, että jokainen sivun suhteellinen URL-osoite tulisi selvittää kyseisestä juuresta ja halutessaan avata tietyssä selauskontekstissa, kuten uudessa ikkunassa tai ylimmän tason kehyksessä.

Vaikka voi olla tehokas, sillä on sivuvaikutuksia, erityisesti sivun sisäisten ankkurilinkkien ja suhteellisten resurssipolkujen osalta. Dokumenttia kohden sallitaan vain yksi peruselementti, sen on oltava ennen kaikkia suhteellisia URL-osoitteita, ja se muuntaa yksinkertaiset ankkurit, kuten , täysiksi URL-pyynnöiksi, joissa on fragmentteja, jotka on liitetty perus-href-elementtiin.

3. Näkyvä sisältökerros: ja semanttinen asettelu

Kaikki, mitä käyttäjät todella näkevät ja minkä kanssa he ovat vuorovaikutuksessa, elää sisällään elementti. Tässä voit jäsentää sisältöäsi semanttisilla elementeillä, jotka kuvaavat sivun kunkin osan roolia: navigointi, pääsisältö, artikkelit, sivupalkit, alatunnisteet ja paljon muuta.

HTML5 esitteli joukon semanttisia asetteluelementtejä, jotka korvasivat yleiset astioita monissa tilanteissa. Elementtejä, kuten , , , , , ja kuvaile merkitystä pelkän ulkonäön sijaan, mikä auttaa avustavia teknologioita ja hakukoneita rakentamaan mielikuvan sivustasi.

sisältää tyypillisesti johdantosisältöä tai sivun tai tietyn osion navigointia. Tämä voi sisältää logon, sivuston otsikon, päävalikon tai sankariotsikon. Voit käyttää sivutason otsikkoa lähellä tekstin yläosaa ja lisäotsikoita osioiden tai artikkelien sisällä, kun tarvitset alajohdantoja.

on omistettu navigointilohkoille ja sitä käytetään yleensä tärkeissä valikoissa tai tärkeiden linkkien ryhmissä. Voit sijoittaa päänavigoinnin otsikon sisään, mutta nav voi näkyä myös muualla, esimerkiksi sivupalkissa tai alatunnisteessa, kunhan sitä käytetään navigointiin eikä yleisiin kokoelmiin toisiinsa liittymättömiä linkkejä.

merkitsee sivun ainutlaatuista, keskeistä sisältöä ja sen tulisi esiintyä vain kerran dokumenttia kohden. Pääsivulla järjestät sisältösi tyypillisesti seuraavasti: temaattisille lohkoille, itsenäisille artikkeleille, kuten blogikirjoituksille tai uutisille, ja asiaankuuluvia mutta toissijaisia ​​tietoja, kuten sivuhuomautuksia, mainoksia tai täydentäviä navigointielementtejä.

Osiot, artikkelit, sivut ja alatunnisteet

edustaa temaattisesti erillistä sisältölohkoa, jolla on yleensä oma otsikko. Tämä voi olla luku pitkässä artikkelissa, ”Ominaisuudet”-osio tuotesivulla tai osa kotisivuasi, kuten ”Suositukset” tai ”Hinnoittelu”. Osiot auttavat jakamaan monimutkaiset asiakirjat loogisiin osiin.

käytetään itsenäiselle sisällölle, joka voi toimia itsenäisesti ympäröivän kontekstin ulkopuolella. Esimerkkejä ovat blogikirjoitukset, dokumentaatiomerkinnät, käyttäjien kommentit, uutiset tai foorumiviestit. Artikkelilla on usein oma otsikko (otsikko, kirjoittaja ja päivämäärä) ja alatunniste (tunnisteet, jakolinkit tai metatiedot).

on varattu sisällölle, joka liittyy sivuajoittain pääsisältöön, kuten sivupalkit, lainaukset, aiheeseen liittyvät linkit tai mainosblokit. Koska sen tarkoitus on täydentävä, näytönlukuohjelmat ja muut työkalut voivat käsitellä sitä sen mukaisesti, ja käyttäjät voivat helpommin erottaa ydinkertomuksen toissijaisista lisämateriaaleista.

näkyy osan lopussa tai koko sivun alareunassa. Sivutason alatunniste sisältää yleensä tekijänoikeusilmoituksia, yhteystietoja, toissijaisen navigoinnin, lakilinkkejä tai sivuston tekijätietoja, kun taas artikkelitason alatunniste voi sisältää tekijöiden esittelyjä, luokkia, päivityspäivämääriä tai aiheeseen liittyviä julkaisuja.

Näiden elementtien joustavuuden ansiosta voit yhdistellä ja sisäkkäin sovittaa ne suunnitteluusi, mutta pitäytymällä niiden tarkoitetussa merkityksessä HTML-koodisi pysyy helposti mukana kannettavana ja ymmärrettävänä. Voit esimerkiksi sijoittaa nav-muuttujaa otsikon sisään tai muualle tekstiin, mutta nav-muuttujaa ei tule käyttää satunnaisille linkkijoukoille, jotka eivät ole osa navigointia, eikä main-muuttujaa tule käyttää useita kertoja sivulla.

4. Otsikkohierarkia ja tekstirakenne

Otsikot ovat sisältörakenteen selkäranka, ja ne määrittelevät aiheiden ja aliaiheiden hierarkian koko dokumentissa. HTML tarjoaa kuusi otsikkotasoa, alkaen (tärkeintä) aina (vähiten tärkeä), ja niiden järjestäminen vaikuttaa sekä ihmislukijoihin että hakukoneisiin.

Tyypillisesti on yksi joka ilmaisee sivun pääaiheen, jota seuraa ensisijaisille osille ja - syvempiä alaosioita varten. Kun kaksi otsikkoa on samalla tasolla, ne edustavat sisarusosioita, kun taas alemman tason otsikko esittelee sisäkkäisen aliosion edellisen ylemmän tason otsikon sisällä.

Otsikkoa seuraavat kappaleet ja muu sisältö kuuluvat kyseisen otsikon määrittelemään osioon. Kun saman tason uusi otsikko ilmestyy, edellinen osio katsotaan suljetuksi ja uusi alkaa. Tätä implisiittistä rakennetta avustavat teknologiat käyttävät luodakseen jäsennyksen, jonka läpi käyttäjät voivat hypätä nopeasti.

Tasojen mielivaltainen ohittaminen – kuten hyppääminen suoraan tasolta h1 tasolle h4 – voi hämmentää sekä automatisoituja työkaluja että lukijoita. Yleinen suositus on edetä hierarkiassa askel askeleelta: alaosioissa tasolta h1 tasolle h2, sitten valinnaisesti tasolle h3 ja niin edelleen, alemmaksi vain yksi taso kerrallaan, kun sisältöä sisäkkäin sijoitetaan syvemmälle.

Selaimet käyttävät otsikoihin yleensä oletustyylejä: suurempia fonttikokoja, lihavointia ja tavallista suurempaa pystysuoraa riviväliä. Nämä sisäänrakennetut tyylit tekevät rakenteesta jo visuaalisesti selkeän, mutta voit tarkentaa esitystä CSS:llä säilyttäen samalla taustalla olevan semanttisen hierarkian.

Kappaleet, luettelot ja riviin sidottu semantiikka

Normaali tekstisisältö menee sisään elementtejä, joista jokainen edustaa erillistä kappaletta. Yhden pääajatuksen pitäminen kappaletta kohden parantaa luettavuutta ja on linjassa sen kanssa, miten avustavat teknologiat mahdollistavat käyttäjien navigoinnin tekstilohkoissa.

Järjestetyt listat ( ) ja järjestämättömät listat ( ) kanssa kohteet sopivat ihanteellisesti ryhmitellyille tiedoille, kuten vaiheille, ominaisuuksille tai usein kysytyille kysymyksiin. Järjestetyt luettelot välittävät järjestyksen tai prioriteetin, kun taas järjestämättömät luettelot yksinkertaisesti ryhmittelevät toisiinsa liittyviä kohteita ilman järjestystä; molemmat ovat erittäin hyödyllisiä monimutkaisten selitysten jäsentämisessä.

Tekstiin upotetut elementit, kuten , , ja muut, rikastuttavat sisältöä katkaisematta kappaleen rytmiä. viestii vahvasti tärkeistä asioista (ja yleensä näkyy lihavoituna), korostaa tekstiä (usein kursiivilla) ja luo hyperlinkkejä, jotka yhdistävät sivustosi eri osien asiakirjoja tai ulkoisiin resursseihin.

Kuvat, joissa on pidetään korvattuina elementteinä eivätkä ne rivitä sisältöä, mutta ne osallistuvat silti semanttiseen rakenteeseen attribuuttien, kuten alt, kautta. Alt-attribuutti on erityisen tärkeä saavutettavuuden ja hakukoneoptimoinnin kannalta, koska se kuvaa kuvaa käyttäjille, jotka eivät näe sitä, ja hakukoneille, jotka vain jäsentävät tekstiä.

Lohkotason ja rivikohtaisten elementtien harkittu yhdistäminen mahdollistaa hierarkian, suhteiden ja painotusten ilmaisemisen pelkästään HTML:n avulla, jättäen visuaaliset yksityiskohdat, kuten värit, fontit ja välistyksen, CSS:lle. Tämä huolenaiheiden erottelu pitää merkinnät siisteinä ja helpottaa suunnittelumuutoksia myöhemmin.

5. Saavutettavuus ja kieli sisällön rakenteessa

Hyvin jäsennelty HTML-dokumentti ei ole vain siistin ulkonäön kannalta tärkeä; se on edellytys saavutettavuudelle. Näytönlukijoita, näppäimistönavigointia tai muita avustavia teknologioita käyttävät ihmiset ovat riippuvaisia ​​HTML-semantiikastasi ymmärtääkseen sisältöä ja liikkuakseen siinä tehokkaasti.

Asiakirjan kielen määrittäminen lang-komennolla elementti on yksi ensimmäisistä esteettömyysvaiheista. Kun kieli on eksplisiittistä, näytönlukijat valitsevat oikean ääntämisen ja sanakirjat, ja automaattiset käännöstyökalut käsittelevät sisältöäsi tarkemmin eri alueilla ja murteissa.

Voit myös merkitä kielen muutoksia tekstin sisällä käyttämällä lang-attribuuttia elementeissä, kuten tai . Kun katkelma vaihtuu eri kielelle, lang=”fr-CA”- tai lang=”pt-BR”-määritteen asettaminen kyseiselle katkelmalle viestittää apuvälineille, että ääntämis- ja lukusääntöjen tulisi muuttua vain kyseisen osan osalta.

Kielen lisäksi otsikot, maamerkkielementit ja vaihtoehtoinen teksti muodostavat esteettömän rakenteen ytimen. Selkeä otsikkohierarkia, pääosion, navigointiosion, ylätunnisteen, alatunnisteen, osion ja sivuosioiden oikea käyttö sekä kuvien merkitykselliset alt-attribuutit mahdollistavat avustavien teknologioiden avulla hahmotelman luomisen ja maamerkkinavigoinnin, kuten "siirry pääsisältöön" tai "siirry navigointiin".

Pelkän värin ja visuaalisen ilmeen ei pitäisi koskaan olla ainoa tapa välittää tärkeää tietoa. Suuri kontrasti, luettavat fonttikoot, interaktiivisten elementtien kohdistustilat ja kuvaavat linkkitekstit, kuten "Lue lisää palontorjunnasta" pelkän "Klikkaa tästä" sijaan, ovat kaikki osa sitä, että strukturoidusta sisällöstäsi tulee mahdollisimman monen ihmisen käytettävissä.

HTML-koodin validointi ja saavutettavuustarkistusten suorittaminen automatisoitujen työkalujen ja manuaalisten testien avulla auttaa paljastamaan rakenteellisia ongelmia varhaisessa vaiheessa. Työkalut voivat havaita puuttuvat alt-attribuutit, virheelliset sisäkkäisyydet, rikkinäiset otsikkosarjat tai virheellisen maamerkkien käytön, ja kaikki nämä voidaan korjata suoraan merkinnöissäsi ennen kuin ne vaikuttavat todellisiin käyttäjiin.

6. Verkkosivuston sisällön rakenteen suunnittelu

Ennen kuin kirjoitat yhdenkään tagin, kannattaa suunnitella sivustosi ja sivujesi looginen rakenne. Osioiden, tiedon prioriteettien ja navigointivirtojen ajattelu johtaa HTML:ään, jota on helpompi ylläpitää, laajentaa ja optimoida hakukoneille.

Yleinen lähtökohta on luonnostella verkkosivuston sivukartta tai rakennekaavio. Tämä sisältää yleensä ylimmän tason sivut, kuten Etusivu, Tietoja meistä, Palvelut, Blogi ja Yhteystiedot, ja sitten kaikki näistä haarautuvat alisivut tai kategoriat, jotka näyttävät, miten käyttäjät liikkuvat niiden välillä.

Yhden sivun sisällä voit suunnitella tulevan HTML-rakenteen sarjana semanttisia lohkoja. Voit esimerkiksi määrittää otsikon, jossa on logo ja navigointi, pääalueen, jossa on useita osioita (sankari, ominaisuudet, suosittelut, hinnoittelu), sivun toissijaiselle sisällölle ja alatunnisteen, joka sisältää yhteystiedot ja oikeudelliset linkit.

Otsikoiden määrittäminen näille lohkoille varhaisessa vaiheessa pitää h1-h6-hierarkian yhtenäisenä. Päätät etukäteen, mikä on yksittäinen h1-otsikko, mitkä osiot ansaitsevat h2-otsikot ja missä tarvitaan syvempiä alaotsikoita, kuten h3 tai h4, selittämään monimutkaisia ​​aiheita ilman, että lukija ylikuormittuu.

Hakukoneoptimoinnin ja käyttökokemuksen näkökulmasta on fiksua sijoittaa keskeinen sisältö ja tärkeät osiot aikaisemmaksi DOM:ssa. Hakukoneet kiinnittävät yleensä enemmän huomiota asiakirjan yläosassa olevaan sisältöön, ja käyttäjät arvostavat sitä, että he löytävät tärkeimmät tiedot nopeasti sen sijaan, että he selaisivat pitkien johdantojen tai koriste-elementtien ohi.

Ylläpidettävien HTML-rakenteiden parhaat käytännöt

Käytä kuvaavia luokkanimiä ja tunnisteita rakenneosien merkitsemiseen tarvittaessa, mutta vältä div-elementtien liian suurta sisäkkäisyyttä. Luokat, kuten .main-nav, .site-header tai .sidebar, kertovat yhdellä silmäyksellä, mitä komponentti tekee, mikä tekee HTML- ja CSS-koodistasi paljon helpommin luettavan kuukausienkin kuluttua.

Pidä HTML-koodisi mahdollisimman tasaisena ja ilmaise silti aitoa hierarkiaa. Syvälle sisäkkäiset säilöt, jotka ovat olemassa vain tyyliä varten, voidaan usein korvata harkituimmalla CSS:llä, mikä johtaa siistimpään ja kevyempään merkintään, jonka kanssa kaikkien on helpompi työskennellä.

Ryhmittele toisiinsa liittyvä sisältö semanttisten elementtien sisään sen sijaan, että hajauttaisit sitä sivun eri osiin. Esimerkiksi blogikirjoituksen tulisi sijaita artikkelin sisällä, otsikko, päivämäärä, kirjoittaja ja sisältö yhdessä, kun taas aiheeseen liittyvät julkaisut tai kirjoittajan esittely voivat sijaita sivupalkissa tai artikkelin alatunnisteessa, selkeästi erillään pääkertomuksesta.

Tarkista rakennettasi aina, kun laajennat sivua tai suunnittelet osan uudelleen. HTML-dokumentteihin on helppo kerryttää kertaluonteisia kääreitä ja ad-hoc-elementtejä ajan myötä, joten niiden säännöllinen palauttaminen yhtenäiseen semanttiseen muotoon kannattaa ylläpidettävyyden, suorituskyvyn ja saavutettavuuden kannalta.

Rakennemallien – kuten otsikoiden, osioiden, artikkelien ja alatunnisteiden – dokumentointi auttaa pitämään suuret tiimit yhtenäisinä. Pieni sisäinen ohje, joka selittää, mitä elementtejä käytetään navigoinnissa, miten otsikot järjestetään ja miten toistuvat komponentit merkitään, voi estää koodikantaasi muuttumasta rakenteelliseksi tilkkutäkiksi.

7. Käytännön rakennemallit yleisille sivutyypeille

Erilaisilla sivuilla on usein yhteisiä rakenteellisia malleja, joita voi käyttää uudelleen ja soveltaa eri projekteissa. Näiden mallien tunnistaminen auttaa sinua suunnittelemaan sisältörakenteita, jotka tuntuvat käyttäjille luonnollisilta ja ovat helppoja toteuttaa HTML:llä.

Tyypillinen kotisivu voi alkaa globaalilla joka sisältää logon ja pääasiallisen . Tätä seuraa usein useilla lohkot: pääosio h1:llä ja toimintakehotuksella, ominaisuusosio, ehkä osio suositteluille ja viimeinen osio, jossa käyttäjiä kutsutaan ottamaan yhteyttä tai rekisteröitymään.

Pääsisällön alapuolella on tarjoaa yleensä globaalia tietoa ja täydentävää navigointia. Linkit tietosuojakäytäntöihin, palveluehtoihin, yhteydenottovaihtoehtoihin, sosiaalisiin verkostoihin ja toissijaisiin valikoihin sijaitsevat täällä, joten ne on helppo löytää häiritsemättä yllä olevaa pääsisältöä.

Blogikirjoitussivu on täydellinen ehdokas tähän tarkoitukseen. elementti. Artikkeli sisältää yleensä oman ylätunnisteen, jossa on artikkelin otsikko (usein sivun h1-aloitusteksti), julkaisupäivämäärä ja kirjoittajan tiedot. Sen jälkeen tulee artikkelin leipäteksti, joka on jaettu h2/h3-otsikoilla varustettuihin osiin, ja lopuksi artikkelin alatunniste, joka sisältää tunnisteita, jakopainikkeita tai aiheeseen liittyviä sisältölinkkejä.

Sivupalkkeja tai toissijaisia ​​paneeleita edustaa luonnollisesti elementtejä. Ne voivat sisältää luetteloita viimeisimmistä julkaisuista, luokkasuodattimia, uutiskirjeen tilauslomakkeita tai kontekstuaalista apua. Koska sivusisältö on semanttisesti merkitty täydentäväksi sisällöksi, avustavat teknologiat voivat esittää sen sellaisena käyttäjille.

Yhteydenottosivut ja palvelusivut käyttävät samoja rakennuspalikoita uudelleen, mutta korostavat selkeyttä ja vuorovaikutuksen helppoutta. Selkeät otsikot, ytimekkäät kappaleet, oikein nimetyt lomakekomponentit ja looginen lukujärjestys varmistavat, että käyttäjät löytävät sinut tai ymmärtävät tarjouksesi ilman arvailua.

8. HTML-elementit, attribuutit ja niiden rooli rakenteessa

Kaikkien näiden mallien alla kaikki HTML:ssä tiivistyy elementteihin, tageihin ja attribuutteihin. Ymmärtämällä, miten ne toimivat yhdessä, saat tarkan hallinnan sisällön rakenteesta, esitystapasi koukkuista ja toiminnasta.

HTML-elementti koostuu avaustagista, valinnaisista attribuuteista, jostakin sisällöstä ja useimmissa tapauksissa sulkevasta tagista. Esimerkiksi, Tämä on kappale. sisältää aloitustunnisteen , tekstisolmu ja lopetustunniste , jotka kaikki yhdessä edustavat kappaleelementtiä.

Attribuutit näkyvät avaustunnisteen sisällä ja antavat lisätietoja elementistä. Ne tulevat muodossa name=”value”-parit, kuten class=”highlight”, id=”intro” tai href=”/contact”. Jotkin attribuutit ovat globaaleja ja voivat esiintyä missä tahansa elementissä (kuten class, id, lang), kun taas toiset ovat tiettyihin tageihin liittyviä (kuten src kuvalle tai type syötteelle).

Luokat ovat erityisen tärkeitä suurempien dokumenttien jäsentämisessä ja muotoilussa. Määrittämällä saman luokan useille elementeille – esimerkiksi class=”important” – voit soveltaa yleisiä CSS-sääntöjä tai kohdistaa ne JavaScriptissä, pitäen rakenteesi joustavana ja silti hallittavana.

Kaikki elementit eivät tarvitse sulkevia tageja; jotkut ovat tyhjiä (void) elementtejä, joilla ei ole sisältöä. Elementtejä, kuten , , ja kuuluvat tähän kategoriaan. Ne osallistuvat edelleen rakenteeseesi, mutta vain attribuuttien kautta, koska ne eivät rivitä sisäistä tekstiä tai lapsielementtejä.

World Wide Web Consortium (W3C) ylläpitää spesifikaatiota, joka määrittelee, miten kaikki nämä elementit ja attribuutit toimivat yhdessä. Näiden standardien noudattaminen pitää sivusi yhteentoimivina eri selainten ja laitteiden välillä ja varmistaa, että huolellisesti suunniteltu sisältörakenne toimii ennustettavasti jokaiselle kävijälle.

Kaiken tämän toteuttaminen käytännössä tarkoittaa HTML:n käyttämistä sivustosi semanttisena selkärankana: selkeä dokumentin jäsennys, otsikoiden tarkka käyttö, harkittu asettelu päätekstillä, osiolla, artikkelilla, sivutunnisteella ja alatunnisteella, helppokäyttöiset metatiedot otsikossa ja merkitykselliset attribuutit jokaisessa elementissä tekevät sisällöstäsi helpommin luettavaa, navigoitavaa ja sijoittuvat hyvin hakukoneissa.