Meniu
AcasăJocuri

Etichete structurale HTML5. Referință pentru etichete HTML

Toată lumea știe că etichetele, , , sunt prezentaționale și, prin urmare, pe baza paradigmei „structură, prezentare, comportament”, utilizarea lor nu este încurajată. Elementele , , , par mult mai familiare. Acesta a fost cazul de mulți ani de practică de dezvoltare. Cu toate acestea, s-au schimbat multe în semantica acestor elemente odată cu apariția HTML5. Acum avem 4 noi etichete cu semnificație și mizerie în cap.

vs Dacă anterior toate manualele de aspect erau pline de expresii precum „folosește în loc de”, și acest lucru era pe jumătate adevărat, astăzi un astfel de obicei poate juca o glumă semantică crudă. Chestia este că autorii HTML5 propun să-l folosească pentru a evidenția pasaje de text pentru a atrage atenția cititorului, dar fără a implica creșterea semnificației textului sau a intonației. Specificația oferă exemple de utilizare pentru marcare cuvinte cheieîn document

Componentele frobonitor și barbinator sunt prăjite.

Și piste (primul paragraf al unui articol din jurnalism)


Pisici „adopți” de iepure de companie

Șase pisoi abandonați au găsit o nouă figură mamă neașteptată - un iepure de companie.


Asistenta veterinară Melanie Humble i-a dus pe pisoii de trei săptămâni la casa ei din Aberdeen.


La rândul său, ca și înainte, înseamnă semnificația sporită a conținutului său.

vs De acum înainte conține text care iese în evidență din mediul general, dar nu are nuanțe emoționale. În opinia mea, este logic să folosiți acolo unde tradiția tipografică sugerează caracterele cursive (de exemplu, cuvinte în limba straina, termeni etc.)

Per aspera ad Astra— tradus din latină, zicala înseamnă „Prin spini către stele”.

înseamnă stres emfatic, accent emoțional pe un anumit pasaj de text. Acesta este cazul când în vorbire evidențiem cuvinte cu voce (intonație, volum etc.)

Nu poți executa, poți avea milă.

Citiți cu atenție contractul! „Imprimare fine” (informații care reprezintă o formalitate legală, cum ar fi o licență de afaceri sau adresa legala etc.) noi, de regulă, l-am marcat cu un element cu o clasă care setează un font mai mic în agenții utilizator vizuali. Acum un nou element semantic vechi a apărut în arsenalul nostru - .Holivar o Anterior nu era altceva decât un text tăiat. Acum reprezintă informații care și-au pierdut relevanța.
Avem, de asemenea, un element al cărui rezultat implicit în agenții utilizator vizuali este textul barat. Înseamnă modificări ale unui document și, la prima vedere, scopul lor poate părea același. Cu toate acestea, există un punct subtil aici. Să ne uităm la un exemplu de pagină de produs într-un magazin online.
Poate indica două prețuri, dintre care unul este tăiat. O marcam cu elementul . Aceasta înseamnă că pret vechiși-a pierdut relevanța (nu contează când a fost, faptul în sine este important). Cum să verific dacă nu este? implică modificările aduse documentului (important este că la un moment dat documentul a fost schimbat ). În cazul nostru, noul document conține deja informații irelevante New semantics și vechiul doctype If din anumite motive din motive necunoscute

nu puteți înlocui doctype cu unul nou și sunt în mod oficial aspect în HTML 4.01 - nu disperați. Folosește elemente vechi noi cu un nou sens și în timp îți vei mulțumi. Poate cineva va spune că acest lucru este incorect, dar aceste elemente nici măcar nu sunt invalide. În plus, HTML5 a fost proiectat având în vedere compatibilitatea anterioară și același lucru este valabil și pentru noua semantică a elementelor vechi. Nimic nu s-a schimbat radical, ci s-a adăugat doar un condiment semantic. Toți cei implicați în dezvoltarea web în general și aspectul în special știu despre specificația HTML5, careîn acest moment încă în dezvoltare și nu a primit statutul de recomandare. Dar, cu toate acestea, totul ultimele versiuni

