HTML5-sivun rakenne. Väärä lomakemääritteiden käyttö. Huomioita luonnosta

Tässä me katsomme yleiset virheet HTML5-merkinnöissä semanttisesta näkökulmasta ja miten niitä voidaan välttää.

Tarkastellessani HTML5-sivustogallerian sivustoja ja vastaten käyttäjien kysymyksiin, näin paljon sivustoja, joissa oli HTML5-merkintä. Tässä artikkelissa näytän sinulle joitain virheitä ja huonoja merkintäkäytäntöjä, joita olen nähnyt usein, ja selitän, kuinka voit välttää ne.

Älä käytä tunnistetta muotoilun kääreenä Yksi yleisimmistä ongelmista, jotka olen huomannut, on "s:n" banaali korvaaminen HTML5-rakenneelementeillä, erityisesti "s:llä. Nuo. kun XHTML- tai HTML4-kieli näyttää tältä:
Super duper -sivuni Kirjoita uudelleen näin:
Se on vain väärin: ei kääre. Tämä elementti viittaa sisältösi semanttiseen lohkoon, jota käytetään "asiakirjan ääriviivan" luomiseen ja jonka täytyy sisältää otsikko. Jos tarvitset kääreelementin, yritä pärjätä (Kroc Kamenilla on jotain tarjottavaa). Jos tämä ei ratkaise lisäkääreiden tarvetta, käytä vanhoja kunnon "s. HTML5":t eivät kuolleet, ja ne ovat täydellisiä tässä tapauksessa.

Ottaen huomioon kaikki edellä mainitut, olisi hyvä merkitä yllä oleva esimerkki HTML5:llä seuraavasti:
Super duper-sivuni

Jos et ole varma mitä elementtiä kannattaa käyttää, suosittelen käyttämään elementtivalinnan vuokaaviota ( noin kääntäjä: katso merkinnän alareunasta).

Käytä ja vain tarvittaessa Ei ole mitään järkeä kirjoittaa koodia, jos se ei ole välttämätöntä, eikö niin? Valitettavasti huomaan usein, kuinka ja missä niitä ei tarvita. Voit lukea elementeistä tarkemmin, mutta hahmotan lyhyesti tärkeimmät kohdat:

• Elementti edustaa johdanto- tai navigointiapujen ryhmää ja sisältää yleensä osion otsikon
• Elementti ryhmittelee joukon elementtejä - edustaen osion otsikkoa, jos se koostuu useista tasoista (alaotsikot, vaihtoehtoiset otsikot jne.)

Ylimääräiset elementit Kuten olen varma, että tiedät hyvin, elementtiä voidaan käyttää useita kertoja asiakirjassa. Siksi näin tapahtuu usein:
Paras blogikirjoitukseni

Jos omasi sisältää vain yhden otsikkoelementin, sitä ei tarvita. SISÄÄN tässä tapauksessa elementti takaa jo sen, että otsikko sisällytetään dokumentin ääriviivaan, ja koska se ei sisällä useita elementtejä (määritelmän mukaan), se voidaan poistaa turvallisesti. Yksinkertaisesti tämä riittää:
Paras blogikirjoitukseni

Väärä käyttö Ja vielä otsikoista: Näen usein elementtiä käytetyn väärin. Ei saa käyttää yhdessä, jos:

• On vain yksi otsikko
• hyvä sellaisenaan (eli ilman).

Ensimmäinen tapaus:
Paras blogikirjoitukseni

Kirjailija: Rich Clark

Tässä tapauksessa poista vain h-ryhmä.
Paras blogikirjoitukseni

Kirjailija: Rich Clark

Toinen tapaus on toinen esimerkki elementin tarpeettomasta käytöstä.
Yritykseni on perustettu 1893

Jos sinulla on ainoa lapsi, "ja siksi tarvitset sitä, jos sinulla ei ole lisäelementtejä"e:ssä (eli sisaressa), poista vain .
Yritykseni on perustettu 1893

Älä kehystä kaikkia linkkejä HTML5:ssä esitteli 30 uutta elementtiä, jotka antavat meille mahdollisuuden luoda jäsenneltyjä ja merkityksellisiä merkintöjä. Mutta uusia semanttisia elementtejä ei pidä käyttää liikaa. Valitettavasti juuri näin tapahtuu . Määrittely kuvaa sitä seuraavasti: Nav-elementti edustaa sivun osaa, joka linkittää sen muille sivuille tai nykyisen sivun osiin (osio, jossa on navigointilinkkejä).

Huomautus: Kaikkia linkkiryhmiä ei tule sijoittaa nav-elementtiin. Sitä tulisi käyttää perusnavigointiin. Usein alatunnisteessa on pieni luettelo linkeistä erilaisia ​​sivuja sivusto (etusivu, ohje, käyttöehdot, jne). Tässä tapauksessa yhden alatunnisteen pitäisi riittää. Vaikka mikään ei estä sinua käyttämästä navia, se ei ole välttämätöntä.

WHATWG HTML spec

