Bazele aspectului semantic în HTML5. Bazele aspectului semantic în HTML5 Noțiunile de bază ale atributelor utile HTML5 pentru aspect

XHTML este potrivit pentru învățarea și dezvoltarea stilului corect de aspect datorită regulilor sale formale și a sintaxei mai rigide în comparație cu HTML. Cu toate acestea, în cei zece ani de la lansare, XHTML a devenit învechit și nu mai corespunde conditii moderne. În special, nu există instrumente standard pentru redarea audio și videoclipuri, nu există suport pentru geolocalizare, nu există posibilitatea de a desena direct în browser, lipsesc unele elemente de formular și multe altele. Desigur, unele dintre aceste probleme au fost rezolvate de mult prin pluginuri de browser terță parte, de exemplu, Adobe Flash redă videoclipuri, Google Gears implementează baze de date locale și rulează scripturi în fundal. Limbajul de programare JavaScript vă permite să implementați funcționalitatea lipsă a formularelor și diverse efecte pe pagina. Dar toate aceste tehnologii au anumite limitări - pluginurile trebuie instalate suplimentar și este posibil să nu funcționeze ca Flash pe iPhone și iPad și nu totul poate fi făcut prin JavaScript. Popularitate dispozitive mobile, dezvoltarea canalelor de comunicare a mutat accentul pe tehnologiile web pe multimedia, i.e. redarea în flux audio și video, precum și fișiere aferente. Nu există nimic din toate acestea în XHTML.

Consorțiul W3, dezvoltatorul specificațiilor HTML și XHTML, a început să lucreze la XHTML 2.0, care ar depăși aceste neajunsuri ale versiunii anterioare. Ca urmare, acest proiect a fost înghețat și nu a fost finalizat. Preocupați de progresul lent al lucrărilor, dezvoltatorii browserelor Safari, Firefox și Opera și-au fondat propria organizație, WHATWG (Web Hypertext Application Technology Working Group), care a preluat bannerul căzut. Ideile W3C, nevoile moderne ale utilizatorilor și opiniile dezvoltatorilor web au fost întruchipate într-un nou limbaj de marcare numit HTML5.

Trebuie înțeles că, în ciuda asemănării numelor, HTML5 nu este o continuare a HTML4 sau XHTML. Mai degrabă, vorbim despre noul limbaj Web Applications 1.0, care în scopuri de marketing este numită printr-o abreviere familiară și este construită pe baza HTML.

Oficial, standardul HTML5 nu a fost încă finalizat, dar browserele moderne pot deja parțial să lucreze cu el. Deci, ce lucruri interesante ne oferă HTML5? Iată câteva dintre caracteristicile sale.

  • Suport pentru geolocalizare - determinarea locației utilizatorului pe hartă și utilizarea acestor informații pentru a calcula traseul acestuia, a afișa magazinele din apropiere, cinematografele, cafenelele și alte date.
  • Redarea videoclipurilor.
  • Redați fișiere audio.
  • Stocare locală - permite site-urilor să stocheze informații calculator localși contactați-o mai târziu.
  • calcul de fundal - mod standard rulează JavaScript în browser în fundal.
  • Aplicațiile offline sunt pagini care pot funcționa atunci când internetul este deconectat.
  • Desen - în interiorul unei etichete folosind JavaScript puteți desena forme, linii, puteți crea degrade și transforma obiecte din mers.
  • Elemente noi de formular: pentru dată, oră, căutare, numere, selecție de culori etc.

Pe lângă aceste caracteristici, HTML5 include etichete noi pentru marcarea documentelor, elimină etichetele învechite și modifică altele. Pentru a proiecta pagini web, trebuie mai întâi să înțelegeți ce s-a schimbat și cum să convertiți pagina în HTML5.

După ce ați studiat cu atenție această secțiune, veți învăța cum să vă creați site-uri web de la zero, fără nici un designer sau CMS, dar folosind exclusiv HTML 5 și CSS 3. În viitor, când veți crea deja proiecte folosind CMS popular, folosind cunoștințele acumulate, veți putea interveni în codul sursă al site-ului, modificând designul și structura pentru a se potrivi nevoilor dumneavoastră.