browserele suportă inovații, într-o măsură sau alta. Astăzi vom arunca o privire asupra noilor etichete de structură HTML5 Să luăm în considerare structura tipica site modern. Există mai multe blocuri care sunt prezente în cod într-un fel sau altul - acesta este „antetul”, bara de navigare (navigație), bara laterală (bara laterală), secțiunea de conținut principal (conținut), „subsolul” site-ului (subsolul) si altii unii. Dacă se folosește aspectul blocului (și tabelele sunt de domeniul trecutului, nu le-am văzut de mult timp aspect tabelar

în site-urile moderne), atunci aceste blocuri sunt afișate folosind eticheta div. Etichetele structurale sunt echivalentul tehnic al acestei etichete, dar fac marcajul mai vizual, mai ușor de înțeles și, în viitor, vor ajuta motoarele de căutare să indexeze site-ul, precum și să îl facă mai ușor de procesat atunci când este vizualizat din dispozitive mobile

. În opinia mea, există suficiente motive, dacă nu pentru ezitare de moment, atunci cu siguranță pentru a lua act.

Destinat să indice o secțiune a unui document, care poate include titluri, antet, subsol și text real. În opinia mea, cel mai apropiat analog este un bloc cu clasa wrapper (unii îi atribuie un id, dar acest lucru nu este important), care este folosit ca container de documente și conține blocuri atașate acestuia. Un fel de „înveliș” pentru blocurile ulterioare. De asemenea, este permisă imbricarea etichetelor.

antet

Indică „antetul” unui site sau secțiune, de obicei, titlul este localizat acolo. Nimic special

nav

După cum sugerează și numele, specifică blocul care conține navigarea. De obicei, aceasta este o listă de link-uri către secțiuni sau pagini ale site-ului, formatată corespunzător. Eticheta poate fi conținută în etichetele de secțiune, antet și subsol, care sunt discutate mai jos.

subsolul

„Subsolul” unui site sau secțiune. Analog complet al etichetei de antet

articol

Specifică textul conținutului unui articol, al unei intrări de blog și altele asemenea.

deoparte

Etichetă din bara laterală ( bara laterală) a unui site web, care poate avea o secțiune de navigare, un nor de etichete, postări populare și alte funcționalități. Exemplu tipic bara laterală pe care o puteți vedea în dreapta articolului

Codul de mai jos ilustrează utilizarea structurilor Etichete HTML 5 .

Numele blogului

  • Acasă
  • Secțiuni
  • Autor
  • Contacte
Se îndreaptă spre Lorem ipsum... Al doilea titlu Lorem ipsum... Al treilea titlu Lorem ipsum... Drepturi de autor și toate astea

Vă rugăm să rețineți că toate etichetele de structură necesită o etichetă de închidere. Apropo, eticheta de închidere /articol, de exemplu, este mult mai informativă decât /div. Puteți vedea imediat ce este unde. Acest cod este mult mai ușor de citit. Cel puțin din acest motiv merită implementat în proiectele existente sau planificarea celor viitoare.

Acum despre lucrul trist - iubitul IE până la versiunea 8 inclusiv nu acceptă aceste etichete, dar afișează informații între ele. Stilurile CSS nu le sunt aplicate decât dacă obiectele
creat folosind un script. Următorul cod îl va ajuta să arate documentul după cum este necesar:

Document.createElement("header"); document.createElement("subsol"); document.createElement(„secțiune”); document.createElement("deoparte"); document.createElement("nav"); document.createElement(„articol”);

Scriptul creează elemente DOM, iar IE le gestionează corect.
O mică adăugare - HTML5 interpretează implicit orice script ca tip="text/javascript" , deci nu este nevoie să indicați acest lucru în mod specific. Ceea ce face din nou codul mai simplu și mai ușor. Toate plusurile Alte browsere funcționează bine, singurul Firefox acceptă complet etichetele din versiunea 4.0, dar din versiunea 3 funcționează și le afișează corect.
Asta e tot pentru azi. Dacă sunteți interesat, aici am scris despre aplicarea noii specificații în practică. Rămâneți în legătură - va fi interesant.