Avainlause- "päänavigointi". Siitä, mitä pääasialla tarkoitetaan, voi kiistellä pitkään, mutta minulle se on:

• Ensisijainen navigointi
• Sivustohaku
• Toissijainen navigointi (kiistanalainen)
• Sivun sisäinen navigointi (esimerkiksi pitkän artikkelin sisällä)

Vaikka tässä tapauksessa on vaikea arvioida, mikä on oikein ja mikä väärin, mielestäni ei pidä päätellä:

• Sivun vaihtajat
• Sosiaaliset linkit(vaikka poikkeuksia saattaa olla tapauksissa, joissa sosiaaliset linkit ovat pääasiallinen navigointi. Esimerkiksi sivustot, kuten about.me tai flavors.me)
• Lähetä tunnisteet
• Viestiluokat
• Kolmannen asteen navigointi
• Äänenvoimakkuuden alatunnisteet

Jos et ole varma, haluatko kehystää linkkiluettelosi , kysy itseltäsi: "Onko tämä päänavigointi?" Huomioi seuraavat asiat:

• "Älä käytä, jos luulet, että nimikin toimisi" - Hixie IRC:llä
• Ehkä meidän pitäisi lisätä "Siirry" mukavuuden vuoksi?

Jos vastaus näihin kysymyksiin on "Ei", tämä ei todennäköisesti ole oikea paikka . Yleisiä virheitä elementin Ah, käytössä. Tämän elementin oikean käytön ymmärtäminen, kuten sen veli, ei ole helppoa. Katsotaanpa joitain yleisiä virheitä koskien tätä elementtiä Ei jokaista kuvaa Aikaisemmin en neuvonut kirjoittamaan enemmän koodia kuin on tarpeen. Tilanne on samanlainen täällä. Olen nähnyt sivustoja, joissa jokainen kuva on kehystetty. Älä käytä enemmän merkintöjä vain käyttääksesi enemmän merkintöjä. Luot vain itsellesi lisää töitä, mutta älä paranna sisältösi kuvausta millään tavalla.

Määrittelyssä se kuvataan "itsenäiseksi sisällöksi, jossa on mahdollisesti otsikko ja tyypillisesti itsenäinen vuoelementti". Tässä se on, kaikki kauneus - elementti voidaan helposti siirtää pääsisällöstä esimerkiksi sivupalkkiin.

Yllä oleva elementtivalinnan vuokaavio auttaa sinua käsittelemään .

Jos kuva on tarkoitettu vain esitystarkoituksiin eikä siihen viitata missään asiakirjassa, se ei todellakaan ole . Muussa tapauksessa kysy itseltäsi kysymys: "Onko tämä kuva nykyisessä kontekstissa tarpeen ymmärtämiseksi?" Jos ei, se ei ilmeisesti ole (mahdollisesti). Jos on, kysy itseltäsi: "Voinko siirtää tämän sovellukseen?" Jos vastaus molempiin kysymyksiin on kyllä, se saattaa toimia.

Logosi ei ole Sama pätee logoon. Näen usein tämän sovelluksen:
Yritykseni nimi
Ei tähän mitään lisättävää. Tämä ei yksinkertaisesti ole totta. Voit kiistellä pitkään siitä, pitäisikö logo olla mukana, mutta emme puhu siitä nyt. Todellinen virhe on liiallinen käyttö. tulee käyttää vain, kun viittaat siihen asiakirjassa. On epätodennäköistä, että linkität logoosi missään. Tämä riittää:
Yritykseni nimi voi olla muutakin kuin pelkkä kuva Toinen yleinen väärinkäsitys elementistä on oletus, että sitä voidaan käyttää vain kuviin. Mutta se ei ole totta. Se voi sisältää videota, ääntä, grafiikkaa (esimerkiksi SVG-muodossa), lainauksen, taulukon, koodilohkon, runon tai minkä tahansa edellä mainitun yhdistelmän. Älä rajoita itseäsi vain kuviin. Tehtävämme verkkostandardien kannattajina on kuvata merkintöjemme sisältö.

Ei kauan sitten kirjoitin elementistä tarkemmin. Suosittelen lukemaan sen, jos haluat ymmärtää sitä paremmin tai virkistää muistojasi.

Älä käytä tarpeettomia tyyppi-attribuutti Tämä on ehkä yleisin HTML5-galleriassa havaittu ongelma. Vaikka tämä ei ole bugi, mielestäni on parasta välttää sitä.

HTML5:ssä ei tarvitse määrittää type-attribuuttia elementeille ja elementeille. Vaikka niistä voi olla vaikea päästä eroon, jos sisällönhallintajärjestelmä lisää ne automaattisesti, ei ole mitään järkeä sisällyttää niitä koodiin, jos kirjoitat sen itse tai pystyt hallitsemaan malleja. Koska Kaikki selaimet olettavat oletuksena, että kaikki komentosarjat on kirjoitettu JavaScriptillä ja tyylit ovat CSS:ää, tällainen merkintä tulee tarpeettomaksi:

Sen sijaan voit kirjoittaa:

Muun muassa voit myös vähentää koodauksen määrittämiseen kuluvan koodin määrää. Mark Pilgrimin luku semantiikkasta Dive to HTML5:ssä kuvaa kaikkia tällaisia ​​käytäntöjä.

Lomakeattribuuttien virheellinen käyttö Saatat jo tietää, että HTML5 sisältää monia uusia lomakemääritteitä. Tarkastelemme niitä lähitulevaisuudessa, mutta nyt kerron lyhyesti, mitä ei pidä tehdä Loogiset attribuutit Myös multimediaelementeille ja muille löytyy loogisia attribuutteja. Kuvaamani säännöt koskevat myös heitä.

Osa uusista lomakemääritteistä on loogisia, ts. niiden läsnäolo merkinnöissä määrittää elementtien käyttäytymisen. Mukaan lukien tämä:

• automaattitarkennus
• automaattinen täydennys
• edellytetään

Näen niitä harvoin, mutta pakollisen tapauksessa näin tämän:

Loppujen lopuksi tämä ei uhkaa mitään pahaa. Asiakas HTML-jäsennin kohtaa vaaditun attribuutin merkinnöissä ja soveltaa asianmukaisia ​​sääntöjä. Mutta entä jos teemme sen toisin ja kirjoitamme vaaditun="false"?

Jäsentäjä näkee silti vaaditun määritteen ja käyttää asianmukaista toimintaa, vaikka kieltäisitkin. Ilmeisesti tämä ei ole sitä mitä halusit.

Boolen arvoa voidaan käyttää kolmella tavalla: (toinen ja kolmas ovat tyypillisiä XHTML:lle)

• edellytetään
• pakollinen=""
• pakollinen="pakollinen="

Yllä olevaan esimerkkiimme liittyen voisimme kirjoittaa tämän (HTML:llä):

Tunnisteet:

• html5
• layout
• semantiikka

Lisää tageja

Minun on pakko katsoa koko joukko HTML5-sivuja ja tietysti heidän lähde. Tässä artikkelissa kerron sinulle usein näkemistäni virheistä ja kyseenalaisista merkinnöistä ja selitän, kuinka ne vältetään.

Älä käytä kääreenä koristeluun

Yksi yleisimmistä ongelmista, joita näen usein verkkosivustojen merkinnöissä, on elementtien mielivaltainen korvaaminen HTML5:n rakenneelementeillä, erityisesti suunnittelun kääreen korvaaminen . XHTML:ssä tai HTML4:ssä näkisin jotain tällaista:

Super duper-sivuni

Sen sijaan näen tämän:

Rehellisesti sanottuna tämä on väärin: - tämä ei ole kääre. Elementti määrittää merkityksellisen osan sisällöstä asiakirjarakenteen luomiseksi. Sen tulee sisältää otsikko. Jos etsit elementtiä koko sivun käärimiseen HTML-tyyli tai XHTML), harkitse tyylien käyttämistä suoraan elementtiin Kroc Kamenin kuvauksen mukaisesti. Jos tarvitset vielä lisäkäärettä, käytä . Koska tohtori Mike selittää, ettei hän ole kuollut, etkä löydä mitään parempaa, ehkä tämä elementti on sopivin suunnittelukääreen luomiseen.

Näin ollen oikea merkintä yllä mainitulle esimerkille käyttämällä HTML5:tä ja ARIA-rooliparia olisi seuraava koodi. Huomaa, että suunnittelusta riippuen saatat silti tarvita lisäelementtejä.

Super duper-sivuni

Jos et ole varma, mitä elementtejä kannattaa käyttää, suosittelen tutustumaan vaiheittaiseen oppaaseemme HTML5-elementtien valitsemisesta sisältösi merkitsemiseksi.

Käytä sitä tietoisesti

Elementti on poistettu HTML5-määrityksestä, eikä sitä suositella käytettäväksi, noin toimittaja

Ei ole mitään järkeä kirjoittaa merkintöjä, jos sinun ei ole pakko, eikö niin? Valitettavasti näen usein elementtejä siellä, missä niitä ei tarvita ollenkaan. Löydät kaikki yksityiskohdat elementtejä ja elementtejä koskevista artikkeleistamme, mutta teen lyhyen yhteenvedon:

• Elementti on joukko johdantosisältöjä tai navigointiapuvälineitä, ja se sisältää yleensä rakenteellisen otsikon.
• Elementti ryhmittelee joukon elementtejä välillä - , mikä edustaa rakenneotsikkoa siinä tapauksessa, että otsikolla on useita tasoja, kuten alaotsikoita, vaihtoehtoisia nimiä tai iskulauseita.

Väärinkäyttö

Luulen, että tiedät, että voit käyttää sitä useita kertoja asiakirjassa. Mutta tämä mahdollisuus johti seuraavat virheet:

Minun paras postaus

Jos omasi sisältää yhden otsikon, poista tarpeettomat . Joka tapauksessa elementti takaa, että otsikko sisällytetään dokumentin semanttiseen rakenteeseen. Ja koska se ei sisällä useita elementtejä, kuten sen kuvauksessa mainitaan, miksi tarvitset koodia, jota ei yleensä tarvita? Pidä se yksinkertaisena:

Paras postaukseni

Väärinkäyttö

Kun käsittelemme otsikoita, näen usein . Ei saa käyttää yhdessä kun:

• on vain yksi alaotsikko tai
• elementti riittää ilman .

Ensimmäinen ongelma näyttää tältä:

Paras postaukseni

Richard Clark

Tässä tapauksessa sinun tulee päästä eroon siitä ja jättää vain otsikko:

Paras postaukseni

Richard Clark

Seuraava ongelma on elementtien toistuva käyttö silloin, kun ne ovat valinnaisia:

Yritykseni Perustettu 1893

Kun se on ainoa lapsielementti, mitä järkeä sillä on? Jos vieressä ei ole lisäelementtejä, voit vapaasti päästä eroon.

Yritykseni Perustettu 1893

Löydät lisää käyttöesimerkkejä.

Älä kääri kaikkia linkkiluetteloita

Kirjoitushetkellä yli 30 uutta elementtiä ei ole ihme, että olemme hämmentyneitä merkityksellisten rakenteellisten merkintöjen luomisessa. Siksi kaikkia tällä hetkellä saatavilla olevia supersemanttisia elementtejä ei pidä käyttää liikaa. Mitä valitettavasti usein tapahtuu . Erittely määrittelee roolin seuraavasti:

Elementti on sivun osa, joka linkittää muille sivuille tai nykyisen sivun osiin, eli osio, jossa on navigointilinkkejä.

Huomautus: kaikkia sivun linkkiryhmiä ei tarvitse kääriä elementtiin - tämä elementti on tarkoitettu pääasiassa päänavigointilohkojen ryhmittelyyn. Erityisesti alatunnisteet sisältävät usein lyhyitä linkkejä sivuston eri osiin, kuten palvelun käyttösäännöt, kotisivu ja tekijänoikeudet. Elementti riittää tällaisten linkkien ryhmittelyyn; ja vaikka elementtiä voidaan käyttää tällaisissa tapauksissa, se ei yleensä ole välttämätöntä.

Avainlause on "päänavigointilohkot". Voimme keskustella koko päivän sanan "päämies" merkityksestä, mutta minulle se tarkoittaa:

• Eniten päänavigointi;
• Sivustohaku;
• Toissijainen navigointi (mikä on kiistanalainen);
• Sisäinen navigointi (esimerkiksi pitkän artikkelin kautta).

Vaikka tässä ei välttämättä olekaan "oikeaa" tai "väärää" käyttöä, satunnainen kysely yhdistettynä omaan tulkintaan viittaa siihen, että seuraavat tapaukset eivät sovellu käytettäväksi:

• Sivun navigointi;
• Sosiaaliset linkit, elleivät tällaiset linkit ole päänavigaattori esimerkiksi About me- ja Flavours-sivustoilla;
• Blogitekstitunnisteet;
• Record luokat;
• Kolmannen tason navigointi;
• Alatunnisteet täynnä linkkejä.

Jos et ole varma, haluatko kääriä linkkiluettelosi -tekstiin, kysy itseltäsi: "Onko tämä päänavigointi?" Jotta tähän kysymykseen olisi helpompi vastata, noudata seuraavia sääntöjä:

• "Älä käytä , jos näyttää siltä, ​​että otsikko saattaa toimia myös tässä tapauksessa", - Ian Hickson, IRC.
• Lisäätkö tämän lohkon "seuraa"-linkkien luetteloon saavutettavuuden parantamiseksi?

Jos vastaus molempiin kysymyksiin on "ei", niin se ei todennäköisesti ole.

Yleisiä elementtivirheitä

Ah, . Oikea käyttö Tämä elementti yhdessä rikoskumppanin kanssa ei ole niin helppo hallita. Katsotaanpa joitain yleisiä ongelmia jonka näen käyttäessäni.

Ei jokainen kuva ole

Aiemmin neuvoin, ettet kirjoita tarpeetonta koodia sinne, missä sitä ei vaadita. Sama vika täällä. Olen nähnyt sivustoja, joissa jokainen kuva on kääritty. Kuvien ympärille ei tarvitse lisätä ylimääräisiä merkintöjä vain sen vuoksi. Teet vain ylimääräistä työtä etkä paranna sivun sisällön kuvausta ollenkaan.

Määrittely viittaa "virran sisältöön, valinnaisesti nimettyyn, itsenäiseen, johon yleensä viitataan päätekstin merkitysyksikkönä". Tämä on juuri elementin kauneus, joka voidaan siirtää pääsisällöstä esimerkiksi sarakkeeseen vaikuttamatta asiakirjan pääkulkuun.

Jos tämä on puhtaasti suunnittelukuva, jota ei mainita millään tavalla pääasiakirjassa, se ei todellakaan ole . On olemassa muitakin käyttötarkoituksia, mutta kysy itseltäsi: "Tarvitaanko tätä kuvaa parempi ymmärrys konteksti? Jos ei, niin luultavasti ei, mutta ehkä. Jos on, kysy itseltäsi: "Voidaanko tämä kuva siirtää tekstimuistiinpanoihin?" Jos vastaus molempiin kysymyksiin on "kyllä", se on todennäköisimmin .