Cursul constă din 25 de lecții. Prima parte vă va învăța să înțelegeți și să scrieți cod HTML, a doua vă va prezenta foile de stil în cascadă (CSS). Din aceste materiale recomand să începeți să studiați construirea site-ului web.

  • 1 Cum să creați un site web în Notepad

    Creați prima pagină HTML fără a apela la altceva decât la cel mai simplu lucru pe care îl știe toată lumea editor de text, încorporat în orice Windows - Notepad. Dar nu o face doar, înțelege cum funcționează.

  • 2 Adobe Dreamweaver - un program pentru crearea unui site web

    Veți face cunoștință cu unul dintre cele mai populare și multifuncționale instrumente concepute pentru a simplifica zilele de lucru ale designerilor de layout și ale designerilor web - programul Adobe Dreamweaver.

  • 3 Ce ​​este HTML

    Principalele întrebări care îi chinuie pe începători. Ce este HTML? De ce este nevoie? Ce vă permite să faceți? Care este mai bun - HTML4 sau HTML5? Toate răspunsurile sunt în articol.

  • 4 Etichete

    Etichetele sunt unitatea de bază a limbajului HTML. Nici o singură pagină web nu se poate descurca fără ele. Acest articol vă va prezenta containerele HTML de bază. Din acesta veți învăța cum să scrieți corect etichetele și să înțelegeți parțial codul HTML.

  • 5 atribute

    Etichetele nu au doar conținut, ci și atribute, care la rândul lor au sens. Toate acestea vor fi discutate în articol. Unde să cauți atribute? Cum să-l notezi corect? Ce atribute pot fi atribuite oricărei etichete fără excepție? Veți învăța, de asemenea, cum să permiteți utilizatorului să editeze orice element de pagină, cum să setați un meniu contextual unic pentru fiecare obiect și cum să ascundeți conținutul unui element astfel încât să nu fie afișat în browser.

  • 6 Formatarea textului în HTML

    Tot ce are legătură cu designul textului: cum să creați titluri, să atribuiți caractere aldine sau cursive, să reduceți/măriți dimensiunea textului sau să citați ceva. Te așteaptă mult mai mult în articol. secrete interesante formatarea textului folosind HTML. Și, cel mai important, toate acestea sunt prezentate cu exemple clare.

  • 7 Crearea listelor

    Etichetat, numerotat, imbricat - orice doriți. Veți învăța, de asemenea, cum să numerotați o listă cu majuscule latine sau cifre romane și chiar în reversul, cum să începeți să numerotați nu de la unul și lucruri similare. Și, de asemenea, vei întâlni foarte puțini oameni listă celebră definiții.

  • 8 Crearea legăturii

    Legăturile sunt aproape elementul principal al internetului, fără de care nu ar exista coerența paginilor. Învățați să creați legături folosind exemple, aflați cum diferă căile relative de cele absolute, familiarizați-vă cu legăturile interne și grafice, aflați cum să le puneți în e-mail și Skype.

  • 9 Inserarea imaginilor

    Imaginile decorează pagina, așa că posibilitatea de a le adăuga este o abilitate foarte utilă. Și dacă transformi imaginea într-o hartă de navigare, atunci aceasta devine nu numai un element drăguț, ci și un element foarte util. Învață să creezi astfel de obiecte folosind exemplele vizuale din articol.

  • 10 Inserarea tabelelor

    După ce ați studiat cu atenție această secțiune, veți învăța cum să lucrați singur cu tabele. Structurile întregi site-uri web au fost odată create pe baza tabelelor, dar acest lucru va fi discutat în lecția următoare.

  • 11 Aspectul tabelar al site-ului

    Cum poți chiar să proiectezi un întreg site web? Există multe moduri, una dintre ele este să o faci folosind tabele. Veți afla care este această metodă. Exemple ilustrative, ca întotdeauna, sunt prezente și vă vor ajuta să stăpâniți cu ușurință abordarea tabelară.

  • 12 rame

    Acest articol este pentru cei care doresc să învețe cum să afișeze o pagină complet diferită într-un document HTML. Veți afla ce sunt cadrele, cum au fost create în trecut și cum sunt create acum și vă veți familiariza, de asemenea, cu atributele disponibile pentru ele.

    • 13 Ce este CSS

    Care sunt principalii operatori și elemente prezenți într-un document de foaie de stil în cascadă, ce este oricum acest CSS, de ce este necesar și cum diferă de HTML și, cel mai important, cum să legați o foaie de stil în cascadă la un element HTML.

  • 14 text CSS

    Exemplele arată cum să aliniați textul pe orizontală și pe verticală, să schimbați indentarea și spațierea între linii, să adăugați subliniere sau supraliniere, să măriți spațiul dintre caractere și să schimbați majuscule și minuscule.

  • 15 fonturi CSS

    După ce ați citit articolul, veți înțelege principiile grupării fonturilor în CSS, veți afla care dintre ele sunt acceptate de orice browser, veți afla cum să le schimbați dimensiunea și stilul, culoarea și saturația. Veți înțelege abrevierile RGB și HSL și, de asemenea, veți afla de ce litera A este uneori adăugată acestora.

  • 16 link-uri CSS

    Merită citit după ce ați stăpânit linkurile în HTML, deoarece acest articol vă va învăța nu cum să le creați, ci cum să le formatați și cum să le setați aspect puteți nu numai pentru link-uri diferite, ci și pentru același aflat în diferite state. Să presupunem că, dacă nu ați făcut clic pe el încă, va fi albastru, dacă treceți cu mouse-ul peste el, va fi verde cu text subliniat, dacă ați dat clic pe el, va fi galben și aldin, iar dacă ați dat clic pe el, va fi italic și violet.

  • 17 tabele CSS

    Totul despre design corect tabele: lățimea și înălțimea, poziția antetului, eliminarea chenarelor duble, definirea distanțelor, ascunderea fundalului și multe altele, susținute de exemple live.

  • 18 liste CSS

    Știați că puteți seta nu numai un cerc, ci și un cerc sau chiar un pătrat ca marcator de listă? Da, cel puțin o imagine arbitrară. Știați că, pe lângă numerotări standard, puteți seta, de exemplu, armeană tradițională? Cum să transformi un marker dintr-un marcaj remarcabil într-unul simplificat? Nu? Atunci aruncați o privire la articol, nu există doar teorie, ci și exemple.

  • 19 fundal CSS

    Totul despre fundal. Culoarea pe care este scris textul. O imagine față de care este afișată întreaga pagină: repetată orizontal, vertical, în toate direcțiile simultan, poziționată, scalabilă etc.

  • 20

