Prednost HTML5 vs XHTMLHtml5 nudi vrlo važnu prednost u odnosu na tradicionalni xhtml, a to je da ima oznake za definiranje semantičke strukture.
Taj html kod nazivamo semantičkim html -om gdje struktura ima smisla za tražilice i stoga služi za SEO pozicioniranje. Radi se o tome da svaka tražilica može razumjeti što je svaki dio web stranice, čak i uklanjajući sav sadržaj.
XHTML nema oznake koje omogućuju definiranje grupa ili blokova elemenata sa semantičkim smislom.
HTML5 rješava ovaj problem nudeći elemente i oznake koji nam omogućuju definiranje semantike web stranice, neki od njih su headeR, footer, nav, hgroup, section i article, između ostalih.
Zatim ćemo definirati najvažnije u semantičkom smislu:
- Zaglavlje: Definirajte blok zaglavlja web stranice i priložite sadržaj zaglavlja.
- nav: definira blok koji predstavlja izbornik, stoga tražilice pri pronalasku ove oznake znaju da je to navigacijska struktura.
- hgrupa: definirati i grupirati naslove te na taj način svakom naslovu dati različitu važnost.
- odjeljak i članak: Prethodni elementi koji definiraju div> slojeve i zamjenjuju se oznakama odjeljka i članka, koji imaju više semantičkog smisla pri definiranju odjeljaka i članaka unutar odjeljaka.
- na stranu: definira i grupira tangencijalne elemente web stranice. Odnosno, sadržaj koji nije glavni, poput bočnih stupaca ili bočne trake weba
- podnožje: definira i grupira elemente u podnožju web stranice.
Korištenje HTML5 ne znači da se XHTML više ne koristi, oni su još uvijek vrlo dobri u organiziranju strukture i grupiranju elemenata web stranice ili pozivanju na Jquery, imajte na umu da HTML5 daje smisaoni smisao, ali unutar bloka možete nastaviti koristiti bilo koju drugu oznaku XHTML. Pogledajmo primjer ispod
Titl
web logo
Možemo vidjeti da je sa slojevima definirana struktura, a unutar zaglavlja zaglavlja i h grupe definirano je grupiranje naslova, kao i sloj koji sadrži logotip.
Tako nam XHTML slojevi omogućuju definiranje strukture web stranice kako bi imali bolju organizaciju za programera, a zatim nam XHTML pomaže definirati smislene blokove za strukturu, a HTML5 nam omogućuje stvaranje smislenih blokova za tražilice i SEO. Kako se oznaka odjeljka koristi u HTML5 za SEO.
Korištenje oznake odjeljka vrlo je slično korištenju sloja div, s tom razlikom što odjeljak daje semantički smisao, a svi elementi zatvoreni u odjeljku povezani su sa semantikom weba. Važno je ne koristiti odjeljak za grupiranje elemenata u bilo kojem bloku jer moramo imati besmislene elemente grupirane za dodjeljivanje CSS stilova ili neki programski učinak.
Ako je razlog stvaranja bloka primjena CSS -a ili korištenje iz koda sa skriptom, bilo bi bolje da ne koristite HTML5, jer blok nema semantički sadržaj. U ovom slučaju moramo stvoriti blok s slojem div od xhtml. Kao što se vidi u gornjem primjeru, logo nema smisla koristiti HTML5 jer se CSS koristi za prikaz slike.
DIV sloj ili odjeljakJedan način razmišljanja o važnosti svakog bloka kako bi se utvrdilo je li riječ o div sloju ili odjeljku, ako sam posjetitelj web stranice. Da li mi ovaj blok daje korisne informacije? Ako je odgovor potvrdan, to će biti dio, ako ne i sloj.
Kad koristimo element članka, definiramo blok koji ima semantički smisao i sadržaj koji tražilice mogu indeksirati. Oznaka članka ne odnosi se nužno na tekstualnu bilješku, to može biti proizvod, slike ili obrazac.
Pogledajmo jednostavan primjer web stranice i njenog koda u HTML5:
Honda Civic
Kako unutar članka možemo staviti slojeve ili odlomke ili druge xhtml elemente, u nekim slučajevima sadržaj weba može imati samo jedan članak, a u slučaju da stranica ima popise ili kataloge kao u prethodnom slučaju Autos Online, možemo imati članka po svakom prikazanom proizvodu i vlastitom zaglavlju kako bi naslovima dali veću relevantnost.
Također možemo primijeniti css stilove na HTML5 elemente, pogledajmo jednostavan primjer za mrežni blog s HTML5 i CSS3.
Naslov 1
Objavio 06. prosinca 2014. Sergio - 3 komentara
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus mržnja, ultricies eu pharetra dictum, laoreet id mržnja …
Naslov 2
Objavio Sergio 1. prosinca 2014. - 20 komentara
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus mržnja, ultricies eu pharetra dictum, laoreet id mržnja …
To pokazuje da oni nisu samo semantički elementi, već mogu biti i dio dizajna i strukture web stranice.
Ovaj element služi za definiranje sekundarnog bloka unutar strukture web stranice, sadržaj ili podatke koje želimo prikazati posjetitelju, ali to nije glavni sadržaj.
Oznaku stranu možemo povezati sa bočnim stupcima ili općenito poznatom kao Bočna traka koja će imati sekundarni sadržaj izbornika za navigaciju, veze do drugih web stranica, obrasce za prijavu. Također možemo stvoriti stranu u članku, što znači da je ono što je unutar stranice nadopuna sadržaja članka, ali nije izravan dio tog sadržaja, na primjer ako imamo članak o nekoj prodaji, a u stranu objavljujemo statistiku .
Na kraju, zapamtite cilj Layout:
Što je Layout web stranica?Izgled web stranice treba dovesti grafički dizajn u html kod, css locirajući svaki odgovarajući element putem koda na web stranici.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod
