Eticheta figure definește. Evitarea greșelilor comune în marcajul HTML5. dar nu vorbim despre asta acum. Adevărata greșeală este utilizarea excesivă a elementului. ar trebui să fie folosit numai atunci când vă referiți la el într-un document. Este puțin probabil să vă referiți la

Elementele semantice HTML5 descriu în mod clar sensul sau scopul lor atât pentru browsere, cât și pentru dezvoltatorii web.
Înainte de apariția standardului HTML5, toate markupurile paginii erau efectuate în principal folosind elemente, cărora li s-au atribuit clase sau identificatori de id pentru claritatea marcajului (de exemplu,). Cu ajutorul lor, anteturile și subsolurile au fost plasate într-un document HTML, panouri laterale, navigație și multe altele.

Standardul HTML5 a introdus elemente noi pentru structurarea, gruparea conținutului și marcarea conținutului text. Noile elemente semantice au făcut posibilă îmbunătățirea structurii paginii web, adăugând sens semantic conținutului conținut în acestea (a fost, a devenit). Nu există reguli pentru afișarea aspectului elementelor, așa că elementele pot fi stilate după cum doriți. Disponibil pentru toate articolele.

Conform specificației HTML5, fiecare element aparține unei categorii specifice (zero sau mai multe). Fiecare dintre ele grupează elemente cu caracteristici similare. Se disting următoarele categorii generale:

  • Conținut meta
  • Conținut în flux
  • Continut Sectional
  • Conținutul antetului
  • Conținut text
  • Conținut încorporat
  • Conținut interactiv
Descrierea elementelor HTML5 1. Element

Categorii de conținut: conținut în flux.
Gruparea elementelor introductive și de navigare, opțional. Poate conține titluri, poate include conținutul unei secțiuni de pagină, un formular de căutare sau un logo. Un document HTML poate conține mai multe elemente în același timp și pot fi localizate în orice parte a paginii.

Descrierea site-ului

  • Despre
  • Forum
  • Descărcați

Un element nu poate fi plasat în interiorul elementelor, sau alt element.

2. Element