De asemenea, puteți descărca versiunea XHTML a acestui șablon!

Pasul 1 - Proiectare

Fiecare proces de creare a unui site web începe cu o idee. În această etapă, designerii folosesc de obicei Photoshop pentru a rezolva toate detaliile.

După aceasta, întregul design este codificat folosind HTML și CSS.

Pasul 2 - HTML

Este important să rețineți că HTML5 este încă un lucru în curs. Și conform diverselor estimări, va dura până în 2022 (absolut serios). Cu toate acestea, unele piese sunt deja gata și pot fi folosite astăzi.

În acest tutorial vom folosi câteva etichete noi:

antet- ne vom înveli pălăria în ea
subsolul- pentru subsol
secțiune- grupează conținutul în secțiuni (de exemplu, secțiunea principală, bara laterală...)
articol- separă articolele din întreaga pagină
nav- contine navigatie
figura- de obicei conține o imagine ilustrativă pentru articol

Aceste etichete sunt folosite în același mod ca div-urile obișnuite. Singura diferență este că aceste etichete separă semantic pagina. Cu alte cuvinte, îți poți prezenta pagina în așa fel încât să devină imediat clar despre ce este vorba. Drept urmare, motoarele de căutare vă vor oferi vizitatori mai țintiți.

Cu toate acestea, există unele limitări în utilizarea HTML5 astăzi. Una dintre ele este toată această linie de browsere Internet Explorer - nu acceptă aceste etichete (dar acest lucru poate fi rezolvat adăugând puțin JavaScript). Prin urmare, este încă prea devreme pentru a trece complet la HTML5.

Prin urmare, la începutul lecției, aveți acces și la un link pentru a descărca același șablon, dar în versiunea XHTML (funcționează în toate browserele acum).

template.html - capac

Codarea unui șablon CSS3 și HTML5 pe o pagină | Tutorialzine demo .clear ( zoom: 1; afișare: bloc; )