HTML - limbaj marcare hipertext. Se bazează pe așa-numitele etichete. Etichetele sunt niște elemente wrapper care specifică formatul și proprietățile elementelor paginii web. Am compilat o referință actualizată a etichetelor HTML pentru dvs. pe o singură pagină.

Există mai mult de o sută de elemente de marcare în total. Fiecare are un număr de atribute și propria sa sintaxă. Referința pentru etichete HTML vă va ajuta să găsiți rapid elementul de care aveți nevoie.

Lista etichetelor HTML

Tabelul de mai jos prezintă o listă de etichete HTML5 cu o scurtă descriere în limba rusă.

Etichetă Scurtă descriere
Comentariu.
Definește tipul de document.
Link, hyperlink, ancora.
Definește textul ca o abreviere.
Informații de contact pentru autorul sau proprietarul documentului.
Definește o zonă pe o hartă imagine
Articol
Conținut deoparte (conținutul nu este conținutul principal al paginii)
Vă permite să inserați un fișier audio în curs de redare.
Text îngroșat.
Specifică adresa URL de bază sau atributul țintă pentru legăturile relative din document.
O zonă în care scrierea textului poate lua o direcție diferită.
Setează direcția de scriere a textului. Spre deosebire de direcție, este indicată direcția fizică
Citat.
Specifică zona corpului documentului.