Logosi ei ole

Siirry sujuvasti kohtaan seuraava ongelma, yllä olevat säännöt koskevat myös häntä. Tässä pari säännöllisesti törmäävää esimerkkiä:

Yrityksen nimi

Tähän ei ole mitään lisättävää: tämä on täysin väärin. Voimme kiistellä kunnes olemme sinisilmäisiä siitä, pitäisikö logon olla sisäpuolella, mutta sitä varten emme ole täällä. Todellinen ongelma on väärinkäyttö. Tätä elementtiä tulee käyttää vain, jos se mainitaan asiakirjassa tai yleisen rakenneosan kontekstissa. On reilua sanoa, että logoasi ei todennäköisesti mainita tällä tavalla. Älä vain tee sitä. Kaikki mitä tarvitset on:

Yrityksen nimi

Elementti ei ole vain kuvia

Toinen yleinen väärinkäsitys siitä on, että sitä voidaan käyttää vain kuviin. Tämä on väärin. Elementti voi olla video, ääni, kaavio (esimerkiksi SVG:ssä), lainaus, taulukko, koodilohko, tekstinpätkä tai mikä tahansa näiden ja monien muiden elementtien yhdistelmä. Älä rajoita käyttöäsi vain kuviin. Meidän tehtävämme verkkostandardien harrastajina on käyttää merkintöjä sisällön kuvaamiseen mahdollisimman tarkasti.

Jokainen, jopa kokemattomin käyttäjä, on ainakin kerran kohdannut HTML-käsitteen. Mikä se on ja mihin tarkoituksiin sitä pitäisi käyttää? HTML-lyhenne voidaan tulkita Hypertext Markup Language -kieleksi. Yksinkertaisesti sanottuna se on kieli, jota käytetään hypertekstin merkitsemiseen. HTML:ää on vaikea luokitella ohjelmointikieleksi, tämä käsite viittaa pikemminkin elementtien sijoittamiseen selaimeen. klo HTML-apu Voit näyttää selaimelle, kuinka elementit tulee sijoittaa sivuston sivulle, kun käyttäjä avaa sivuston.

HTML-elementti - kuvia, tekstiä, animaatioita ja kaikkea mitä sijoitamme sivulle. HTML auttaa sinua sijoittamaan nämä elementit sivulle, valitsemaan otsikkotekstin, luomaan siirtymisen toiselle sivulle ja paljon muuta.

Mitä tunnisteet ovat ja mihin ne on tarkoitettu?

Jos avaat minkä tahansa HTML-sivun koodin, huomaat sen koostuvan monista ensi silmäyksellä käsittämättömistä merkeistä. Nämä hahmot ovat HTML:n pohjalta- nämä ovat tunnisteita. Jotkut tunnisteet vaativat kuitenkin sulkemisen nykyaikaiset selaimet joskus he jättävät tämänkaltaisen virheen huomioimatta, mutta sääntöjä ei voi sivuuttaa, tämä voi häiritä dokumentin rakennetta, ja jotkin tagit eivät vaadi sulkemista ollenkaan. Sinun on oltava varovainen.

HTML-dokumentti koostuu seuraavista pakollisista perustunnisteista, joita ilman verkkosivu ei ole mahdollista:

Otsikko


Runko

Tunnisteet< !DOCTYPE html>aina avaa ja sulje asiakirja, DOCTYPE selittää hitaalle selaimelle, kuinka tämä asiakirja jäsennetään vanhemmissa HTML-versioissa, joita doctype oli eri merkitys, nykyaikaisessa viidennessä versiossa yllä oleva kirjoitusasu on hyväksyttävä, joten emme mene yksityiskohtiin ja käytä sitä. Kaikki muut tunnisteet sijoitetaan niiden väliin.

Itse asiakirja on jaettu asiakirjan "päähän" ja "runkoon". Tähän käytetään tunnisteita ja. Ei ole vaikea arvata, että tunniste on dokumentin runko ja kaikki sivulla näkyvät elementit, ja tämä on head, joka sisältää skriptejä, metatietoja jne. Sisältö päämerkki Emme näe sitä fyysisesti, mutta sillä on valtava merkitys sivuston sivujen edistämisen ja toiminnan kannalta.

Sisällä html-tunnisteet aseta muut tunnisteet, älä unohda esimerkiksi asiakirjan päätä ja runkoa,

Sisältö 1

Sisältö 2

Sisältö 3

Ensimmäisessä tapauksessa korostamme tekstin lihavoituna, toisessa lisäämme kappaleen ja kolmannessa lisäämme lohkotekstin div-elementti jossa tekstiä sisällä.

Tag. Tämä vaadittu tunniste, sen avulla asetetaan sivuston sivun tarvittava otsikko. Sen optimaalinen pituus on 60-70 merkkiä, ole varovainen. Tämä nimi näkyy hakukonetuloksissa ja selaimen välilehdellä, ja se on välttämätön hakukoneoptimoinnin edistämiseksi. Se on sijoitettava tagien väliin