Categorii de conținut:
Conceput pentru a crea un bloc de navigare pentru o pagină web sau un întreg site, dar nu trebuie să fie în interiorul . Pot exista mai multe elemente pe o pagină. Nu înlocuiește etichetele

    sau, doar le încadrează. Nu toate grupurile de link-uri dintr-o pagină trebuie să fie împachetate, acest element este destinat în primul rând secțiunilor care constau din blocuri principale de navigare.

    Puteți utiliza mai mult decât elemente de listă ca elemente ale barei de navigare:

    ...

    ...

    De asemenea, puteți adăuga anteturi în interiorul unui element:

    ...

    3. Element

    Categorii de conținut: conținut în flux, conținut secțional.
    Folosit pentru a grupa intrări - publicații, articole, intrări pe blog, comentarii. Este un bloc independent, separat, destinat utilizării repetate, începând de obicei cu un antet. Poate fi duplicat pe alte pagini ale site-ului și conține alte elemente în interior care sunt strâns legate ca conținut de conținutul articolului extern. Dacă există un singur articol pe o pagină cu un titlu și conținut text, acesta nu trebuie să fie împachetat cu un . Se recomandă utilizarea unui element numai dacă conținutul elementului va fi specificat în mod explicit în schema documentului.

    Primăvara vine (și pleacă) în comitatul Sussex

    Ieri m-am alăturat Brooklyn Bird Club pentru călătoria noastră anuală în vestul New Jersey-ului, în special Hyper Humus, un punct fierbinte relativ recent descoperit.

    Dar contează pentru lista vieții tale?

    Se pare că acum puteți urmări păsările prin internet. Nu am reușit să-l testez încă (limită de 20 de utilizatori aparent), dar acest lucru este cu siguranță grozav. Personal, nu-mi pot imagina că înlocuiește cu o cantitate mică de fapt faptul că este pe teren.

    « Înregistrări anterioare

    4. Element

    Categorii de conținut: conținut în flux, conținut secțional.
    Un element reprezintă o secțiune universală a unui document. Grupează conținut tematic și de obicei conține un titlu. Nu este un bloc de înveliș în aceste scopuri este mai potrivit să se folosească elementul. Conținutul poate fi un cuprins, secțiuni publicații științifice, program eveniment. Pagina de start Site-ul poate fi, de asemenea, împărțit în secțiuni - un bloc de informații introductive, știri și contacte. Se recomandă utilizarea unui element numai dacă conținutul elementului va fi specificat în mod explicit în schema documentului.

    ... ... ...

    interior

    Puteți crea elemente părinte cu elemente imbricate care conțin unul sau mai multe elemente. Nu toate paginile trebuie aranjate în acest fel, dar este o modalitate acceptabilă de a imbrica elemente. De exemplu, zona principală de conținut a unei pagini conține două blocuri cu articole pe diferite subiecte. Puteți sublinia acest lucru plasând fiecare articol pe aceeași temă în interiorul elementului

    Note despre natură ... ... Note istorice ... ...

    5. Element

    Categorii de conținut: conținut în flux, conținut secțional.
    Grupează conținut care este direct legat de conținutul din jur, dar care ar putea fi considerat separat (adică, eliminarea acestui bloc nu va afecta înțelegerea conținutului principal). Cel mai adesea, un element este poziționat ca o coloană laterală (ca în cărți) și include un grup de elemente: date digitale, citate, blocuri publicitare, înregistrări de arhivă. Nu este potrivit pentru blocuri poziționate pur și simplu în lateral.

    ... ...

    .........

    6. Element

    Categorii de conținut: conținut în flux.
    Reprezintă subsolul secțiunii care le conține sau al elementului rădăcină. De obicei, conține informații despre autorul articolului, informații despre drepturile de autor etc. Când este utilizat ca subsol de pagină completă, conținutul este completat cu notificări privind drepturile de autor, link-uri către termenii de utilizare, informații de contact, link-uri către conținut similar etc.

    Pot exista mai multe elemente într-un document web. Fiecare pagină, precum și fiecare articol, poate avea propriul element în plus, poate fi plasat în element pentru a indica sursa citației;

    ... @2014...

    7. Element

    Categorii de conținut: conținut în flux.
    Folosit pentru a determina informații de contact autor/proprietar al documentului sau articolului. Pentru a indica autorul documentului, eticheta este plasată în interiorul elementului, pentru a afișa autorul articolului - în interiorul etichetei. Browserul afișează de obicei cursive.

    8. Element

    Categorii de conținut: conținut în flux.
    Elementul reprezintă conținutul principal al documentului (conținutul elementului). Conținutul din interiorul elementului trebuie să fie unic și să nu se repete în toate documentele site-ului, cum ar fi link-uri de navigare, informații despre copyright, logo-uri, formulare de căutare (dacă formularul de căutare este funcția principală a documentului).

    Un element nu poate fi un copil al unor elemente precum , , sau .

    Pudel

    Despre rasă Soiuri Aspect Caracter Copyright © 2016 My dog.ru

    9. Element

    Categorii de conținut: conținut streaming, conținut secțiune rădăcină.
    Elementul reprezintă conținut autonom (opțional cu un titlu) care este un element separat al fluxului principal. Un element poate fi mutat din conținutul documentului principal într-o bară laterală sau aplicație fără a afecta fluxul documentului. Folosind elementul pe care îl puteți adăuga caracteristici scurte la ilustrații, fotografii, diagrame, fragmente de cod etc.

    pădure de toamnă

    Elementul este un element bloc, lățimea sa ocupă întreaga lățime a blocului container minus marginile externe:

    10. Element

    Elementul este un descendent al elementului și nu aparține niciunei categorii de conținut. Elementul este la nivel de bloc, lățimea este egală cu lățimea elementului, înălțimea implicită este 18px.

    11. Element

    Categorii de conținut:
    Definește ora (24 de ore) sau data conform calendarului gregorian, cu posibilă indicare a decalajului orar și al fusului orar. Textul inclus în această etichetă nu este stilat de browser. Atributul datetime este disponibil pentru etichetă, al cărui conținut indică ceea ce utilizatorul va vedea pe ecranul computerului său:

    Pentru ca data să fie citită automat, trebuie să fie în formatul AAAA-LL-ZZ. Ora, care poate fi de asemenea specificată, este specificată în formatul HH:MM cu adăugarea unui prefix de separare T (ora):

    12. Element

    Categorii de conținut: conținut în flux, conținut text.
    Textul plasat în interiorul etichetei este evidențiat în galben în mod implicit (culoarea de fundal și culoarea fontului din blocul selectat pot fi modificate prin setarea anumitor stiluri CSS). Folosind această etichetă, puteți marca conținut important, precum și cuvinte cheie.

    13. Element

    Categorii de conținut: conținut în flux, conținut text.
    Separă o bucată de text care trebuie izolată de restul textului pentru formatarea textului bidirecțională. Folosit pentru textele scrise simultan în limbi citite de la stânga la dreapta și de la dreapta la stânga.

    14. Element

    Categorii de conținut: conținut în flux, conținut text.
    O singură etichetă arată browserului un loc pentru a adăuga o întrerupere de rând lungă, dacă este necesar.

    15. Elemente pentru descrierea personajelor din Asia de Est

    Categorii de conținut: conținut în flux, conținut text.
    Elementul vă permite să marcați unul sau mai multe elemente din categoria de conținut text folosind o adnotare rubin. Adnotarea rubin este folosită în principal în tipografia din Asia de Est ca ghid pentru pronunție sau pentru a include alte caracteristici. Elementul poate conține:
    — unul sau mai multe noduri sau elemente de text;
    — unul sau mai multe elemente , , fiecare dintre acestea precedând sau imediat după elementul .

    Elementele , și nu aparțin niciunei categorii de conținut.

    Elementul își definește textul imbricat ca componentă de bază a adnotării.
    Elementul afișează o adnotare pentru textul de deasupra sau dedesubtul acestuia.
    Elementul marchează textul imbricat ca adnotare suplimentară.
    Elementul afișează text alternativ dacă browserul nu acceptă elementul.

    Și răspunzând la întrebările utilizatorilor, am văzut o mulțime de site-uri cu marcaj HTML5. În acest articol, vă voi arăta câteva greșeli și practici proaste de marcare pe care le-am văzut frecvent și vă voi explica cum să le evitați.

    Nu folosiți o etichetă ca înveliș pentru stil Una dintre cele mai frecvente probleme pe care le-am observat este înlocuirea banală a „s cu elemente structurale HTML5, în special „s. Aceste. când ceea ce în XHTML sau HTML4 arată astfel:
    Pagina mea super duper Rescrie astfel:
    Este pur și simplu greșit: nu un ambalaj. Acest element se referă la blocul semantic al conținutului dvs. care este utilizat pentru a construi „conturul documentului” și trebuie să conțină un titlu. Dacă aveți nevoie de un element de ambalare, încercați să vă descurcați (Kroc Kamen are ceva de oferit). Dacă acest lucru nu rezolvă problema necesității de ambalaje suplimentare, utilizați vechile „s. HTML5” nu au murit și sunt perfecte în acest caz.

    Luând în considerare toate cele de mai sus, ar fi bine să marcați exemplul de mai sus folosind HTML5 astfel:
    Pagina mea super duper

    Dacă nu sunteți sigur ce element să utilizați, atunci vă sfătuiesc să utilizați diagrama noastră de selecție a elementelor ( aproximativ traducător: vezi chiar în partea de jos a intrării).

    Utilizați și numai când este necesar Nu are rost să scrieți cod dacă nu este necesar, nu? Din păcate, observ adesea cum și unde nu sunt necesare. Puteți citi despre elemente mai detaliat, dar voi sublinia pe scurt punctele cheie:
    • Elementul reprezintă un grup de ajutoare introductive sau de navigare și de obicei conține un titlu de secțiune
    • Un element grupează un set de elemente - reprezentând un titlu de secțiune în cazul în care este format din mai multe niveluri (subtitluri, titluri alternative etc.)
    Elemente redundante După cum sunt sigur că știți bine, un element poate fi folosit de mai multe ori într-un document. Prin urmare, acest lucru se întâmplă adesea:
    Cea mai bună postare pe blog a mea

    Dacă al tău conține un singur element antet, atunci nu este necesar. În acest caz, elementul garantează deja că antetul va fi inclus în schița documentului și, deoarece nu conține mai multe elemente (prin definiție), poate fi eliminat în siguranță. Pur și simplu, acesta este suficient:
    Cea mai bună postare pe blog a mea

    Utilizare incorectă Și din nou despre titluri: deseori văd că elementul este folosit incorect. Nu trebuie utilizat împreună cu dacă:
    • Există un singur antet
    • bun pe cont propriu (adică fără ).
    Primul caz:
    Cea mai bună postare pe blog a mea

    de Rich Clark

    În acest caz, eliminați hgroup.
    Cea mai bună postare pe blog a mea

    de Rich Clark

    Al doilea caz este un alt exemplu de utilizare inutilă a unui element.
    Compania mea a fost înființată în 1893

    Dacă ai un singur copil, „și de aceea ai nevoie de el dacă nu ai elemente suplimentareîn „e (adică sora cu ), doar eliminați .
    Compania mea a fost înființată în 1893

    Nu încadrați toate linkurile în HTML5 a introdus 30 de elemente noi pentru a ne oferi posibilitatea de a crea un marcaj structurat și semnificativ. Dar nu ar trebui să folosiți exagerat elementele semantice noi. Din păcate, asta se întâmplă exact cu . Specificația îl descrie astfel: Elementul nav reprezintă o secțiune a unei pagini care o leagă la alte pagini sau părți ale celei curente (o secțiune cu legături de navigare).

    Notă: Nu toate grupurile de legături trebuie plasate în elementul de navigare. Ar trebui să fie folosit pentru navigarea de bază. Adesea, în subsoluri există o mică listă de link-uri către diverse pagini ale site-ului (Acasă, Ajutor, termeni de utilizare, etc). În acest caz, un subsol ar trebui să fie suficient Deși nimic nu vă împiedică să utilizați nav, nu este necesar.

    Specificații HTML WHATWG

    Fraza cheie- „navigație principală”. Se poate argumenta mult timp despre ce se înțelege prin principal, dar pentru mine este:

    • Navigare primară
    • Cauta pe site
    • Navigare secundară (discutabil)
    • Navigare în pagină (în cadrul unui articol lung, de exemplu)
    Deși în acest caz este dificil să judeci ce este bine și ce este greșit, cred că nu ar trebui să concluzi:
    • Comutatoare de pagini
    • Linkuri sociale (deși pot exista excepții în cazurile în care linkurile sociale reprezintă navigarea principală. De exemplu, site-uri precum about.me sau flavors.me)
    • Postează etichete
    • Postari categorii
    • Navigatie tertiara
    • Subsolurile volumului
    Dacă nu sunteți sigur dacă să încadrați lista de linkuri în , întrebați-vă: „Este aceasta navigarea principală?” Vă rugăm să rețineți următoarele:
    • „Nu folosi dacă crezi că și titlul ar funcționa” - Hixie pe IRC
    • Poate că ar trebui să adăugăm „Mergi la” pentru comoditate?
    Dacă răspunsul la aceste întrebări este „Nu”, probabil că acesta nu este locul potrivit pentru .Greșeli frecvente în utilizarea elementului topor. A avea de-a face cu utilizarea corectă Acest element, ca și fratele său, nu este ușor. Să aruncăm o privire la unele greșeli comune legate de acest element Nu toate imaginile. Anterior, am sfătuit să nu scriem mai mult cod decât era necesar. Situația este similară aici. Am văzut site-uri în care fiecare poză a fost înrămată în . Nu utilizați mai mult markup doar pentru a utiliza mai mult markup. Doar creați mai multă muncă pentru dvs., dar nu vă îmbunătățiți descrierea conținutului.

    Specificația îl descrie ca „conținut autonom, eventual cu un antet și, de obicei, un element de flux autonom”. Aici este, toată frumusețea - elementul poate fi mutat cu ușurință din conținutul principal, de exemplu, în bara laterală.

    Diagrama de selecție a elementelor de mai sus vă va ajuta să vă ocupați de .

    Dacă o imagine este doar în scopuri de prezentare și nu este menționată nicăieri în document, cu siguranță nu este un . În caz contrar, pune-ți întrebarea: „Este această imagine în contextul actual necesară pentru înțelegere?” Dacă nu, se pare că nu este (posibil). Dacă da, întrebați-vă: „Pot muta acest lucru într-o aplicație?” Dacă răspunsul la ambele întrebări este da, atunci s-ar putea să funcționeze.

    Logo-ul dvs. nu este Același lucru este valabil și pentru logo. Văd des această aplicație:
    Numele companiei mele
    Nimic de adăugat aici. Acest lucru pur și simplu nu este adevărat. Vă puteți certa mult timp dacă logo-ul ar trebui să fie inclus, dar nu vorbim despre asta acum. Adevărata greșeală este utilizarea excesivă a .
    ar trebui să fie folosit numai atunci când vă referiți la el într-un document. Este puțin probabil să vă conectați la logo-ul dvs. oriunde. Acesta este suficient:

    Numele companiei mele poate fi mai mult decât o imagine O altă înțelegere greșită comună a unui element este presupunerea că acesta poate fi folosit doar pentru imagini. Dar asta nu este adevărat. Poate conține video, audio, grafică (în SVG, de exemplu), un citat, un tabel, un bloc de cod, o poezie sau orice combinație a celor de mai sus. Nu te limita doar la poze. Sarcina noastră în calitate de adepți a standardelor web este să descriem conținutul marcajului nostru.

    Nu cu mult timp în urmă am scris despre element mai detaliat. Vă recomand să îl citiți dacă doriți să îl înțelegeți mai bine sau să vă reîmprospătați amintirile. Nu utilizați atributul de tip inutil Acesta este poate cel mai mult problemă comună

    , găsit în galeria HTML5. Deși aceasta nu este o eroare, cred că cel mai bine este să o eviți.

    În HTML5 nu este nevoie să specificați un atribut tip pentru și elemente. Deși pot fi dificil de scăpat de ele dacă sunt adăugate automat de CMS-ul dvs., nu are rost să le includeți în cod dacă le scrieți singur sau puteți gestiona șabloane. Deoarece Toate browserele presupun în mod implicit că toate scripturile sunt scrise în JavaScript, iar stilurile sunt CSS, astfel de marcare devine redundantă:

    În schimb, puteți scrie pur și simplu:

    Utilizarea incorectă a atributelor de formular Este posibil să fiți deja conștienți de faptul că HTML5 introduce multe atribute de formular noi. Ne vom uita la ele în viitorul apropiat, dar acum vă voi spune pe scurt ce să nu faceți Atribute logice Există atribute logice și pentru elementele multimedia și altele. Regulile pe care le descriu se aplică și acestora.

    Unele dintre noile atribute de formă sunt booleene, adică prezenţa lor în marcaj determină comportamentul elementelor. Inclusiv aceasta:

    • autofocus
    • completare automată
    • necesar

    Le văd rar, dar în cazul necesar am văzut asta:

    În cele din urmă, acest lucru nu amenință nimic rău. HTML client analizatorul va întâlni atributul necesar în marcaj și va aplica regulile corespunzătoare. Dar dacă o facem diferit și scriem required="false"?

    Analizatorul va vedea în continuare atributul necesar și va aplica comportamentul corespunzător, chiar dacă îi spuneți să nu o facă. Evident, asta nu este ceea ce ți-ai dorit.

    O valoare booleană poate fi aplicată în trei moduri: (a doua și a treia sunt tipice pentru XHTML)

    • necesar
    • necesar=""
    • necesar="necesar="

    În legătură cu exemplul nostru de mai sus, am putea scrie acest lucru (în HTML):

    În publicațiile tipărite obișnuite, cum ar fi cărțile și reviste, imaginile, tabele sau exemplele de cod sunt de obicei însoțite de o legendă. Până acum, nu am avut o modalitate de a evidenția semantic acest tip de conținut direct în HTML, mai degrabă decât să apelăm la nume de clase CSS. HTML5 speră să rezolve această problemă cu elemente noi: și . Să aflăm!

    Element

    Elementul este destinat să fie utilizat împreună cu elementul pentru a evidenția diagrame, ilustrații, fotografii și exemple de cod (printre altele). Iată ce spune specificația:

    Un element este o bucată de conținut independent, nu neapărat cu semnătură, care de obicei se referă la un element separat de conținutul principal al documentului și poate fi eliminat din document fără a-i afecta sensul.

    Element

    Elementul este opțional și poate apărea înainte sau dupa continutul din interior . Un singur element poate fi plasat în , deși elementul în sine poate conține mai multe elemente copil (de exemplu, sau ).

    Utilizați și

    Așadar, am aflat ce spune specificația despre aceste elemente. Cum să le folosești? Să ne uităm la asta cu exemple.

    pentru imagine

    Imagine în element fără legenda:

    Iată codul pentru asta:

    cu imagine si semnatura

    Imagine din interiorul elementului cu legenda explicativă:


    Un macac obraznic din Borneo. Fotografie de Richard Clarke

    Și codul pe care l-am folosit:

    Un macac obraznic din Borneo.

    Fotografie de Richard Clarke

    cu mai multe imagini

    Plasarea mai multor imagini în interiorul unui element cu o lege comună:

    De la stânga la dreapta: kookaburra, pelican și loric multicolor. Fotografii de Richard Clarke

    Și codul în sine:

    De la stânga la dreapta: kookaburra, pelican și loric multicolor.

    Fotografii de Richard Clarke

    cu bloc de cod

    Elementul poate fi folosit și pentru exemple de cod:

    Licență Creative Commons Attribution Share-Alike

    Utilizarea unui element în jurul unui link de licență Creative Commons cu rel="license" .

    Mai jos este codul pentru asta:

    Licență Creative Commons Attribution Share-Alike

    Utilizarea unui element în jurul unei licențe Creative Commons cu rel="license".

    • Diferențele dintre și
    • Am vorbit deja despre element într-un articol anterior, dar este important să remarcăm diferența dintre cele două. Când alegeți între sau , merită să vă întrebați dacă conținutul elementului este important pentru înțelegerea conținutului:

    Dacă conținutul este doar relevant și nu este esențial, atunci utilizați . Dacă conținutul este important, dar poziția sa în fluxul de conținut general nu este atât de importantă, elementul este utilizat.

    Rețineți că, dacă poziția conținutului în text este strâns legată de conținutul anterior și ulterior, ar trebui utilizate elemente mai adecvate - de exemplu, bun vechi

    , sau chiar , în funcție de tipul de conținut.

    Nu te opri aici! .

    Nu vă limitați utilizarea la imagini și exemple de cod. Alt conținut adecvat pentru utilizare în element ar putea fi audio, video, grafice (eventual folosind sau), poezie sau tabele de statistici.

    Cu toate acestea, utilizarea elementului nu este întotdeauna recomandabilă. De exemplu, un banner grafic nu trebuie plasat în . Pur și simplu folosește asta

    Concluzie

    După cum am demonstrat în acest articol, elementul deschide multe posibilități. Nu uitați să vă asigurați că este potrivit pentru ocazie. Deși este puțin probabil să fii nepăsător în privința markupurilor, nu?