Rupere de linie.
Buton pe care se poate face clic
Folosit pentru a desena grafice folosind scripturi
Semnătura de masă.
Notă de subsol la titlul materialului.
Folosit pentru a introduce codul computerului sub formă de text.
Specifică caracteristicile coloanelor din tabel.
Definește un grup de una sau mai multe coloane de tabel de format.
Folosit pentru a defini opțiuni predefinite din care să alegeți atunci când introduceți un câmp de text
Definește descrierea unui termen dintr-o etichetă dintr-o listă de termeni
Text care a fost eliminat în noua versiune a documentului.
Definește informații suplimentare pe care utilizatorul le poate vizualiza sau ascunde
Indică faptul că conținutul este un termen.
Definește o casetă de dialog sau un element interactiv
Un element bloc este unul dintre elementele principale de aspect.
Definește o listă de definiții
Denumirea termenului din lista de definiții
text evidențiat pentru semnificație (de obicei text cu caractere cursive).
Recipient pentru aplicare externă
Grup de elemente înrudite într-o formă
Titlu pentru element
Definește un grup autonom de mai multe elemente (de exemplu, o imagine cu o legendă)
Subsol
Definește un formular de introducere a utilizatorului
- Antete HTML de diferite niveluri: , , , , , .
Specifică zona de cap a documentului.
Bloc de antet
Linia orizontală este un divizor tematic.
Element rădăcină. Spune browserului că documentul dat este un document HTML.
Text cu caractere cursive.
Definește un cadru inline
Imagine, imagine.
Câmp de intrare
Text care a fost adăugat la noua versiune a documentului.
Text introdus de la tastatură sau numele butoanelor de la tastatură. De obicei, în font monospațiu.
Etichetă pentru câmpul de intrare. Indică legarea unui element (de obicei text) la un câmp de introducere.
Antetul elementului
    		• Element din listă
    Definește o legare de resurse externe (cel mai adesea o legare de foi de stil CSS)
    Conținutul principal
    Container pentru . Definește o hartă personalizată pe o imagine
    Textul selectat (de obicei folosind evidențierea fundalului).
    Container pentru o listă de elemente de meniu
    Definește elementele pe care utilizatorul le poate apela din meniul contextual
    Folosit pentru a defini metadatele documentului.
    Contor de valori într-un interval dat
    Container pentru elemente de navigație
    Conținut alternativ pentru utilizatorii care au scripturi dezactivate
    Definește un obiect încorporat
    Definește o listă numerotată
    Definește un grup de opțiuni asociate într-o listă derulantă. Dă numele grupului
    Parametru (opțiune de alegere) din lista derulantă
    Rezultatul calculului

    		Paragraf.
    Setează opțiuni pentru obiectele încorporate
    Container pentru mai multe imagini
    Text preformatat.
    Bara de progres
    Citat în text.
    Text alternativ dacă browserul nu acceptă .
    Adnotare pentru conținutul etichetei.
    Container pentru simboluri și decodarea acestora (în principal pentru simboluri din Asia de Est, hieroglife).
    Text tăiat.
    Text care este rezultatul unui program de calculator (de obicei în font monospațiu).
    Definește un script sau o conexiune de script dintr-o resursă externă.
    Capitol
    Definește o listă derulantă
    Text cu dimensiune mai mică a fontului.
    Definește o resursă pentru , și .
    Element în linie.
    Text evidențiat prin semnificație. Afișat de obicei cu caractere aldine.
    Definește un container pentru definirea stilurilor de document
    Afișează textul ca indice.
    Se îndreaptă în interiorul unei etichete
    Afișează textul ca superscript.
    Definește un tabel.
    Definește o zonă de conținut într-un tabel.
    Celula din tabel .
    Câmp de introducere pe mai multe linii
    Definește un grup de rânduri în partea de jos a unui tabel - subsol. Mai multe detalii
    Un loc unde este permisă o întrerupere de linie.
    Etichete HTML vechi

    Cum să înlocuiți eticheta HTML învechită? În cele mai multe cazuri, CSS Cascading Style Sheets va face. Există, de asemenea, alternative la etichetele care nu sunt utilizate în noua specificație din HTML. Tabelul de mai jos prezintă etichete HTML depreciate cu opțiuni pentru înlocuirea lor.

    Etichetă Scurtă descriere
    Acronim. Utilizați în schimb o etichetă
    Applet încorporat. Folosește sau în loc.
    Specifică culoarea, dimensiunea și familia de fonturi ale întregului text din document. Folosește-l în schimb
    Text mai mare. Folosește-l în schimb
    Text centrat. Folosește-l în schimb
    Lista directoarelor. Utilizare
      în locul lui
    Specifică culoarea, dimensiunea și familia fontului. Folosește-l în schimb
    Rama in interior. Folosește-l în schimb
    Definește un set de cadre. Pentru a adăuga mai multe cadre inline, utilizați mai multe elemente
    Alt text dacă cadrele nu sunt acceptate
    Text tăiat. Folosește sau în loc
    Text monospațiu. Folosește-l în schimb
    Text subliniat. Folosește-l în schimb

    Nota autorului: Bun venit pe acest blog. În această lecție, aș dori să vă prezint elementele de bază ale html5, și anume cele mai de bază etichete care au apărut în acesta și sunt deja folosite în crearea site-urilor web moderne. Elementele HTML5 extind semnificativ capacitățile acestui limbaj, haideți să le cunoaștem.

    Elemente noi în html5 - semantică

    Pentru început, aș vrea să menționez așa-numitele tag-uri semantice, care sunt principala inovație, deși pe lângă acestea există și multe inovații legate de forme și prelucrarea lor. Semantica în aspect era pur și simplu zero, pe vremea tabelelor. Astăzi, în era promovării motoarelor de căutare, tot mai mulți webmasteri încep să-și dea seama de importanța acesteia, pentru că și astfel de lucruri joacă un rol.

    În plus, standardele web moderne în sine sunt axate pe simplitatea și claritatea codului. Elementele noi, în special, includ următoarele etichete:

    Antetul este o etichetă asociată care denotă antetul unui site, articol sau altceva. Personal, la început m-am gândit că această etichetă ar trebui folosită doar pentru a desemna antetul site-ului în sine.

    Mai târziu, de la oameni mai experimentați în dezvoltarea site-urilor web, am aflat că pot exista mai multe etichete de antet pe o singură pagină. În consecință, nevoia de identificatori sau clase pentru astfel de elemente rămâne relevantă.

    Subsol – partea de jos a site-ului, subsolul sau orice altceva îl puteți numi. De obicei, conține informații despre drepturile de autor, uneori un meniu suplimentar și informații de contact. În cazul acestei etichete, situația este aceeași ca și cu antetul - poate să nu fie singurul de pe pagină, această etichetă poate fi folosită pentru a marca, de exemplu, secțiunea de jos în bara laterală dacă este într-adevăr diferită de; ceilalti.

    Nav este un container pentru link-uri care au o importanță deosebită pe o pagină web. Pe scurt, acum această etichetă ar trebui să includă meniul principal al site-ului, care conține link-uri către pagini și secțiuni importante ale site-ului.

    Articolul este un container pentru conținutul unei pagini, fie că este un articol, știri, un subiect nou pe un forum etc.

    Deoparte – Există încă o dezbatere cu privire la ce ar trebui să fie folosită această etichetă. La început, cineva a crezut că era obișnuit ca ei să creeze o coloană laterală în care se află diverse widget-uri. Această declarație este considerată mai semnificativă - această etichetă ar trebui să încadreze toate informațiile care sunt informații secundare de pe pagina web. De exemplu, un citat, un bloc cu navigare în documente sau un bloc cu publicitate contextuală.

    Orez. 1. Elemente semantice și noi markupuri folosindu-le.

    Acestea au fost principalele elemente semantice ale html5, iar acum să ne uităm la altele care adaugă capacități suplimentare paginii web.

    Inserarea fișierelor media

    Audio – această etichetă este, de asemenea, asociată, este concepută pentru afișarea ușoară și ușor de înțeles a înregistrărilor audio pe ecran, precum și un player în care acestea pot fi redate. În plus, trebuie să plasați etichete cu o singură sursă în această etichetă, în care trebuie să specificați calea către fișierul audio în diferite formate, astfel încât toate browserele să poată procesa sunetul.

    Acest lucru se face pentru compatibilitate între browsere. Este suficient să scrieți calea către fișierul audio în extensiile ogg și mp3. De asemenea, audio are anumite atribute. De exemplu, atributul de control adaugă controale unei înregistrări audio, astfel încât să puteți modifica volumul și să opriți redarea.

    Videoclipul este un element absolut identic cu cel precedent, cu excepția faptului că afișează video. De asemenea, conține etichete sursă, unde căile către fișiere sunt specificate în atributele src.

    Merită spus că cu video situația este puțin mai complicată. Pentru ca acesta să fie redat în toate browserele, trebuie să îl adăugați în trei formate simultan - ogg, mp4 și webm.

    În general, eticheta are aceleași atribute ca și audio. În plus, are un atribut poster, cu care puteți seta calea către imagine care va fi vizibilă dacă videoclipul nu este redat. De asemenea, folosind atributele de lățime și înălțime, puteți determina dimensiunea zonei în care va fi redat videoclipul. Dar tot mi se pare că e mai bine să faci asta prin css.

    Din anumite motive, nu dau exemple, dar acest lucru ar trebui făcut cu inserarea video.

    Eticheta video nu este acceptată de browserul dvs.

    < video width = "600" height = "450" poster = "video/poster.jpg" controls = "controls" >

    < source src = "movie.ogv" type = "video/ogg; codecs="theora, vorbis"" >

    < source src = "movie.mp4" type = "video/mp4; codecs="avc1.42E01E, mp4a.40.2"" >

    < source src = "movie.webm" type = "video/webm; codecs="vp8, vorbis"" >

    Eticheta video nu este acceptată de browserul dvs.

    < / video >

    După cum puteți vedea, avem același fișier - film. Este doar în diferite formate. De asemenea, trebuie să specificați tipul MIME și codecurile. Dar nu ar trebui să memorați acest lucru și să încercați să îl păstrați în memorie - doar copiați-l.

    Figura – o etichetă creată pentru a grupa unele elemente. Este indisolubil legat de figcaption. Cu aceste elemente la locul lor, putem realiza ceea ce s-a făcut anterior în alte moduri. De exemplu, inserați o legendă într-o imagine. Acest lucru se poate face astfel:

    Legendă imagine

    < figure >

    < img src = “image . jpg ”>

    < figcaption >SubtitrăriImagine< / figcaption >

    < / figure >

    Orez. 2. Legendă pentru imagine.

    Datalist este o etichetă interesantă în care puteți introduce, folosind etichete de opțiuni, opțiuni posibile atunci când utilizatorul introduce cuvinte în câmpul text de introducere. Puteți vedea acest lucru în motorul de căutare - el însuși vă spune opțiuni posibile. Aici, desigur, sistemul nu este atât de ingenios - puteți pur și simplu să scrieți câteva dintre cele mai comune cuvinte pe care oamenii le pot căuta pe site-ul dvs. Elementul este asociat câmpului text folosind atributul listă, care trebuie să specifice identificatorul pe care l-am definit pentru eticheta datalist.

    Poate că ar trebui scrisă o carte despre elementele html5, nu un articol, pentru că nu am acoperit nici măcar jumătate din tot ce se poate face folosind această tehnologie. Dar, sper că ți-a devenit clar - HTML5 este putere și este o tehnologie care extinde semnificativ arsenalul de capabilități ale unui dezvoltator web.

    Am atins doar capacitățile tehnologiei și, de asemenea, puteți găsi informații în cursul nostru despre elementele de bază ale HTML5. Este inclus împreună cu alte cursuri interesante despre construirea site-ului web.

    După cum puteți vedea, HTML5 oferă multe oportunități noi, așa că oricine este interesat de crearea de site-uri web ar trebui să se familiarizeze cu această tehnologie. Vă doresc succes în studii și nu uitați să vizitați blogul nostru.

    Bună ziua oaspeților acestui blog și abonaților mei fideli. Odată cu dezvoltarea rapidă a tehnologiei, științei și programării, așa cum vedem astăzi, nu este surprinzător faptul că cerințele consumatorilor sunt în creștere. Aceasta înseamnă că mai devreme sau mai târziu apar versiuni îmbunătățite de programe, echipamente și, cel mai important, limbi.

    Citirea articolului vă va oferi o înțelegere clară a granițelor dintre html și html 5. În plus, veți putea opera cu cunoștințele dobândite și veți putea aranja toate site-urile dvs. folosind etichete html 5.

    Vreau să dedic această publicație unei discuții despre html 5. Vom analiza principalele caracteristici ale platformei, elemente noi ale limbajului și diferențele lor față de cele vechi și, de asemenea, vom analiza exemple de cod specifice. Acum să trecem la sucul în sine!

    Comandant-șef al marcajului site-ului, faimosul html

    După ce am citit , precum și alte surse legate de IT, cred că vă pot numi cu încredere „maeștri guru”. La urma urmei, nu vă va fi dificil să spuneți ce este limbajul html și de ce a fost creat. Bine făcut!

    Începătorii în acest domeniu de cunoaștere nu ar trebui să-și facă griji. Voi repeta în mod specific definițiile principale.

    Deci, în primul rând, merită să ne amintim că html este un limbaj de marcare hipertext, adică. text care conține elemente interconectate de formate text, video, audio și grafice. Acest instrument este necesar pentru proiectarea structurii site-urilor, formatarea aspectului paginilor și indicarea locației obiectelor de pe el.

    Etichetele de limbă sunt folosite pentru a gestiona conținutul site-ului. Ce înseamnă „etichetă” și pentru ce este?

    O etichetă este o unitate de limbaj de marcare care ajută la specificarea unei afișări specifice a unui anumit obiect pe pagina unui site web, precum și la indicarea tipului acestuia (link, imagine etc.).

    Elementele de limbaj pot fi simple sau container (de obicei se mai numesc pereche). Ele diferă doar prin aceea că cele pereche pot conține și alte elemente în interiorul lor: etichete sau text.

    Fiecare element al limbajului web în discuție are propriul set de atribute. „Un alt termen? Pentru ce este? – întrebi tu. Din păcate, nu există nicio cale fără terminologie.

    Sunt necesare atribute pentru a extinde gama de capabilități ale unei singure etichete, precum și pentru un control mai flexibil al aspectului containerelor. Desigur, elementele limbajului de marcare pot exista cu ușurință fără a defini atribute. Apoi le va oferi formatarea implicită.

    Mai jos am atașat un tabel cu exemple de etichete html comune pereche și unice cu atributele lor cele mai utilizate. Din păcate, este dificil să oferi o listă completă de atribute, există prea multe. Pentru a face acest lucru, este mai bine să vă referiți la specificațiile de limbă.

    Etichete unice
    Acest exemplu prezintă o singură metaetichetă, care conține informații care nu sunt afișate în browser. Setul de caractere, numele și conținutul sunt atribute ale elementelor care sunt responsabile, respectiv, de codificarea documentului, denumirea meta tag-ului și setarea valorii specificate anterior în nume.
    Eticheta este responsabilă pentru afișarea fișierelor grafice pe paginile de resurse web. Folosind atributul src, este specificată calea către imagine în sine, width specifică lățimea obiectului, iar înălțimea – înălțimea, alt este destinat să afișeze text alternativ dacă este imposibil să încărcați imaginea.
    Etichete pereche
    Cum să gătești corect o caserolă? Eticheta creează o ancoră (adică link). href specifică adresa fișierului la care va avea loc tranziția, targetul specifică exact cum va fi încărcat link deschis(V în acest exemplu se va deschide într-o filă nouă), titlul este responsabil pentru sfatul explicativ atunci când treceți cu mouse-ul peste ancoră.
    O rudă apropiată a limbajului html

    După cum am descris deja în articolele mele anterioare, nu trebuie să confundați html și html 5. Deși HTML 5 este într-un anumit sens o „rudă” a html, este complet noua platforma, a cărui sarcină principală este să susțină fișiere audio și video, animații, afișarea geolocațiilor și multe altele.

    Această specificație oferă pagini web cu noi caracteristici și informează DOM ( model de obiect document) despre prezența unor obiecte noi pe acesta. Acest lucru accelerează încărcarea paginii și o face mai ușoară pentru browsere.

    Un avantaj uriaș pentru dezvoltatori este că, odată cu apariția HTML 5, nu este nevoie să reînvățați nimic. Acceptă toate etichetele html 4 și le completează cu altele moderne. Voi adăuga, de asemenea, un fapt pozitiv la aceasta. Odată cu apariția elementelor precum și , nu mai este nevoie să folosiți etichete de suport media vechi. Acestea includ: , , , și altele.

    Și acum vreau să enumerez principalele etichete de specificații, care includ articolul, deoparte și altele și, de asemenea, să descriu pentru ce au fost create.

    Etichete semantice

    Odată cu apariția platformei HTML 5, au apărut și etichetele semantice. Acum într-un limbaj simplu O să explic ce este.

    Anterior, când scrii servicii web cu interfață ușor de utilizatși evidențierea antetului site-ului, a părții sale principale și a „subsolului” (locul din partea de jos a paginii pentru Informații suplimentare sau atribuire) s-a folosit aspectul bloc folosind divs.

    Poate că acest lucru a fost convenabil, pe de o parte, pentru dezvoltatori, totuși motoarele de căutare, și, de asemenea, browserele au avut dificultăți. Prin urmare, s-a găsit o soluție sub forma etichetelor semantice.

    Aceste elemente standardizează pur și simplu unitățile principale ale site-ului cu nume de etichete care sunt comune tuturor resurselor. Acestea includ și.

    este responsabil pentru determinarea titlului site-ului sau a textului, pentru „subsolul” din partea de jos a paginii de Internet și pentru navigarea pe site. Pentru a învăța materialul, vreau să încercați:

    exemplu practic

    • Blogul site-ului dvs. pentru IT
    • Elementul de meniu 1
    Elementul de meniu 2

    Titlul postării

    Textul primului articol

    Blogger favorit cu drepturi de autor Acest exemplu arată comoditatea de a structura codul când ajutor html