Toinen tärkeä yksittäinen sisällönkuvauskenttä, joka on kirjoitettava projektin päähän, on asiakirjan koodaus. Tämä on välttämätöntä, jotta vältetään sekaannukset tarkoitetun ja todellisen koodauksen välillä, muuten kaiken tärkeän sisältösi näyttö voi muuttua joukoksi käsittämättömiä merkkejä. Yleisin kyrillisten aakkosten koodaus on utf-8, muiden koodausten käyttö on windows pohjainen pitää nyt huonoina tapoina.

Hakukoneen kannalta kaksi metatunnistetta ovat erittäin tärkeitä, jotka kirjoitetaan asiakirjan päähän, nämä ovat Avainsanat (; avainsanoja) ja Kuvaus (lyhyt kuvaus). He kirjoittavat tietoja ei käyttäjille, vaan hakukoneille kertoakseen artikkelin ja sen avainkohdista Lyhyt kuvaus(Pituus enintään 120 merkkiä). Näiden tunnisteiden merkitys hakujärjestelmille on edelleen mysteeri. Aiemmin avainsanat vaikuttivat suuresti hakutuloksiin, mutta nyt tilanne on kiistanalainen.

Otsikko

Lähes kaikilla tunnisteilla on parirakenne: ja . Tämä on kontti. Kaikki mikä sopii niiden väliin, esimerkiksi "Header", on säiliöiden sisältö.

Yksittäisiä tunnisteita ei tarvitse sulkea, eli niiden rakenne on . Yksittäiset tunnisteet on suunniteltu suorittamaan tiettyjä toimintoja, kuten kuvan lisääminen, syöttökentät, linkit, metakuvaukset, seuraava rivi jne. Nuo. tunnisteiden parametrit ja ominaisuudet, niiden sisältöä ei määritellä säilön sisällä, vaan attribuuttien kautta.

Tunnisteen attribuutit.

Tunnisteilla voi olla attribuutteja. Kuten bgcolor-parametri:

Teksti

Siten tagissa on bgcolor-attribuutti, jonka arvo on "grey". Näin voit tehdä asiakirjan taustan harmaaksi. Jokaisen tunnisteen attribuuttisarja on erilainen, kaikki riippuu elementin toimivuudesta.

Kaikki tunnisteet ja attribuutit ovat mukana vapaa pääsy. Menemällä hakukoneeseen löydät helposti kaikki tunnisteet ja parametrit sekä niiden merkitykset. Itse asiassa, HTML-dokumentti koostuu näistä elementeistä, joita muuttamalla voit rakentaa sivuston rakenteen. Löydät esimerkiksi sivustolta http://htmlbook.ru Yksityiskohtainen kuvaus kaikille HTML-elementtejä sivut, tunnisteet, attribuutit, käyttöesimerkit. Opi hakemaan

Julkaisupäivä: 12.01.2017.

Yksi luomisen tehtävistä uusi versio HTML5 oli asiakirjamerkintöjen yksinkertaistus. Ratkaisu tähän ongelmaan oli uusien tunnisteiden luominen, jotka vastaavat asiakirjan jäsentämisestä.

Sivupuun rakentamisen perusperiaate perustuu koko sivun jakamiseen rakenteellisiin elementteihin - lohkoihin tai osiin. Nämä osiot sisältävät tunnisteita, kuten< header>(sivuston otsikko),< section>, < aside>, Ja< footer>(kellarissa). Ennen yllä olevien tunnisteiden luomista taittosuunnittelijat käyttivät tunnisteita< div>dokumentin jäsentäminen käyttämällä ainutlaatuisia luokkia ja tunnuksia. Koodi rakennettu kokonaan< div>erittäin vaikea ymmärtää ja lukematon. Syynä tähän on tunnisteen loogisen kuormituksen puute. Tämä oli suurin kompastuskivi hakukoneille.

Tämä tosiasia stimuloi semanttisen merkityksen omaavien tunnisteiden syntymistä, joista tuli niin sanottu "kartta" roboteille tiheässä koodimetsässä.

Uusien tunnisteiden käytön positiivisia puolia Hakukoneoptimointi

Ensimmäinen ja merkittävä myönteinen puoli modernisoidun HTML5:n käytössä on koodin käsittelyn helppous hakurobotteja. Tällä hetkellä robotit erottavat helposti verkkosivustolla olevat aputiedot pääaiheista ja sisällöstä.

Näin ollen hakukoneet lisää etsinnän tehokkuutta ainutlaatuista sisältöä ja plagiointi.

On kuitenkin syytä huomata, että monet hakukoneoptimoijat eivät ole ymmärtäneet perusolemusta siitä, kuinka hakukoneet toimivat tällaisilla merkinnöillä, mutta tämä on ajan kysymys.

Saatavuus

Analysoidaksesi visuaalisesti uusien asettelumenetelmien saatavuutta, katsotaanpa esimerkkisivustoa:

Tällä sivustolla on melko helppo navigoida missä pääsisältö on ja missä tukitiedot ovat, ja näet myös selvästi, missä sivuston otsikko, valikot ja alatunniste ovat. Kuitenkin käytettäessä ääniselaimet on erittäin vaikeaa päästä käsiksi sivuston olemukseen, esimerkiksi jos se on kauppasivusto. Päästäkseen tarjotun tuotevalikoiman pohjalle käyttäjä tarvitsee huomattavaa sinnikkyyttä ja kärsivällisyyttä, jota kaikilla ei ole.

Tällaisissa tapauksissa ulospääsy on uusien tunnisteiden käyttö. He sallivat vain yhden äänikomento siirtyä sivuston nimestä valikkoon, pääsisältöön ja apusivuston navigointielementteihin.

Nämä positiivisia puolia HTML5 vaikutti tekijöiden odottamattomaan kiinnostukseen vaihtoehtoisia järjestelmiä hakua, he painottavat vakavasti asiakirjan semantiikkaa.

Lyhyesti rakennetunnisteiden päätarkoituksesta:

osio

Tämä tunniste on vastuussa lohkojen strukturoimisesta, jotka on liitetty toisiinsa jollakin. Voit käyttää tätä komentoa myös jakaaksesi tekstin lukuihin, osiin ja alaosiin. Yleensä tällaisen tunnisteen sisällä on otsikko.

Lue lisää tämän tagin käyttämisestä rakentamiseen semanttinen rakenne Dokumentti on luettavissa artikkelissa "Dokumenttirakenteen rakentaminen HTML5:ssä osiosta"

Selvemmän selityksen saamiseksi palataan esimerkkiin laajan tekstin jakamisesta lukuihin ja kappaleisiin, joissa voi olla myös alakohtia ja alakohtia. Katsotaanpa seuraavaa koodiesimerkkiä materiaalin suojaamiseksi:

< article> < h1>Artikkelin otsikko< p>Esittely...< section> < h1>Artikkelin alaosan otsikko< p>Alaosion sisältö< section> < h1>Artikkelin toisen alaosan otsikko< p>Alaosion sisältö

Muuten, kiinnitä huomiota useiden otsikoiden läsnäoloon h1-merkillä - tämä on erityinen tekniikka, josta keskustelemme myöhemmin.

Jotkut käyttäjät väittävät niin< section>- Tämä ei ole muuta kuin lohkoasettelutunnisteen korvaaminen< div>. Tämä väite ei kuitenkaan pidä paikkaansa. On selvä ero sen välillä, milloin osio on sopiva ja milloin se ei ole. Kun esimerkiksi sitot tiettyyn tyyliin, sinun tarvitsee vain käyttää< div>. On myös syytä kiinnittää huomiota lohkossa olevaan semanttiseen kuormaan - osaa ei käytetä luonnollisen otsikon puuttuessa.

artikla

Kokeneet verkkovastaavat kutsuvat tätä osiota tunnisteen erikoistapaukseksi< section>. Artikkelissa korostetaan "erillisen" (sellaisen, joka voidaan leikata pois sivusta kokonaisuutena merkityksensä menettämättä) sivun osa, joka puolestaan ​​koostuu toisiinsa liittyvistä elementeistä.

Esimerkkejä itsenäisistä osista ovat ilmoitukset blogin artikkeleista, mainoslohkot, erilaisia ​​widgetejä (esimerkiksi sään mukaan).

Spesifikaatio kuvailee tätä käsitettä kuitenkin varsin epäselvästi, minkä seurauksena syntyi paljon kiistaa siitä, mitä tarkalleen käyttää:< section>tai< аrticle>. Tärkeimmät erimielisyydet tässä asiassa ovat seuraavat:

• luodaksesi Web-sivun pääsäilön, jota sinun tulee käyttää< section>, < аrticle>tai< div>. Toisaalta kaikki sisältö liittyy toisiinsa tavalla tai toisella, mutta sivustoa voidaan kutsua itsenäiseksi yksiköksi.
• Kuinka suunnitella sivuston otsikko tai tarkemmin, mitä tunnisteita käyttää?
• ja lopuksi, kuinka työskennellä sivuston pääsisällön kanssa? Tarve käyttää< section>Kanssa< аrticle>sisällä tai käytä yksinomaan sellaista< аrticle> .

Tämä hämmennys muistuttaa aikoja, jolloin vastaavia kiistoja syntyi tunnisteiden käytöstä< acronim>Ja< abbr>. Tuolloin ongelma ratkaistiin yksinkertaisesti, mutta radikaalisti: he luopuivat käytöstä< acronim> .

Ja kaiken tämän yhteydessä herää täysin looginen ja oikeutettu kysymys: miksi käyttää< аrticle>, jos voit kieltäytyä siitä ja työskennellä vain< section>? Viime kädessä HTML5-uudistuksen tavoitteena oli helpottaa verkkovastaavien työtä.

