Standardul HTML5 este din ce în ce mai utilizat în designul web modern. Și deși este încă în curs de dezvoltare, multe dintre standardele sale au fost deja aprobate și sunt folosite de toate browserele moderne, inclusiv de cele mobile.
În acest articol, ne vom uita la unele dintre noile funcții ale HTML5 cu exemple specifice despre cum să le folosim în practică.
DOCTYPE nouSă ne amintim cum este definit un document XHTML tipic în secțiunea DOCTYPE:
‹! DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”›
Declararea unui tip de document în limbajul de marcare pare mult mai concis și mai ușor de citit
‹!DOCTYPE html›
Mai mult, puteți utiliza acest DOCTYPE atunci când așezați orice pagină. Dacă browserul nu este familiarizat cu HTML5, va afișa pagina în modul standard.
Semantică îmbunătățită a coduluiSemantica îmbunătățită a codului permite motoare de căutare diferențiați clar tipurile de conținut pe pagină, separat Informații importante, creșteți clasarea paginii pentru interogările de căutare.
Elemente antet și subsol
Acum poți scăpa de construcții ca
‹div id="header"› … ‹/div› ‹div id="footer"› … ‹/div›
Și începeți să folosiți unele care sunt mai ușor de înțeles atât pentru oameni, cât și pentru mașini
‹header› … ‹/header› ‹footer› … ‹/footer›
‹div› după origine nu au nicio structură semantică și pot fi imbricate de mai multe ori unul în celălalt și în cadrul altor containere. Utilizarea unei structuri semantice mai atentă permite motorului de căutare să diferențieze clar unde se află antetul, subsolul și partea principală a informațiilor.
element FIGURA
Luați în considerare următoarea bucată de cod:
‹img src="mars.jpg" alt="Despre Marte" /› ‹p›This is an image of Mars‹/p› !}
ÎN în acest caz, Este dificil pentru motoarele de căutare să stabilească că eticheta ‹p› care conține o descriere a unei imagini este de fapt descrierea acesteia. De aceea, este mai bine să combinați astfel de construcții într-un container comun, care este ‹figura ›:
‹figura› ‹img src="mars.jpg" alt="Despre Marte" /› ‹figcaption› ‹p›This is an image of Mars‹/p› ‹/figcaption› ‹/figure› !}
În acest caz, există o etichetă suplimentară ‹figcapture›, care specifică unde este conținutul figurii și unde este titlul acesteia.
Folosind hgroup
Imaginează-ți că antetul de pe site-ul tău web constă dintr-un titlu principal și un subtitlu. Folosirea etichetelor obișnuite ‹h1› și ‹h2› nu reflectă în niciun fel relația dintre aceste două elemente. Prin urmare, ele pot fi combinate semantic folosind eticheta ‹hgroup›:
‹header› ‹hgroup› ‹h1›Galerie foto‹/h1› ‹h2›Postul nostru vacant în Praga‹/h2› ‹/hgroup› ‹/header›
Nu există tipuri pentru conectarea scripturilor și a foilor de stilEste posibil să utilizați în continuare structuri pentru a conecta scripturi, biblioteci, foi de stil etc. de urmatoarea forma:
‹link rel="stylesheet" href="stylesheet.css" type="text/css" /› ‹script src="script.js" type="text/javascript"›‹/script›
Deci, acum nu mai este nevoie să specificați tipul de fișier care trebuie inclus. Browserul îl va detecta automat. Aceasta înseamnă că atributul type nu mai este necesar:
‹link rel="stylesheet" href="stylesheet.css" /› ‹script src="script.js"›‹/script›
Structura coduluiStandardul XHTML a cerut ca valorile atributelor să fie specificate într-un singur sau ghilimele duble. Standardul HTML5 vă permite să omiteți utilizarea ghilimelelor dacă acestea nu sunt necesare, de ex. valoarea atributului este specificată într-un cuvânt fără spații. Mai mult, nici măcar nu trebuie să închideți elementele pereche. Iată un exemplu:
‹p class=myClass id=pId›Conținut
Cu toate acestea, acest lucru poate afecta lizibilitatea codului din partea dezvoltatorului. Prin urmare, stilul de scriere a codului depinde în totalitate de dvs., deoarece stilul vechi (testat în timp) este încă acceptat.
Conținut editabilHTML5 vă permite să faceți conținutul site-ului dvs. complet editabil, fără a fi nevoie să lipiți câmpuri ascunse pentru a introduce text. Tot ce este necesar este să adăugați atributul contenteditable="true" (sau fără ghilimele, după cum am aflat din paragraful anterior) la elementul pe care doriți să îl faceți editabil. După aceasta, utilizatorul va putea să-și editeze conținutul direct din pagină.
În acest caz, utilizatorul poate adăuga, șterge și edita articole din lista neordonată ‹ul›. Mai jos este un exemplu de listă ale cărei articole pot fi modificate
- Uită la TV
- Ascultă muzică
- Joaca jocuri video
HTML5 oferă utilizatorilor și dezvoltatorilor o mai mare flexibilitate în introducerea informațiilor în formulare. În aceste scopuri, s-au adăugat multe lucruri utile. Să ne uităm la unele dintre ele.
Câmpurile de introducere a e-mailului
Utilizați atributul type="email" pentru eticheta ‹input›, iar câmpurile de introducere vor avea abilități unice suplimentare pentru a verifica corectitudinea adresei introduse, iar dacă adresa este introdusă incorect, browserul va afișa utilizatorului un mesaj de avertizare.
‹input id="email" name="email" type="email" /›
Rezultatul ar putea arăta astfel (Google Chrome):
Există și alte câmpuri de introducere, cum ar fi adresele site-urilor web sau numerele de telefon. Principiul funcționării lor este similar cu câmpul de e-mail.
Folosind indicii
Nu mai este nevoie să folosiți javascript pentru a crea substituenți pentru introducere. câmpuri de text. HTML5 sugerează utilizarea unui special atribut substituent, care poate afișa un sfat explicativ cu text de fundal pentru câmp.
‹input name="email" type="email" placeholder=" [email protected]" /›
Rezultatul este prezentat mai jos:
Acest exemplu va funcționa numai în browsere care acceptă HTML5
E-mail:
Focalizare automată
Fără a utiliza javascript, puteți concentra automat un element după ce pagina s-a încărcat. Pentru a face acest lucru, trebuie să adăugați un atribut fără parametri la câmpul care trebuie introdus mai întâi.
‹input name="name" type="text" autofocus /›
Câmpul de nume va fi activat automat și gata pentru a introduce text.
Câmpuri obligatorii
Dacă trebuie să marcați unele câmpuri ca fiind necesare, acum trebuie doar să specificați atributul. Astfel, la trimiterea formularului, browserul va verifica dacă sunt completate câmpurile obligatorii și, dacă nu, va afișa un mesaj.
‹input name="name" type="text" placeholder="John Smith" required /› !}
Mai jos este o ilustrare a rezultatului acestui cod (Google Chrome):
Interval de intrare
HTML5 introduce un control complet nou - introducere interval, care este un glisor a cărui valoare este modificată prin glisarea unui marcator special între valorile prestabilite.
‹input type="range" name="cantity" min="0" max="100" step=".25" value="10" /›
Atributele min și max sunt folosite pentru a seta valorile extreme ale glisorului, pasul este pasul în care se modifică valoarea. Browserul Google Chrome afișează acest control după cum urmează:
Acest exemplu va funcționa numai în browsere care acceptă HTML5
Stocare localăStocarea locală vă permite să salvați informațiile introduse de utilizator dacă pagina browserului este închisă sau reîncărcată. Acest lucru este foarte convenabil, mai ales în cazurile în care formularul este destul de mare și site-ul a fost închis accidental.
Stocarea locală în sine nu face parte din specificația HTML5, dar este strâns legată de aceasta.
Control depozitare locală apare prin obiectul clasei localStorage folosind două metode setData() și getData() . Mai jos este un exemplu care folosește lista editabilă descrisă mai sus, care va stoca ultimele valori introduse în ea.
‹h1›To-Do List‹/h1› ‹ul contenteditable=true› ‹li›Uită-te la televizor‹/li› ‹li›Ascultă muzică‹/li› ‹li›Joacă jocuri video‹/li› ‹/ul›
JavaScript (folosind biblioteca jQuery, dar aceasta este opțională):
$("#todo").blur(function () ( localStorage.setItem("todoData", this.html); )); if (localStorage.getItem("todoData")) ( $("#todo").html(localStorage.getItem("todoData")); )
Suport multimediaAcum nu mai este nevoie să utilizați pluginuri și biblioteci terțe pentru a vă conecta diverse audioși fișiere video. Toate capabilitățile de încorporare media sunt acum incluse în specificația HTML5.
Audio
Pentru a încorpora într-o pagină fișier de sunet trebuie să utilizați eticheta ‹audio› cu atributele necesare. Exemplul de mai jos afișează pe pagină un bloc de control pentru un fișier audio care conține un link pentru descărcarea acestui fișier. Sunetul va fi redat automat.
‹Comenzi de redare automată audio›
‹source src="file.ogg" /›
‹sursă src="fișier.mp3" /›
‹a href="file.mp3"›Descărcați acest fișier.‹/a›
Pe pagină, acest bloc poate arăta astfel ( browser Google Crom)
Această etichetă are propriile caracteristici de suport în browsere. De exemplu, browser Mozilla Firefox funcționează cu fișiere .ogg, în timp ce browserele Webkit funcționează cu .mp3
Video
Până recent, singura cale inserarea conținutului video într-o pagină HTML a fost integrarea conținutului Flash. Cu toate acestea, această capacitate este oferită acum de browserele care îndeplinesc specificațiile HTML5. Acest lucru a câștigat o popularitate deosebită atunci când cel mai mare site de găzduire video YouTube.com a trecut la formatul HTML5.
Pentru a integra cu succes un videoclip într-o pagină, trebuie să utilizați eticheta ‹video›. Din păcate, nu există un consens între producătorii de browser în ce format ar trebui să fie prezentat videoclipul, așa că fiecare dintre ei își promovează propriul format. În timp ce IE și Safsri acceptă video H.264 (care a fost acceptat de playerele Flash), Opera și Firefox promovează sursa deschisa Formatele Vorbis și Theora. Chrome, pe de altă parte, poate afișa corect videoclipuri în toate formatele, inclusiv WebM.
‹preîncărcare comenzi video› ‹source src="video.ogv" type="video/ogg; codecs="vorbis, theora""" /› ‹source src="video.mp4" type="video/mp4; codecs=" avc1.42E01E, mp4a.40.2"" /› ‹p›Browserul dvs. este vechi. ‹a href="video.mp4"›Descarcă în schimb acest videoclip.‹/a› ‹/p› ‹/video›
Nu toate browserele pot afișa videoclipuri HTML5, așa că sub eticheta ‹sursă› puteți specifica un link pentru a descărca videoclipul sau puteți integra un player Flash.
Atributul de preîncărcare permite browserului să înceapă automat încărcarea videoclipului, ceea ce poate fi util dacă videoclipul este suficient de mare. Atributul de control vă permite să setați controale standard pentru fluxul video.
De la autor: salut prieteni! În acest articol vreau să vă spun puțin despre html5. Spune-ne ce este html5 și ce este nou în el. Ce oportunități noi oferă dezvoltatorilor? HTML5 este un concept foarte larg. Și unele tehnologii care se numesc HTML5, în general, nu sunt html5, dar mai întâi de toate...
Primul este standardul HTML5, un document aflat pe site-ul web W3C, care descrie toate noile etichete, atribute, noi API-uri și o serie de documente conexe, care includ unele detalii suplimentare, ca un API pentru Canvas.
Al doilea este HTML5 „mare”, de marketing, la modă, o umbrelă pentru o întreagă generație de noi tehnologii, inclusiv atât specificația HTML5 în sine, cât și multe module CSS3, diverse API-uri pentru JavaScript și nou standard pentru JavaScript - ECMAScript5.
Să ne uităm la unele caracteristici cheie html5:
E mai simplu, mai mult structură simplă elementele din pagină, facilitând crearea și depanarea codului.
Oferă elemente standard pentru obiectele media care anterior necesitau instalarea de pluginuri separate care trebuiau actualizate în mod constant.
Are propria sa integrare cu interfețe care pot fi necesare în aplicatii moderne. Un exemplu este localizarea geografică, care permite browserului să determine locația utilizatorului (coordonatele acestuia). Anterior, acest lucru se putea face doar prin GPS.
Ce vă oferă HTML5?Pentru dezvoltatori, html5 ajută la scrierea unui cod semantic clar. Vă permite să gestionați multe procese de pe pagină folosind propriile metode standard, fără a utiliza pluginuri și servicii javascript sau terță parte. Aceasta înseamnă că unele probleme de compatibilitate între browsere sunt rezolvate deoarece browserele implementează funcții noi în același mod.
De asemenea, html5 face lucru convenabil online și pentru utilizatori obișnuiți. De exemplu, viteza de lucru crește, utilizarea browserului devine mai convenabilă. Pentru a viziona videoclipuri de pe YouTube, nu trebuie să instalați pluginuri suplimentare și să le actualizați constant.
Obiective HTML5Pe scurt, obiectivele html5 pot fi numite astfel:
Eliminarea pluginurilor precum Flash pentru funcții generale de care toată lumea are nevoie. Creați suport nativ pentru lucruri precum audio, video etc.
Nevoia redusă de JavaScript și cod suplimentar, datorită utilizării noilor elemente html5.
Asigurați coerența între browsere și dispozitive.
Faceți totul cât mai transparent posibil.
Caracteristici noi ale HTML5
Nou funcţionalitate sunt multe în html5. Astăzi chiar și cel mai mult ultimele versiuni Browserele moderne acceptă pe deplin toate funcțiile html5. Prin urmare, în acest articol vom lua în considerare doar principalele caracteristici ale html5.
Elemente html5 noiNoile elemente html5 vă permit să creați mai rapid markupul paginii, devine mai simplu, mai ușor de înțeles, iar procesul de depanare este simplificat. Iată câteva etichete noi:
Și
pentru toate tipurile de meniuri
pentru barele laterale sau conținutul asociat
pentru articole
aproape la fel ca div
și etichetele vă permit să redați videoclipuri fără pluginuri
Folosesc javascript pentru a desena pe pagină
pentru a insera conținut extern într-o pagină
Odată cu faptul că au apărut noi etichete etichete existente capătă un nou sens în HTML5. Deci, dacă mai devreme alegerea între i și em (similar cu b și strong) era adesea în favoarea unei scrieri mai scurte, astăzi acestea sunt etichete cu încărcări semantice diferite, chiar dacă implicit au aceeași prezentare în cursive sau cu aldine.
O altă parte a inovațiilor se referă direct la problemele de accesibilitate: aici, în primul rând, despre care vorbim despre arie și atribute de rol, care vă permit să marcați scopul și rolurile conținutului. Aceste informații pot fi utilizate ulterior, de exemplu, de programele de citire a ecranului.
Trebuie spus că asigurarea accesibilității nu este cea mai banală sarcină, iar HTML5 este aproape prima dată când se acordă atât de multă atenție acestei probleme.
Un alt avantaj al html5 este că are funcții avansate, inclusiv integrarea API. Acest lucru facilitează scrierea codului javascript între browsere pentru aplicații complexe. Aici sunt câțiva dintre ei:
Audio și video vă permit să redați videoclipuri în browser fără pluginuri.
Geolocalizare: determină locația vizitatorului.
Trageți și plasați: de exemplu, pentru a descărca un fișier trăgându-l în browser.
Cache-ul aplicației: Oferă suport pentru deschiderea site-urilor web offline.
Lucrători web: rulează JavaScript în fundal
Evenimente trimise de server: Permite serverelor să actualizeze pagini web în browser după ce acestea au fost deja încărcate, mai ușor și mai eficient decât AJAX și JavaScript.
Stocare offline de date: vă permite să stocați date local în browser, indiferent de cookie-uri
Exemple de utilizare a HTML5Să vedem html5 în acțiune! HTML5 vă permite să creați un marcaj nou, mai simplu și mai curat pentru pagini. Codul devine mai orientat spre conținut și mai ușor de citit și de înțeles. Iată un exemplu de pagină web html5 simplă:
Titlul paginii
Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.
Subtitlul articoluluiVestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.
Conținut din bara lateralăCopyright numele tău aici 2014. Toate drepturile rezervate.
< ! doctype html > < html lang = "en" > < head > < meta charset = "utf-8" > < title > < / title > < meta name = "author" content = "" / > < meta name = "description" content = "" / > < link rel = "stylesheet" href = "assets/css/style.css" / > < ! -- [ if lt IE 9 ] >
< ! [ endif ] -- > < / head > < body > < header > < h1 > < a href = "/" >Titlul paginii< / a > < / h1 > < nav > < ol > < li > < a href = "" >Nav Link 1< / a > < / li > < li > < a href = "" >Nav Link 2< / a > < / li > < li > < a href = "" >Nav Link 3< / a > < / li > < / ol > < / nav > < / header > < article > < h1 >Antet articol< / h1 > < p >Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.< / p > < h2 >Subtitlul articolului< / h2 > < p >Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.< / p > |
Astăzi vom vorbi despre semantică în HTML5. Am scris deja o scurtă recenzie despre . Vă recomand să vă familiarizați cu el înainte de a citi acest articol. Acum ne vom uita la această problemă mai detaliat, despre cum să compunem corect și competent structura semantică a unui document HTML5.
În acest articol vom crea treptat o pagină HTML și o vom decora cu etichete semantice HTML5.
Figura - Structura semantică pentru o pagină HTML5.
DOCTYPE și metaetichete în titlul paginiiSa incepem cu șablon standard document HTML5 și adăugați meta etichete in cap:
Titlul paginii
Am adăugat o etichetă care este responsabilă pentru Cuvinte cheie. Și eticheta care este responsabilă pentru descrierea paginii. Pentru Optimizare SEO aceste etichete sunt necesare. De asemenea, este necesar să completați corect eticheta. Titlul paginii trebuie sa fie unic pentru intregul site, si sa contina in titlu intreaga esenta a paginii pentru care este specificat.
Să mergem mai departe. HTML5 introduce noi etichete care sunt folosite pentru a crea markup semantic într-un document. Acestea sunt etichete header, nav, main, article, side, footer etc. În ceea ce privește afișarea, acestea funcționează la fel ca etichetele obișnuite, adică elemente de bloc. Dar dacă nu are o încărcare semantică, atunci header, nav, main și altele ar trebui folosite doar în mod semnificativ.
Titlul paginiiAntetul paginii este formatat în eticheta antetului. Vă rugăm să rețineți că titlul paginii este scris folosind eticheta h1.
Titlul Site-ului
Dacă avem și un slogan lângă titlu, atunci îl plasăm într-un p, div sau span.
Titlul Site-ului
sloganul site-ului
O notă despre eticheta H1
Trebuie remarcat faptul că în HTML5 eticheta H1 este folosită pentru a indica titlul containerului în care se află (acesta ar putea fi antet, secțiune, articol etc.)
Înainte de apariția etichetelor HTML5, semantica era oarecum diferită și diferită. Deci, în HTML4 ar putea exista doar un titlu H1 pe pagină! De regulă, acesta era titlul articolului sau titlul paginii (de exemplu, dacă este o pagină de categorie pe care sunt afișate mai multe articole.) H2 a fost folosit pentru subtitluri sau pentru secțiuni ale articolului principal. H3 pentru subsecțiuni și așa mai departe.
Navigare în paginăDesignul navigației principale a site-ului ar trebui să fie conținut în eticheta nav. De asemenea, ar trebui să vă amintiți că este considerată o bună practică să proiectați navigarea cu elemente de listă.
- Acasă
- Portofoliu
- Galerie
- Contacte
Conținutul principal al paginii este formatat în eticheta principală. Acesta ar putea fi un articol, sau mai multe previzualizări ale articolului dacă vorbim despre o pagină de blog cu mai multe intrări. Nu puteți plasa o bară laterală, un antet de pagină, un subsol sau navigație principalăîn eticheta principală!
...conținutul paginii principale...
Design articolEticheta articol este folosită pentru a împacheta articolele. În general, această etichetă conține un bloc de conținut care poate fi scos din contextul paginii și utilizat separat în altă parte. Acesta ar putea fi un articol (textul integral al articolului sau o previzualizare), o postare pe forum etc.
În exemplul de mai jos, am arătat designul articolului în context, în interiorul etichetei principale. Articolul are un bloc de antet cu titlul articolului. Data publicării articolului este stabilită cu o etichetă specială timp, care este afișat ca element obișnuit în linie. Eticheta de timp are un atribut special în care timpul de publicare trebuie specificat în format mașină. Acesta poate fi doar datetime="2015-09-30" sau cu ore, minute și secunde datetime="2015-09-30T15:25:55" . Parametrul pubdate indică faptul că articolul a fost publicat în același timp cu care a fost scris. Dacă aceasta este știri, atunci este posibil ca ora știrilor să fie una, iar ora publicării să fie diferită, pentru aceasta trebuie să specificați de două ori eticheta de timp și să puneți pubdate numai în eticheta unde este indicată ora publicării.
... Titlul articolului 30 septembrie Subtitlul articolului
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?
Din exemplul de mai sus, puteți vedea că etichetele antet și subsol au fost folosite în interiorul articolului pentru a evidenția titlul și subsolul articolului.
Bară laterală sau coloană cu widget-uriPentru fiecare element individual bara laterală folosim blocul de lângă. În interiorul acestuia, titlul este formatat cu eticheta h1. Deci, o coloană din bara laterală ar putea arăta astfel:
Titlul widgetului... Ultimele note... Comentarii populare ...
Eticheta secțiuniiEticheta de secțiune este folosită pentru a reprezenta un grup sau o secțiune de conținut legat tematic.Folosirea sa este similară cu un articol, principala diferență fiind că conținutul dintr-un element este permis să fie lipsit de sens în afara contextului paginii în sine. Se recomandă utilizarea etichetelor ( – ) pentru a indica subiectul secțiunii.
Pentru a da un exemplu al articolului pe care îl citiți acum, puteți încheia fiecare paragraf într-o etichetă. De exemplu, eticheta de secțiune poate fi folosită pentru a evidenția blocuri de conținut pe o pagină de destinație. Acest lucru sună similar cu definiția unui element div, care este adesea folosit ca un container pentru conținut. Diferența este că un div nu are semnificație semantică și nu spune nimic despre conținutul din interiorul său. Eticheta de secțiune, dimpotrivă, este folosită pentru a indica în mod clar că conținutul din ea este legat în sens. Poți înlocui unele dintre ale tale etichete div la secțiunea , dar întotdeauna răspundeți la întrebarea: „Este acest conținut legat unul de celălalt sau nu?”
Un exemplu de utilizare a etichetei de secțiune într-o listă care listează orașe:
Un eveniment în afară de orașe
Alăturați-vă nouă în aceste orașe în 2010.
SeattleUrmați drumul din cărămidă galbenă.
BostonAcesta este Beantown pentru prietenii săi.
MinneapolisE atât de frumos.
Cazarea nu este asigurată. Subsol site - SubsolSubsolul site-ului este conceput cu eticheta
© 2015 site-ul Copyright
ConcluziePuteți utiliza instrumentul de contur HTML5 pentru a verifica structura paginii. Acesta arată structura paginii pe blocuri și titluri.
Semantica în HTML5 nu se limitează la etichetele prezentate mai sus în articol. Dar, folosind exemplele date, vă puteți reîmprospăta marcajul și puteți face site-ul mai prietenos cu motorul de căutare, ceea ce va afecta mai mult rating ridicat site-ul în rezultatele căutării.
Pentru a continua acest subiect, puteți explora alte etichete HTML5 noi. Precum și microformate pentru proiectarea și structurarea datelor, cum ar fi schema.org
O notă importantă despre utilizarea etichetelor HTML5. Specificația nu indică reguli stricte de utilizare etichete semantice, sunt oferite doar recomandări pentru utilizarea lor. Dacă nu înțelegeți sau nu știți unde și ce etichetă HTML5 să utilizați, este mai bine să utilizați un div pentru a nu deteriora sau rupe structura documentului.
Articole și materiale
Document HTML5 simplu
Să ne uităm la unul dintre cele mai simple documente HTML5. Se începe prin a specifica tipul de document folosind cod special descrieri ale tipului de document (sensul acestui cod este explicat în secțiunea următoare), după care se stabilesc codificarea și numele documentului și apoi conținutul acestuia. În acest caz, conținutul constă dintr-un paragraf de text:
Document HTML5 mic
Acest document simplu poate fi simplificat și mai mult. De exemplu, etichetă finală de fapt, nu este necesar în standardul HTML5, deoarece browserele știu cum să închidă totul elemente deschise la sfârșitul documentului (iar standardul HTML5 legalizează acest comportament). Dar tăierea unor astfel de colțuri în loc de simplificare face markupul mai dificil de înțeles și poate introduce erori neașteptate.
Majoritatea dezvoltatorilor web sunt de părere că utilizarea secțiunilor tradiționale este utilă pentru a face documentul mai ușor de înțeles, deoarece ele separă clar informațiile despre pagină (titlul paginii) de conținutul în sine (corpul paginii). Această structură este utilă în special atunci când adăugați scripturi, foi de stil și meta elemente la o pagină:
Document HTML5 mic
Să agităm browserul în stil HTML5!
În cele din urmă, întregul document (cu excepția liniei doctype) poate fi împachetat într-un element tradițional, așa cum se arată în următoarea listă:
Document HTML5 mic
Să agităm browserul în stil HTML5!
Până în HTML5, fiecare versiune a specificației oficiale HTML necesita utilizarea elementului, chiar dacă prezența acestui element nu afectează în niciun fel modul în care browserul procesează restul codului paginii. În HTML5, utilizarea acestui element este lăsată în totalitate la discreția personală a dezvoltatorului.
Utilizarea elementelor și a elementelor este pur și simplu o chestiune de stil. O pagină fără aceste elemente va funcționa perfect chiar și pe browsere mai vechi care nu au auzit niciodată de HTML5. De fapt, browserul își asumă automat prezența acestor elemente. Prin urmare, dacă te uiți la Modelul DOM(un set de obiecte software reprezentând o pagină) folosind un script JavaScript, aceasta va conține obiecte pentru elementele , și , chiar dacă dezvoltatorul nu le-a folosit.
În acest moment, această pagină exemplu se află undeva între cel mai elementar document HTML5 și un punct de plecare avansat pentru o pagină web HTML5 practică. În secțiunile ulterioare vom adăuga restul elementele necesareși săpați mai adânc în marcaje.
Descrierea tipului de document HTML5Prima linie a fiecărui document HTML5 descrie întotdeauna tipul de document. Această descriere indică clar că ceea ce urmează este conținut HTML5 și arată astfel:
Primul lucru pe care îl observați despre tipul de document HTML5 este simplitatea sa uimitoare. Comparați acest lucru, de exemplu, cu descrierea greoaie a tipului de document pe care dezvoltatorii web trebuie să îl folosească atunci când lucrează cu XHTML 1.0 strict:
Chiar și dezvoltatorii web profesioniști au fost forțați să introducă o descriere a tipului de document XHTML prin copierea și lipirea dintr-un alt document. Iar descrierea tipului de document HTML5 este scurtă, clară și ușor de introdus manual.
Descrierea tipului de document HTML5 este de asemenea notabilă prin faptul că nu conține un număr. versiunea oficială HTML (5 pentru HTML5). Pur și simplu afirmă că pagina este o pagină HTML. Acest lucru este în conformitate cu noul concept de HTML5 ca limbaj viu. Noile funcții adăugate la HTML sunt disponibile automat pentru plasare pe pagină, fără a necesita modificări ale descrierii tipului de document.
Toate acestea ridică o întrebare dificilă: dacă HTML5 este un limbaj viu, atunci de ce o pagină are nevoie chiar de o descriere a tipului de document?
Răspunsul la această întrebare este că descrierea tipului de document continuă să fie utilizată din motive istorice. Când procesați o pagină cu o descriere a tipului de document lipsă, majoritatea browserelor (inclusiv Internet Explorerși Firefox) accesați modul de compatibilitate (modul Quirks). În acest mod, ei încearcă să afișeze pagina ținând cont de erorile din regulile care au fost folosite în mai multe versiuni anterioare. Problema cu aceasta este că modul de compatibilitate al unui browser poate fi diferit de modul de compatibilitate al altui browser, drept urmare paginile concepute pentru un browser vor afișa cel mai probabil erori pe alt browser, cum ar fi dimensiunea incorectă a fontului, aspectul rupt. și așa mai departe.
Și atunci când browserul găsește o descriere a tipului de document pe pagină, știe că prelucrarea acestei pagini trebuie efectuată urmând reguli mai stricte modul standard, care asigură formatarea și structura coerentă a paginii atunci când este afișată de orice browser modern. Cu câteva excepții, browserul este complet indiferent la ce tip de document este specificat în descriere. Pur și simplu verifică dacă pagina are un fel de descriere a tipului de document. O descriere a tipului de document HTML5 este pur și simplu cea mai scurtă descriere a tipului de document validă care activează modul standard de browser.
Codificarea caracterelorO codificare este un standard care spune computerului cum să convertească textul într-o secvență de octeți atunci când scrie text într-un fișier (și cum să îl convertească înapoi la deschiderea fișierului). Din motive istorice, există multe codificări diferite în întreaga lume. În zilele noastre, aproape toate site-urile web folosesc codarea compactă și rapidă UTF-8, care acceptă toate celelalte alfabete de care veți avea nevoie vreodată.
Serverele web sunt adesea configurate pentru a spune browserelor care le vizitează că paginile oferite de server au o anumită codificare. Dar nu puteți fi sigur că serverul web pe care intenționați să vă găzduiți site-ul web va fi configurat în acest fel (cu excepția cazului în care este al dvs.). propriul server). În plus, încercarea browserului de a ghici cea mai probabilă codificare utilizată poate eșua din cauza unor probleme de securitate obscure. Din aceste motive, ar trebui să includeți întotdeauna informații despre codificarea utilizată în marcarea paginii dvs.
HTML5 facilitează această sarcină. Pentru a face acest lucru, trebuie doar să introduceți elementul chiar la începutul blocului (sau, dacă elementul nu este utilizat, imediat după codul de descriere a tipului de document):
Document HTML5 mic
Instrumentele de dezvoltare web precum Dreamweaver sau Expression Web inserează acest element automat atunci când creați pagina. Aceste instrumente oferă și salvarea fișierelor în Codificare UTF. Dar atunci când creați o pagină web folosind un editor de text obișnuit, poate fi necesar să luați pași suplimentari pentru a vă asigura că fișierele sunt salvate în codificarea corectă.
LimbaEste considerată o formă bună pentru a indica limbajul natural al unei pagini web. Aceste informații pot fi uneori utile altora, de exemplu, motoarele de căutare le pot folosi pentru a filtra rezultatele căutării pentru a returna numai pagini într-o limbă specificată.
Cel mai simplu mod de a insera informații despre limbă într-o pagină web este prin intermediul elementului:
Informațiile despre limbă pot fi utile și dacă pagina conține text limbi diferite, care trebuie citit folosind un cititor de text pe ecran. În acest caz, atributul lang cu codul de limbă corespunzător este inserat în locul dorit în document, de exemplu, în elemente care acoperă text în diferite limbi. În acest fel, cititorul de text pe ecran poate determina ce text poate citi.
Adăugarea unei foi de stilAproape fiecare pagină a unui site web profesional proiectat corespunzător utilizează foi de stil. Pentru a specifica foaia de stil necesară, utilizați un element dintr-un bloc de document HTML5:
Document HTML5 mic
Această metodă este similară cu specificarea foilor de stil în documentele HTML tradiționale, dar puțin mai simplă. Deoarece există un singur limbaj pentru foile de stil în cascadă - CSS, adăugarea atributului type="text/css", care era necesar anterior, nu mai este necesară.
Adăugarea codului JavaScriptLimba Scripturi JavaScript a fost creat inițial ca o modalitate care necesită multă muncă de a adăuga strălucire și farmec paginilor web plictisitoare. Utilizarea principală a JavaScript astăzi s-a mutat de la dezvoltarea clopotelor și fluiere frontale la dezvoltarea de aplicații web personalizate, inclusiv clienți de e-mail super-eficienți, editori de text și motoare de cartografiere care rulează direct în browser.
Codul JavaScript este inserat într-un document HTML5 de către în generalîn același mod ca o pagină HTML tradițională. Următoarea lista este un exemplu de inserare a codului JavaScript într-un document web folosind un link către fișier extern:
Document HTML5 mic
Atributul language="JavaScript" este opțional deoarece, cu excepția cazului în care este specificat un alt limbaj de scripting (și întrucât JavaScript este singurul limbaj de scripting acceptat pe scară largă pentru HTML, probabilitatea ca acest lucru să se întâmple este neglijabilă), browserele presupun automat că este folosit JavaScript. Dar chiar și atunci când conectați la un fișier JavaScript extern, trebuie să vă amintiți eticheta de închidere. Dacă omiteți această etichetă din cauza supravegherii sau încercând să scurtați codul utilizând sintaxa elementului gol, pagina nu va funcționa conform așteptărilor.
Dacă petreceți mult timp testând paginile JavaScript în Internet Explorer, adăugarea unei etichete poate fi utilă MOTW (Marca de internetul- etichetă caracteristică rețelei)în bloc imediat după linia de codificare. Acest lucru se face astfel:
Document HTML5 mic
Această linie de cod îi spune Internet Explorer să trateze pagina ca și cum ar fi fost încărcată de pe un site web la distanță. În caz contrar, IE trece la un mod special de blocare, afișează un avertisment de securitate în linia de mesaje și refuză să execute orice Cod JavaScript până când faceți clic pe butonul „Permite conținut blocat”.
Toate celelalte browsere ignoră marcajul MOTW și utilizează aceleași setări de securitate pentru ambele pagini încărcate de pe site-uri web la distanță și fisiere locale HTML.