Este posibil să observați unul nou pe prima linie care spune browserului că pagina este construită folosind standardul HTML5.

După ce am specificat foaia de stil și titlul documentului, conectăm JavaScript special care va ajuta la afișarea corectă a HTML5 în orice IE. Aceasta înseamnă că un utilizator IE cu JS dezactivat nu va vedea nimic frumos. De aceea, merită să luați în considerare utilizarea versiunii XHTML a acestui șablon.

template.html -corpul documentului

La sfârșit avem eticheta de subsol.

Pasul 3 - CSS

Deoarece folosim HTML5, trebuie să luăm pași suplimentari pentru stilizare. Noua versiune a etichetelor HTML nu conține încă stiluri implicite. Dar acest lucru poate fi rezolvat cu ușurință cu câteva linii suplimentare de CSS și pagina va arăta așa cum ar trebui.

styles.css - partea 1

Antet, subsol, articol, secțiune, hgroup, navigare, figură( display:block; ) articol .line( /* Bară de divizare: */ background-color:#15242a; border-bottom-color:#204656; margin:1.3em 0; ) footer .line( margin:2em 0; ) nav( background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8; padding:0 5px; position:absolute; right:0; top: 4em; bordura: 1px #FCFCFC -moz-box-shadow:0 1px #333333; nav ul li a, nav ul li a:visited( color:#565656; display:block; float:left; font-size:1.25em; font-weight:bold; margin:5px 2px; padding: 7px 10px 4px; text -shadow:0 1px 1px white text-transform:uppercase ) nav ul li a:hover( text-decoration:none; background-color:#f0f0f0; ) nav, article, nav ul li a, figure( /* Se aplică; Colțuri rotunjite CSS3: */ -moz-border-radius:10px;

Trebuie să setăm regula de afișare pentru a bloca etichetele noi. După aceea, le putem trata la fel ca etichetele obișnuite.

Stilăm linia orizontală, articolele și butoanele de navigare. În partea de jos am setat proprietatea border-radius pentru patru diferite tipuri articole imediat pentru a economisi bani.

styles.css -partea 2

/* Stiluri pentru articole: */ #page( width:960px; margin:0 auto; position:relative; ) article( background-color:#213E4A; margin:3em 0; padding:20px; text-shadow:0 2px 0 negru; ) figură( chenar:3px solid #142830; float:dreapta; înălțime:300px; margin-left:15px; overflow:hidden; width:500px; ) figure:hover( -moz-box-shadow:0 0 2px # 4D7788; -webkit-box-shadow:0 0 2px #4D7788 box-shadow:0 0 2px #4D7788 ) figure img( margin-left:-60px; ) /* Stiluri de subsol: */ footer( margin-bottom: 30px; text-align:center; font-size:0.825em; ) subsol p( margin-bottom:-2,5em; 213e4a; display:block; padding:2px 4px; footer a:hover; plutire: dreapta;

În a doua parte a codului oferim stiluri mai detaliate obiectelor noastre.

Să trecem la ultimul pas.

Pasul 4 - jQuery

Pentru a moderniza acest șablon, vom crea un efect de defilare lină după ce facem clic pe un link folosind pluginul scrollTo jQuery. Pentru ca acesta să funcționeze, trebuie să parcurgeți toate linkurile și să atribuiți un eveniment onclick, care va apela funcția $.srollTo() descrisă în scriptul pluginului.

$(document).ready(function())( /* Executați scriptul după ce pagina se încarcă */ $("nav a,footer a.up").click(function(e)( // Dacă se face clic pe un link , defilare lină la obiectul dorit: $.scrollTo(this.hash || 0, 1500);

Concluzie

În acest tutorial, am aflat despre noile proprietăți semantice ale HTML5 și le-am folosit pentru a crea un șablon frumos de o pagină. Îl poți folosi în scopurile tale.

Salutări, dragi cititori de blog. Astăzi nu vom afla prea multe despre elementele de bază ale noului marcaj HTML5 pentru pagini web. Vom învăța, de asemenea, cum să traducem site-ul nostru web existent în acest nou limbaj HTML.

Vreau să spun că se pare că nu este nimic complicat aici. Îmi doream de mult să-mi transfer blogul de la aspectul div la HTML5, dar m-am gândit că va fi dificil, deoarece nu cunoșteam principalele etichete noi. Dar când am abordat această chestiune, s-a dovedit că nu a fost deloc dificil.

Așa că vă sfătuiesc să treceți la HTML5, deoarece totul nou este aproape întotdeauna mai bun și, desigur, mult mai simplu și mai convenabil.

Aspect div (vechi)

Prieteni, mai întâi voi începe cu exemple, pentru că întotdeauna este mai clar cu exemple. După cum probabil ați ghicit deja, mi-am schimbat blogul la HTML5, așa că să-l luăm ca exemplu, să ne uităm la aspectul vechi folosind DIV-uri și să vedem cum arată cel nou în HTML5.

După cum puteți vedea din cod, fiecare div are propria sa clasă. De exemplu, un div cu clasa headerInner este un bloc de antet al site-ului care este descris în stiluri CSS, respectiv, un div cu clasa wrapper este blocul principal care conține 2 blocuri cu posturi și o coloană laterală care au clasele colLeft - the bloc stânga cu posturi și colDreapta coloana din dreapta. Și, desigur, nu am uitat de blocul de subsol din clasa footerInner.

În acest mod simplu, am obținut o grilă din care iese un site web cu drepturi depline. Sau un șablon ca cel de pe blogul meu.

Dar acum trebuie să traducem acest cod în HTML5, dar se dovedește că acesta nou standard a adus cu ea destul de multe etichete noi despre care trebuie să știți înainte de a traduce codul nostru.

Etichete HTML5

În primul rând, să ne uităm la etichetele care sunt folosite mai întâi, cu alte cuvinte pe cele principale:

- această etichetă specifică partea de sus site-ul sau antetul site-ului. Poate include un meniu, logo și alte elemente care sunt utilizate în partea de sus a site-ului.

— această etichetă este setată pentru secțiuni importante de pe site, de exemplu, pentru articole sau puncte importante, pe care doriți să le evidențiați.

— de obicei, această etichetă conține diverse postări pe site, știri, documente. De exemplu, postări pe blog.

— este setat pentru coloanele laterale de pe site (Sitebar). Nu contează unde este în stânga sau în dreapta.

— această etichetă ar trebui să includă partea de jos a site-ului dvs. (subsol)

— această etichetă include grupuri de titluri de site, de exemplu.

— această etichetă include toată navigația pe site (meniu).

Vreau să spun că toate aceste etichete trebuie să fie închise, de exemplu, dacă este o etichetă trebuie să aibă o etichetă de închidere și așa mai departe.

Așa că ne-am uitat la cele mai elementare etichete. Acum să ne uităm la etichetele care sunt folosite rar sau în funcție de subiectul site-ului:

— această etichetă afișează audio pe site.

— această etichetă creează un câmp pe pagină în care puteți adăuga și aplica diferite efecte diferitelor elemente folosind scripturi.

— această etichetă ar trebui să includă o listă de meniuri, de exemplu ul li.

— aceasta include ora și data de pe site. De exemplu, pe bloguri, data postării postării.

— inserează un videoclip în pagină.

— această etichetă transferă cuvântul către linie nouăîn browser. La fel ca eticheta veche
.

Desigur, nu doar etichetele din HTML5 s-au schimbat, ci și tipul de document s-a schimbat dramatic. Iată cum arată în HTML4:

Și iată cum arată nou:

Ei bine, cum te simți în legătură cu diferența? :-) În opinia mea, semnificativ. Eticheta a devenit și mai simplă. El era asa:

Și a devenit așa:

Gata, acum cunoaștem aproape toate modificările și putem trece în siguranță la aspectul HTML5.

Aspect (nou)

Înainte de a începe codarea, trebuie să inserăm cod simplu pentru IE între etichete, deoarece acest browser „super” nu înțelege etichetele noi:

De asemenea, trebuie să creați toate etichetele noi la nivel de bloc. Doar adăugați acest cod oriunde în fișierul dvs. CSS:

Subsol, navigare, antet, secțiune, deoparte ( afișare: bloc )

Gata, primul pas este gata. Acum să ne uităm la codul HTML5 terminat pe care l-am primit și, de asemenea, să-l analizăm în detaliu:

După cum puteți vedea, tocmai am schimbat niște div-uri cu etichete noi, din nou, repet, nu este nimic complicat aici, principalul lucru este să știți care clasă este responsabilă pentru ce zonă de pe site.

Îți voi da din nou un exemplu. Să luăm antetul site-ului. În aspectul vechi, era notat printr-o etichetă div cu clasa headerInner - . După cum am scris mai sus, această clasă afișează blocul antetului site-ului. Și acum că știm ce etichetă este responsabilă pentru antetul site-ului în HTML5 (), o putem folosi în siguranță în loc de div numai cu aceeași clasă. Astfel am obtinut urmatoarele:

Și nu uitați să puneți eticheta de închidere și, de asemenea, să eliminați div-ul de închidere.

Să mergem mai departe și avem blocul de conținut principal. Aceasta înseamnă că acesta este blocul principal și trebuie să fie înconjurat de etichetă. În vechiul aspect, acest bloc principal arăta așa, dar în HTML5 va arăta așa. Din nou, nu uitați să puneți eticheta de închidere și să eliminați vechiul div.

Urmați același principiu în alte etichete de pe site. Așa că mi-am convertit blogul în HTML5. Și am fost plăcut surprins că nu a fost deloc dificil.

Concluzie

Prieteni, decizia de a trece la HTML5 sau nu. Dar părerea mea este clară, nu este nevoie să stai prea mult la un singur lucru, să mergi înainte, să înveți lucruri noi. Nu este doar faptul că aceste „lucruri” sunt inventate. Nu este adevărat? Și acest nou aspect spune direct cu noile sale etichete unde și ce parte se află pe site. Ca să nu mai vorbim de aspectul div, în care totul se îmbină. Ei bine, nu este degeaba, mai ales pentru motoarele de căutare, care acum vor ști exact unde și ce să indexeze, deoarece numele etichetelor ajută. Desigur, nu știu dacă motoarele de căutare iau în considerare acest lucru, dar totuși.

Atât am vrut să spun despre asta. Prieteni, dacă ceva nu vă merge, întrebați în comentarii și vă voi ajuta cu siguranță :-) Ne vedem curând.

Salutare tuturor! Au început mult așteptatele olimpiade. Le doresc tuturor participanților mult succes și mult noroc și, desigur, susțin foarte mult Rusia, pentru că Eu sunt rus. Și acum la subiectul postării. În acest articol vom vorbi despre markup HTML5 modern, avantajele și importanța acestuia în general. Încă nu am putut trece la html5, am crezut că este complet nou, nu toate browserele îl acceptă, în special IE 7-8. Dar totul s-a dovedit a nu fi chiar așa.

Astăzi, html5 este folosit pentru marcarea paginilor web. viteză maximă înainteși aproape toate browserele moderne acceptă acest marcaj, deși se crede că specificația html5 este încă în curs de dezvoltare. În ceea ce privește versiunile Internet Explorer 7-8, există o cârjă specială pentru ele, constând dintr-un mic javaScript. După părerea mea, aspectul în html5 este foarte convenabil, deoarece... În primul rând, html5 este semantică. Unele sunt folosite aici elemente structurale, cu ajutorul căruia structura documentului devine ușor de citit și de înțeles nu numai pentru oameni, ci și pentru roboții de căutare.

Deci, să luăm markupul html5 pas cu pas și să începem chiar de la începutul documentului - Doctype. Doctype în html5 este scris mult mai simplu, astfel încât să vă puteți aminti cu ușurință.

Codificarea este scrisă după cum urmează

Simți diferența? Codul a devenit mult mai simplu și, de asemenea, este foarte ușor de reținut. De asemenea, atunci când conectați scripturi și stiluri, nu mai este necesar să specificați tipul.


Următorul lucru pe care îl vom face este să conectăm un mic javascript, astfel încât IE să înțeleagă noul marcaj.




document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('articol');
document.createElement('aside');
document.createElement('footer');


Acest script poate fi descărcat și de pe serverul Google.





— grupează orice blocuri tematice (se creează secțiuni), este acceptată și imbricarea acestui element
— definește zona de titlu a secțiunii sau a paginii. Foarte des, în aspect, această etichetă este folosită pentru a încadra antetul site-ului.
- Definește subsolul unei secțiuni sau pagini. De obicei, această etichetă este utilizată pentru a încadra subsolul unui site web, care conține informații despre drepturile de autor, contacte, termeni de utilizare etc.
— marchează lanțul de navigare al site-ului. Poate exista un meniu de site, un bloc de pesmet etc.
— definește conținutul principal al site-ului, de exemplu, un articol separat.
— conținut secundar pe site. De obicei, aceste elemente sunt folosite pentru a marca barele laterale.

Trebuie remarcat faptul că noile elemente html5 sunt de natură inline, i.e. Pentru a le afișa corect, acestea trebuie transformate în blocuri.

Antet, navigare, secțiune, articol, deoparte, subsol (afișare: bloc)

Pe baza celor de mai sus, puteți schița un aspect mic de pagină în HTML5






Exemplu de marcare în HTML5






Antetul site-ului
Meniul site-ului


Articol
Coloana laterală (bara laterală)

Subsolul site-ului


După cum puteți vedea, html5 are un avantaj clar față de html4, atât în ​​ceea ce privește markupul, cât și SEO. Despre SEO vom vorbi mai jos.

Pe lângă etichetele principale, următoarele etichete sunt adesea folosite:
substituent (substituent = „Text”) - afișează textul în câmpul de introducere, iar atunci când tastați text, acesta dispare automat. Acest atribut a apărut în mod specific în html5 acum nu este nevoie să folosiți scripturi suplimentare pentru a afișa text într-un câmp, de exemplu, într-un câmp de căutare.

- evidentierea oricarei cuvânt important sau fraze. Observați culoarea de fundal galbenă.

— aceste etichete sunt folosite pentru a afișa o adresă, de exemplu, adresa unei organizații.

— afișează videoclipuri pe un site web cu un browser standard.

— afișează o înregistrare audio pe site folosind un browser standard

Structura articolului

HTML5 și SEO

Una dintre caracteristicile cheie ale HTML5 și, după părerea mea, cea mai importantă, este împărțirea tuturor blocurilor de către robotul de căutare în funcție de semnificația lor, adică. segmentarea paginilor web. Era imposibil să faci asta în html4, pentru că... Eticheta div standard nu adaugă nicio semnificație elementului care se află în interiorul etichetei. Odată cu utilizarea noilor elemente de antet, articol, deoparte, subsol, totul se schimbă. Aceste. În linii mari, ei „spun” roboților de căutare elementelor cărora să le acorde importanță și cărora să le ignore. De exemplu, un robot de căutare va înțelege cu ușurință că informațiile conținute între etichete sunt drepturi de autor și informații similare pentru vizitator.

Elemente care afectează indexarea motoarelor de căutare

Eticheta articolului este una dintre cele mai importante atunci când segmentați paginile site-ului web. Această etichetă indică clar motoarele de căutare, unde se află conținutul principal al site-ului. Și știm cu toții că conținutul este în primul rând pentru care vin vizitatorii pe site. Aici se presupune că PS-ul va acorda o atenție maximă conținutului cuprins între etichete, eliminând sau relegând alte elemente în fundal.

Elementul secțiune împarte toate markupurile în secțiuni diferite. Ce dă asta? Roboții de căutare sunt buni la navigarea pe o pagină web care este bine structurată. Dacă utilizați corect eticheta, puteți construi cu ușurință o ierarhie de informații a documentului, iar acest lucru, la rândul său, îmbunătățește indexarea site-ului în ansamblu.

Folosind eticheta de antet, roboții de căutare pot găsi cu ușurință sigla, numele site-ului, sloganul și navigarea principală (meniul principal) pe site.

Această etichetă definește structura de navigare pe site.

Legături

Iată principalele atribute ale linkurilor în HTML5:

Puteți vedea restul atributelor.

Ca acesta scurtă recenzie Marcaj HTML5. În ceea ce mă privește, am trecut la aspectul utilizând marcajul HTML5 cu mult timp în urmă și am transferat deja majoritatea șabloanelor de pe site-urile mele în HTML5, dar pur și simplu nu pot ajunge la acest blog.

Asta e tot. La revedere tuturor. Ne vedem în postările următoare.

Ai trecut deja la HTML5?