Todennäköisimmin tässä tapauksessa kieltäydytään< аrticle>ei olisi oikein, koska saisimme täysin identtiset lohkotyyliset merkinnät kuin edellisessä HTML-versiot. Päätöksellä tästä asiasta olisi parannus< section>siten, että sivuston pääsisällön ja tukitiedon välillä on selkeitä eroja.

Aloittelevien sivustojen rakentajien auttamiseksi tarjoan useita erikoisominaisuuksia, joiden avulla voidaan yksinkertaisesti päättää, milloin niitä käytetään< аrticle> :

Pääasiallinen lähestymistapa on, että sillä on arvoa käyttäjälle, se herättää hänen huomionsa ja sisältää sivun pääsisällön.

Jos olisi järkevää lisätä pubdat- tai citate-attribuutteja.

Tarkastelemamme koodifragmentin täydellisen autonomian tapauksessa.

sivuun

Suunniteltu erottamaan pääsivun sisältö apusisällöstä.

Eli voimme sisällyttää tekstiin erilaisia ​​lainauksia, lisävalikoita, mainosbannerit ja muut tiedot, jotka eivät liity sivun pääsisältöön.

Useammin vastaavia tietoja sijaitsee sivuston sivupalkissa.

otsikko

Korostaa selvästi sivun otsikkoosan. Se sisältää sekä koko asiakirjan että sen yksittäisten osien otsikot. Useimmiten tästä osiosta löydät tunnisteita, kuten< hgroup>Ja< h1>-< h6>. Tämä vaatimus ei kuitenkaan ole periaatteessa välttämätön, otsikossa voi olla mitä tahansa tunnisteita.

Se kannattaa ennen kaikkea huomioida tämä tunniste käytetään otsikon luomiseen, kuten esimerkissä on osoitettu:

< header> < a href= "/" >< img src= "/logo.png" alt= "Vaden Pro/>

[valikko]

[Hae]

Sinun ei kuitenkaan pidä rajoittaa tätä tunnistetta web-sivun otsikkoon.< header>se voi sijaita sisällä< section>, < article>, < aside>ja erityisissä poikkeustapauksissa sisään< nav>. Tällä lähestymistavalla tunniste< header>On lapsielementti ja vastaa tämän erillisen osan otsikkoa. Katsotaanpa esimerkkiä milloin< header>käytetty sisällä< article> :

< article> < header> < h1>Tärkeää tekstiä< time>21.02.10 [Julkaisuteksti]

On syytä huomata, että otsikko kokoaa yhteen osan otsikon, mutta jos tämä osa koostuu vain otsikosta, tätä tunnistetta ei tule käyttää:

< article> < header> < h1>Tärkeää tekstiä [julkaisuteksti]

Tämä järjetöntä käyttöä otsikko, semanttisesti oikeampi olisi seuraava merkintä koodi:

< article> < h1>Tärkeää tekstiä [julkaisuteksti]

alatunniste

Liikkuessamme alas ja alemmas sivustorakenteen läpi, pääsimme vähitellen "kellariin", jossa on jotain kuvaavaa tietoa osasta tai paikasta yleensä. Nämä tiedot erotetaan tunnisteella< footer> :

< footer> < p id= "copyright" >&kopio; 2014 Vaden Pro< p>Kaikki oikeudet pidätetään

Sivuston tässä osassa on tapana sijoittaa tietoja tekijänoikeuksista tästä resurssista, tekijänoikeudet, erilaiset linkit tukiresursseihin jne. Tästä syystä et voi rajoittaa tunnisteen käyttöä< footer>yksinomaan päällä kotisivu. Olisi järkevää käyttää sitä resurssin eri osissa. Älä myöskään erehdy siitä< footer>on oltava sivuston alaosassa. Esimerkiksi seuraava sivuasettelu tapahtuu:

< article> < header> < h1>Tärkeää tietoa< time> 05. 04. 2015 < footer> < div class = "autor" >Danil Goyda< a href= "#" >tekijästä |< a href= "#" >Kaikki kirjoittajan julkaisut [itse julkaisu]

nav

Navin käyttö vastaa sivuston navigointiosan erottamisesta pääsisällöstä. Tämän lohkon sisällä voi olla paitsi linkkejä sivuston muille sivuille, myös ankkurilinkkejä tämänhetkinen sivu. Katsotaanpa esimerkiksi seuraavaa koodia:

< header> < a href= "/" >< img src= "/logo.png" alt= "Vaden Pro" /> < nav> < ul>[valikko] [haku]

On myös syytä kiinnittää huomiota siihen, että se ei muodosta vain linkkiluetteloa, vaan itsenäisen osion monimutkainen rakenne. Katsotaan:

< nav> < a href= "" >Vaikea navigointi< section> < h1>Sivuston ensimmäinen osa< ul> < li>< a href= "" >kohta [ ... ]< section> < h1>Sivuston toinen osa< ul> < li>< a href= "" >Kohta

Ja älä unohda sitä< nav>muodostaa web-sivun päänavigointilohkon. muita sivuston navigointielementtejä, kuten avun linkkejä alatunnisteessa tai lohkoissa, jotka toistavat navigointia, ei tule korostaa tällä tunnisteella.