Želite li brzo pronaći opis HTML5 elementa ili atributa koji se koristi na web stranici ili web aplikaciji? Ovdje je klasična referentna knjiga koju web dizajneri i web programeri pokušavaju držati pri ruci više od 15 godina.
Peto izdanje knjige uključuje potpuni opis HTML5 elemenata i atributa u skladu s HTML5 Candidate Recommendation, HTML5.1 Working Draft i WHATWG standardima. Značajke imenika:
– abecednim redom popis elemenata i atributa iz HTML5, HTML5.1 i WHATWG standarda;
– primjeri označavanja, kategorije sadržaja, modeli sadržaja i zahtjevi početne/završne oznake za svaki element;
– opis razlika između specifikacija HTML5 i HTML4.01;
– tablice posebnih znakova;
– pregled API biblioteka koje se koriste u HTML5.

Bez obzira jeste li iskusan programer web stranica ili želite brzo izraditi web stranicu prema najnovijim standardima, ova će vam korisna knjiga biti nezamjenjiva.

Da li vam se svidio članak ili knjiga? Podijelite sa svojim prijateljima:

Sve knjige predstavljene na stranici su samo u informativne svrhe. Svaka njihova upotreba dopuštena je samo u informativne svrhe. Ako ih planirate koristiti u budućnosti, morate ih kupiti od nositelja autorskih prava. Administracija stranice nije odgovorna za vaše korištenje istih.

Pročitavši naslov publikacije: "HTML5 Cheat Sheet na ruskom" - svi su već pogodili o govoru, ali prvo nekoliko odlomaka o HTML5 općenito.

Rad na stvaranju HTML5 započeo je 2004. godine. i nastaviti do danas. HTML5 je planiran kao najuniverzalnija i najfunkcionalnija verzija HTML-a (HyperText Markup Language), jer su na ovaj ili onaj način u stvaranje HTML5 uključeni titani industrije kao što su Apple, Mozilla, Opera, Microsoft i Google. Dopustite da to točno primijetim Google Chrome, na ovaj trenutak, podržava većinu HTML5 elemenata

Unatoč činjenici da se mogu napraviti promjene u HTML5, budući da je rad na specifikaciji HTML 5 još uvijek u tijeku i još uvijek je u procesu, razvoj tehnologije odvija se tako brzo da će HTML5 uskoro biti usvojen i web stranice će morati biti izrađene koristeći široke mogućnosti od HTML5!

HTML5 varalica na ruskom pomoći će u učenju

Koderi i dizajneri prijeloma trebaju naučiti inovacije, oznake i standarde HTML5 danas, jer unatoč stalnom radu na HTML5, neke od njegovih mogućnosti već se prilično uspješno koriste pri izradi web stranica. Naravno, trebate početi učiti HTML5 s oznakama, jer su se u HTML5 pojavile nove oznake, a neke stare neće biti podržane. Također, mnoge oznake iz HTML4 došle su u HTML5. A što bi moglo biti bolje i praktičnije u učenju nečega od varalice? Upoznajte:

prva HTML5 varalica na ruskom u Runetu

Prva HTML5 varalica na ruskom jeziku na Runetu uključuje nove HTML5 elemente koji su ranije bili široko korišteni, ali su bili napisani u imenima stilova. Na primjer podnožje, zaglavlje, odjeljak, članak i ostalo. Osim toga, HTML5 varalica na ruskom sadrži sve oznake stara verzija HTML4, koji je prešao na HTML5. Također, HTML5 varalica na ruskom sadrži oznake koje HTML5 ne podržava.

HTML5 varalica na ruskom, izrađena u formatu A4

Prva HTML5 varalica na ruskom u RuNetu izrađena je u formatu A4, pa će vam biti zgodno ispisati je i držati pri ruci. Napominjem da HTML5 varalica na ruskom opisuje sve oznake u jednom redu, prenoseći svrhu oznake što je više moguće. Naša HTML5 varalica na ruskom stalno će se usavršavati i ažurirati kako se oznake uklanjaju ili dodaju u HTML5. Možete preuzeti “HTML5 varalicu na ruskom” s donje veze. U arhivi ćete pronaći 1 pdf Visoka kvaliteta i dva jpg datoteka u različitim nastavcima.

Preuzmite “HTML5 Cheat Sheet na ruskom” (Broj preuzimanja: 7996)

Arhiva sadrži dvije jpg datoteke u ekstenzijama 1024×1448 i 2480×3508

ažurirano 29.10.2014

Prošlo je više od dvije godine od pisanja posta i stvarne izrade varalice na HTML 5. Tijekom tog vremena, varalica je preuzeta 3600 puta), vrlo sam zadovoljan, nadam se da je bio koristan onima koji su proučavali layout in HTML 5. Puno sam naučio i učio s raznih foruma i web stranica, a izradom cheat sheeta želio sam pokazati svoju zahvalnost, vratiti svoj dug). Zašto danas pišem ažuriranje u ovom postu, jer danas je razvoj HTML5 konačno završen!

Razvoj HTML5 službeno je završen

HTML5 je službeno "funkcionalno dovršen". Prema globalnim standardima koje je uspostavio Worldwide Web Consortium (W3C). Treba još obaviti neke testove i još nije postao službeni web standard, ali za sada se sa sigurnošću može reći da neće biti novih značajki u usporedbi s trenutnom verzijom.

To znači da web dizajneri i izrađivači aplikacija sada imaju "stabilan cilj" za nesmetan prijelaz novi standard do 2015. HTML5 označni jezik omogućuje razvojnim programerima dodavanje funkcionalnosti stranicama koje su prethodno zahtijevale samostalne aplikacije ili dodatne softver, kao što je Java, Adobe Flash ili Microsoft (MSFT, Fortune 500) Silverlight. On podržava strujanje videa i usluge geolokacije, izvanmrežni alati i kontrole na dodir, između ostalih dodataka.

Bilo je potrebno više od 10 godina da se razvije novi standard. direktor tvrtke W3C Jeff Jaffe rekao je u pripremljenoj izjavi prije nekoliko dana da od danas programeri znaju da se mogu osloniti na HTML5 godinama koje dolaze. „Osim toga, programeri će znati koje vještine treba razviti kako bi došli do pametnih telefona, automobila, TV-a, e-knjige, digitalni znakovi i uređaji koji još nisu poznati”, dodao je.

Najnoviji Microsoftove verzije Internet Explorer, Google Chrome, Mozilla Firefox i Apple Safari već su kompatibilni s većinom HTML5 elemenata. W3C već radi na HTML 5.1, čiji su prvi dijelovi upravo predani kao nacrt.

Konvencije HTML koda

Mnogi web programeri slabo razumiju specifikacije HTML koda.

Od 2000. do 2010. mnogi web programeri prešli su s HTML-a na XHTML.

Programeri koji koriste XHTML postupno razvijaju dobre specifikacije za pisanje HTML-a.

A u HTML5 moramo formirati relativno dobre standarde koda, nekoliko smjernica dano je ispod specifikacije.

Koristite ispravnu vrstu dokumenta

Deklaracija o vrsti dokumenta u prvom redu HTML dokument:

DOCTYPE HTML>

Ako želite koristiti druge oznake poput malih slova, možete upotrijebiti sljedeći kod:

DOCTYPE HTML>

Imena elemenata napisana malim slovima

Naziv HTML5 elementa može se koristiti velikim ili malim slovima.

• Kućište mješovitog stila je vrlo loše.
• Mala slova se lako pišu.

Ovo je paragraf.

Jako loše:

Ovo je paragraf.

Ovo je paragraf.

Isključite sve HTML elemente

U HTML5 ne želite zatvoriti sve elemente (kao što je element), ali preporučujemo da svaki element treba dodati završnu oznaku.

Ovo je paragraf.

Ovo je paragraf.

Ovo je paragraf.

Ovo je paragraf.

Zatvoriti prazne elemente HTML

U HTML5, prazan HTML element ne mora biti isključen:

Možemo napisati:

Također možete napisati:

Potrebni su XML, XHTML i kosa crta (/).

Ako planirate koristiti svoju XML softversku stranicu, ovaj stil je vrlo dobar.

Ime atributa malim slovima

HTML5 vam omogućuje da naziv svojstva koristite i velikim i malim slovima.

• Use case je vrlo loša navika.
• Programeri obično koriste mala slova (slično XHTML-u).
• Stil malih slova izgleda osvježavajuće.
• Mala slova se lako pišu.

Vrijednost imovine

Vrijednosti HTML5 atributa ne mogu se navoditi.

• Ako vrijednost svojstva sadrži razmake, morate koristiti navodnike.
• Mješoviti stil se ne preporučuje, predlaže se jedan stil.
• Vrijednosti nekretnina koje koriste navodnike lako se čitaju.

Sljedeći primjer vrijednosti atributa sadrži razmake, nemojte koristiti navodnike, možda neće raditi:

U nastavku se koriste dvostruki navodnici, to je točno:

Svojstva

Slika Alt atributi se često koriste. Ako se slika ne može prikazati, može zamijeniti prikaz slike.

= "HTML5" style = "width: 128px; height: 128px">

Veličina slike je određena, može se rezervirati u trenutku učitavanja navedene vrijednosti, smanjiti treperenje.

= style "HTML5" = "width: 128px; height: 128px">

Razmaci i znakovi jednakosti

Možete koristiti razmake prije i poslije znaka jednakosti.

Izbjegavajte duge retke koda

Korištenje HTML uređivača, lijevo i desno pomicanje koda je nezgodno.

Svaka linija koda je što je moguće kraća od 80 znakova.

Prazne linije i uvlake

Nemojte dodavati prazan redak bez razloga.

Za svaki funkcionalni blok logike dodajte prazan redak, što ga čini čitljivijim.

Nemojte koristiti nepotrebne prazne uvučene retke između kratkih kodova.

Dodatni prazni redovi i uvlake:

Ovaj tutorial

HTML

Ovaj vodič ne uči samo tehnologiji, već i spavanju.
Ovaj udžbenik, podučavajući ne samo tehnologiju, već iu snu,
Ovaj vodič ne uči samo tehnologiji, već i spavanju.

Ovaj tutorial

U ovom vodiču podučavamo ne samo tehnologiju, već i spavanje.
Ovaj vodič ne uči samo tehnologiji, već i spavanju.
Ovaj vodič ne uči samo tehnologiji, već i spavanju.
Ovaj vodič ne uči samo tehnologiji, već i spavanju.

Primjer obrasca:

Ime
Opis


A
Opis A


B
Opis B

Primjer popisa:

London

Pariz

Tokio

Izostavimo i?

U HTML5 standardu oznaka se može izostaviti.

Sljedeći dokumenti su važeći HTML5:

Primjer:

DOCTYPE HTML>

Naslov stranice

Ovo je naslov

Ovo je paragraf.

Probaj "

element je korijenski element dokumenta, jezik koji se koristi za opisivanje stranice:

DOCTYPE HTML>

Izjava o jeziku za lakše čitanje na zaslonima i tražilicama.

Izostavimo padove DOM ili XML softvera.

Izostavimo grešku koja se javlja u starijim preglednicima (IE9).

Da ga izostavimo?

U HTML5 standardu oznaka se može izostaviti.

Preglednik postavlja zadani sadržaj prije nego što se element doda zadanom.

primjeri

DOCTYPE HTML>

Naslov stranice

Ovo je naslov

Ovo je paragraf.

Pokušajte » Metapodaci

HTML5 zahtijeva element čiji naslov opisuje temu stranice:

U ovom vodiču

Naslov i jezik koji tražilici omogućuje brzo razumijevanje teme vaše stranice:

DOCTYPE HTML>



U ovom vodiču

Web dizajner - HTML5 specifikacija (HTML 5)

Oznake u HTML5 su XML-HTML oznake koje opisuju strukturu web stranice, dizajnirane tako da računalni program (robot za pretraživanje, itd.) može razlikovati glavni sadržaj stranice od ostatka stranice (elementi formulacije i navigacije) : vrh, dno, izbornik, bočni elementi stranice, ponavljajući (dinamički) blokovi itd. Postoji i podjela na razini glavnog sadržaja (teksta stranice). Sam HTML5 jezik je dodatak HTML-u, XML-u, CSS-u itd.

Naslov stranice Vrh web stranice, "zaglavlje" Glavni izbornik web stranice Glavni dio, članak, materijal stranice Bočna traka (sidebar) Dno stranice, podnožje

Struktura web stranice

- uokviriti glavni sadržaj stranice (članak),
- uokvirite zaglavlje stranice,
- uokviriti podnožje stranice,
- okvir glavne stvari izbornik stranice,
- okvir bočne trake stranice (sidebar),
- uokvirite ponavljajuće blokove na stranici (na primjer komentare).

Elementi koda predloška HTML5 web stranice.

- dodijelite kodiranje windows-1251.

- ako je stranica otvorena u IE, preglednik bi uvijek trebao koristiti najnoviji standardni način prikaza.

- prikaz stranice na mobilnim uređajima.

zaglavlje - zaglavlje stranice stranice, obično sadrži logo stranice, zaglavlje, telefonski broj, klizač itd.

nav - glavni izbornik stranice web mjesta.

članak - glavni sadržaj stranice: članak, post na blogu, tema na forumu itd. Može sadržavati tekst, slike, videozapise, tablice itd.

na stranu - bočna traka (bočna traka) stranice, obično sadrži raznih elemenata, kao što su: kategorije, oznake, najnoviji postovi/komentari, dodatni izbornici, brojači itd.

podnožje - donji dio - podnožje web stranice, obično sadrži razne informacije(autorska prava), kontakt informacije(adrese, telefonski brojevi) itd.

HTML5 na razini strukture stranice

Pogledajmo popis novih HTML5 oznaka odgovornih za podjelu strukture stranice:

- oznake koje uokviruju elemente dizajna gornjeg dijela stranice, tzv. “zaglavlje stranice”. Također se mogu koristiti oznake zaglavlja gornji dio oznaka odjeljka.

- oznake koje uokviruju glavni izbornik na web mjestu.

- oznake koje uokviruju glavni sadržaj stranice: članak, unos na blogu, vijest, prvi unos na forumu itd.

- oznake koje uokviruju bočnu traku. Bočna traka je takozvana "bočna traka", koja obično sadrži blokove naslova (kategorije), oblake oznaka (tagova), popis najnoviji unosi i tako dalje. Također možete koristiti bočne oznake za uokvirivanje brojača, widgeta (na primjer, komentara iz VKontakte) i društvenih gumba.

- oznake za uokvirivanje donji dio stranice, tzv. “podnožje stranice”, koje može sadržavati ime autora (tvrtke), kontakte (adrese, telefonske brojeve), pravne podatke (autorska prava) itd. Oznake podnožja također se mogu koristiti kao donji dio oznake odjeljka, tj. same oznake podnožja nalazit će se između oznaka odjeljaka

- oznake koje uokviruju ponavljajuće dijelove stranice ili glavni sadržaj, na primjer, ako postoji nekoliko poglavlja priče na stranici, tada se svako poglavlje može postaviti između ovih oznaka. Ili ako kliknete na poveznicu u bočnoj traci (npr. na poveznicu neke kategorije), tada će se pojaviti stranica na kojoj će biti poveznice s opisima koji vode do članaka koji pripadaju ovoj kategoriji, a poveznice s opisima mogu se uokviriti s oznakama odjeljaka, kao i proizvoda s opisima u online trgovini, komentarima na objave, komentarima na temu na forumima i sl.

HTML5 na razini teksta

Pogledajmo popis novih HTML5 oznaka odgovornih za semantičku podjelu teksta stranice:

- tekst koji se nalazi između ovih oznaka postaje "odabran". Jedna od svrha mark tagova je uokvirivanje riječi u tekstu koje, na primjer, odgovaraju riječi koju je korisnik unio u redak za pretraživanje.

- oznake su dizajnirane za stvaranje datuma i/ili vremena u formatu
ISO u obliku: GGGG-MM-DDThh:mm:ss , ovaj format je razumljiv računalni programi. Vremenske oznake mogu uokviriti datum ili tekst; ako oznaka uokviruje tekst, tada joj se dodaje atribut datetime čija je vrijednost datum i/ili vrijeme u ISO formatu.

- oznake su dizajnirane za pohranjivanje informacija koje su skrivene ili prikazane (djeluju kao spojler).

- oznake uokviruju naslov, ako kliknete na njega, pojavit će se tekst (može se koristiti kao spojler), smješten između oznaka detalja.

Dodatne HTML5 jezične oznake

Popis novih HTML5 oznaka koje obogaćuju jezik:

- oznake su dizajnirane za prikaz statičkog indikatora ljestvice, u kojem se rezultat mjerenja ne mijenja. Za rad vam je potrebna minimalna i maksimalna vrijednost.

- oznake su dizajnirane za prikaz dinamičkog indikatora ljestvice (na primjer, ljestvica preuzimanja datoteke), u kojoj se rezultat mjerenja mijenja u stvarnom vremenu.

- oznaka se mora nalaziti između oznaka izbornika, koje se koriste prilikom izrade skripti u JavaScriptu.

- komandna oznaka se nalazi između ovih oznaka.

- oznake su namijenjene za prikaz rada skripte.

- oznake su namijenjene stvaranju popisa koji će se prikazati kada se upiše u tekstualno polje.

- oznake uokviruju opis objekta (na primjer, slike), koji se nalazi između oznaka figura..

- oznake grupiraju razne objekte stranice s vlastitim opisima, na primjer slike s opisima, proizvode s opisima itd.

- oznake su dizajnirane za grupiranje naslova h*

- oznaka se koristi za generiranje parova javnih/privatnih ključeva, šifriranje/dekriptiranje podataka, stvaranje/provjeru digitalnog potpisa.

- oznake uokviruju tekst i napomene uz njega.

- oznake se nalaze između rubin oznaka i namijenjene su za uokvirivanje napomene.

- oznake su namijenjene preglednicima koji ne podržavaju ruby ​​oznake.

- oznaka govori pregledniku gdje treba staviti riječ (" meki prijenos") ako ova riječ ne stane u prozor preglednika.

HTML5 oznake koje opisuju nove tehnologije

HTML5 uvodi mogućnost korištenja mnogih tehnologija i API-ja koji su dio HTML5 jezika, ali nisu dodaci trećih strana, ovo su neki od njih:

- oznake su namijenjene za reprodukciju audio datoteka, bez korištenja programi trećih strana(dodaci, ekstenzije).

- oznake su namijenjene reprodukciji video datoteka, bez upotrebe programa trećih strana (dodaci, ekstenzije).

- oznaka je namijenjena označavanju putanje do audio/video datoteka koje se nalaze unutar audio i video oznaka.

- oznake su namijenjene stvaranju posebnog područja na stranici u kojem možete kreirati vektorske oblike i manipulirati njima pomoću programskog jezika JavaScript. Canvas bi u budućnosti trebao zamijeniti Flash tehnologiju (da, u teoriji...).

Označiti

Oznaka je poseban element koji je dizajniran za crtanje i manipuliranje vektorskim oblicima. Oznaka je stvorena da zamijeni Flash tehnologiju. Pomoću oznake možete crtati vektorske oblike (slike) i pomoću JavaScripta manipulirati tim oblicima, stvarajući tako animacije (crtići, pa čak i igre) na web mjestu.

Audio Video

Pomoću oznake možete ugraditi audio datoteke na stranicu i slušati ih. Element

Pomoću oznake možete ugraditi video datoteke na stranicu i pregledavati ih. Element također stvara ploču s gumbima za reprodukciju.

JavaScript API

Specifikacija HTML5 opisuje kako bi trebala komunicirati JavaScript jezik, s elementima stranice putem DOM tehnologije. Također u HTML5 postoje nove metode za manipuliranje objektima, na primjer, pomoću JavaScripta i ovim metodama možete programski kontrolirati gumbe na audio/video upravljačkoj ploči.

XML tehnološka podrška

U HTML dokumentu napisanom pomoću jezika HTML5 sada je moguće implementirati tehnologije povezane s različitim XML formatima, kao što su SVG ili MathML.

SVG

SVG - skalabilna vektorska grafika vektorska grafika) je XML format. Budući da je HTML5 počeo podržavati XML formate, sada je moguće ugraditi slike stvorene korištenjem SVG-a u HTML dokument i manipulirati njima putem JavaScripta.

Primjer koda za uzorak zelenog kruga:

Proizlaziti:

MathML

MathML - Mathematical Markup Language (matematički označni jezik) XML format. Pomoću ovog formata Možete opisati razne matematičke formule.

Koje su oznake u HTML5 zastarjele?

Naslijeđene oznake u HTML5 specifikaciji su:

i umjesto toga treba koristiti oznaku za ugradnju
umjesto toga treba koristiti oznaku abbr
treba koristiti umjesto toga audio oznaka
umjesto toga treba koristiti oznaku ul
..treba koristiti umjesto toga iframe oznaka
umjesto toga trebali biste koristiti hrpu obrazaca i oznaka za unos
a umjesto njih treba koristiti pre ili kodne oznake


Umjesto toga treba koristiti oznaku pre
umjesto toga treba koristiti oznaku s

Umjesto formatiranja oznaka: , , , , , , , , , i , trebali biste koristiti CSS svojstva.

Ne preporučuje se korištenje zastarjelih oznaka prilikom izrade web stranica na HTML5, ali to ne znači da ih preglednici više ne podržavaju, na primjer, rad oznake koja se ne preporučuje podcrtavanje

Novi globalni atributi u HTML5

Globalni atributi su atributi koji se mogu ugraditi u bilo koju oznaku HTML dokumenta. U HTML5 pojavili su se novi globalni atributi, u opisima ispod istaknuti su riječju Novo

Pogledajmo nazive i opise globalnih HTML5 atributa:

accesskey=" " - omogućuje korištenje bilo kojeg elementa (oznake) stranice pritiskom na unaprijed programiranu tipku kombinacija tipki,
class=" " - omogućuje postavljanje naziva klase,
contenteditable=" " - omogućuje vam uređivanje sadržaja stavka Novo,
contextmenu=" " - omogućuje vam stvaranje kontekstnog izbornika za novi element,
dir=" " - omogućuje vam upravljanje smjer teksta,
draggable=" " - omogućuje korisniku da povuče element New,
dropzone=" " - omogućuje vam da odredite što učiniti s elementom prilikom povlačenja New,
hiden=" " - omogućuje vam skrivanje novog elementa,
id=" " - omogućuje postavljanje jedinstvenog identifikatora za element,
lang=" " - omogućuje vam da navedete kod jezika u sadržaju elementa,
spellcheck=" " - omogućuje vam da odredite hoće li se pravopis provjeravati u sadržaju novog elementa,
style=" " - omogućuje vam stvaranje stila za element,
tabindex=" " - omogućuje vam stvaranje pravila koje određuje kojim bi redoslijedom elementi trebali dobiti fokus kada pritisnete tipku Tab,
title=" " - omogućuje vam da stvorite opis alata koji se pojavljuje kada prijeđete mišem preko elementa.

Budući da su se oznake u HTML5 specifikaciji pretvorile u punopravne objekte, koncept globalnog atributa već je bio svojstven tim objektima, čak i za one oznake koje još nisu opisane u specifikaciji.

Inovacije u strukturi koda HTML5 dokumenta

Struktura koda u HTML5 doživjela je neke promjene, evo nekih od njih:

1. Za razliku od prethodne verzije jeziku, u HTML5 postoji samo jedan doctype:
Na primjer, možete ga vidjeti u izvornom kodu stranica ove stranice (ne zaboravite da ispred tipa dokumenta ne smije biti ništa, razmaka, prijeloma redaka itd.).

2. Kako biste označili jezik dokumenta, sada umjesto meta oznake:
trebate koristiti atribut lang="ru" u oznaci:

3. Kako biste označili kodiranje dokumenta, sada umjesto meta oznake:

trebate koristiti meta oznaku, bez atributa http-equiv i content

4. Prilikom izrade JavaScript skripte, sada u oznaci, nema potrebe za implementacijom atributa type="text/javascript" i language="JavaScript".

5. Nakon provedbe CSS stilovi, sada nema potrebe implementirati atribut type="text/css" u oznake i.

6. Link je inline oznaka, pa u ranoj HTML specifikacije i XHTML, nije im preporučeno da uokviruju blok oznake; sada je u HTML5 specifikaciji ova preporuka za veze uklonjena i sada im je dopušteno da uokviruju jedan ili više blok elemenata.

Naslov

stavak

Sada s HTML5 možete učiniti ovo:

Naslov

Na temelju materijala sa stranice http://html-5.ru/, http://html-5.ru/uchebnik-html5

Naredbene oznake za robote tražilice, semantičko opterećenje stranica

• Dodaci HTML W3C od 2015-2017

• W3C preporuke 24. prosinca 1999

Često web programeri nisu ni svjesni postojanja određenih standarda HTML kodiranja. Međutim, između 2000. i 2010. mnogi web programeri prešli su s HTML-a na XHTML. U isto vrijeme, XHTML je prisilio programere da pišu valjan i "dobro oblikovan" kod. HTML5, kada je u pitanju provjera valjanosti koda, dopušta određenu aljkavost.

Međutim, dosljednost u stilu olakšat će drugima razumijevanje vašeg HTML koda.

Možda jednog dana programi poput programa za čitanje XML podaci, morat ćete pročitati svoj HTML kôd. Stoga je korištenje dobro oblikovane sintakse nalik XHTML-u razuman pristup.

Uvijek provjerite je li vaš kod uredan, čist i dobro oblikovan.

Koristite ispravnu vrstu dokumenta

Uvijek deklarirajte vrstu dokumenta u prvom redu:

Ako želite održati dosljednost s oznakama malim slovima, možete koristiti sljedeću definiciju vrste dokumenta:

Imena elemenata piši malim slovima

HTML5 dopušta i velika i mala slova u nazivima elemenata. Ipak, bolje je uvijek koristiti samo mala slova. To se objašnjava sljedećim razmatranjima:

• Miješanje velikih i malih slova u nazivima oznaka smatra se lošom praksom

Ovo je odlomak teksta.

Jako loše:

Ovo je odlomak teksta.

Ovo je odlomak teksta.

Zatvorite sve HTML elemente

U HTML5 ne morate zatvoriti sve elemente (na primjer, element

Ovo je odlomak teksta.

Ovo je odlomak teksta.

Ovo je odlomak teksta.

Ovo je odlomak teksta.

Zatvori prazne HTML elemente

U HTML5, hoće li ili ne zatvoriti prazne elemente ovisi o želji web programera.

Prihvatljiv:

Također prihvatljivo:

Međutim, kosa crta na kraju (/) je OBAVEZNA u XHTML-u i XML-u.

Ako se očekuje da vašoj web-stranici pristupaju XML aplikacije, unesite prazno HTML elementi Bolje je koristiti završnu kosu crtu!

Koristite mala slova za nazive atributa

U HTML5 možete miješati velika i mala slova kada pišete nazive atributa.

• Miješanje velikih i malih slova u imenima atributa smatra se lošom praksom
• Programeri obično koriste mala slova (kao u XHTML-u)
• Pisanje malim slovima izgleda čistije
• Lakše se piše malim slovima

Vrijednosti atributa stavite u navodnike

HTML5 omogućuje pisanje vrijednosti atributa bez navodnika. Međutim, preporučujemo da uvijek stavite vrijednosti atributa u navodnike jer

• Miješanje velikih i malih slova u značenjima smatra se lošom praksom
• Navedene vrijednosti su lakše čitljive
• MORATE navesti ako ima razmaka u vrijednostima

Jako loše:

Ovo neće raditi jer vrijednost ima razmake

Atributi slike

Prilikom definiranja slika uvijek koristite atribut "alt". Ovaj je atribut važan kada se slika iz nekog razloga ne prikazuje.

Također, uvijek definirajte širinu i visinu slike. Time se smanjuje oštećenje izgleda stranice jer će preglednik rezervirati prostor za sliku dok se stranica učitava.

Razmaci i jednakosti

HTML5 dopušta razmake oko znaka jednakosti. Međutim, kada nema razmaka, kod je lakše čitati i bolje grupira entitete.

Izbjegavajte duge retke koda

Na koristeći HTML uređivač, nezgodno je čitati HTML kod ako morate pomicati prozor lijevo ili desno.

Trebali biste nastojati da linija koda ne bude duža od 80 znakova.

Prazne linije i uvlake

Ne biste trebali dodavati prazne retke bez dobrog razloga.

Za najbolju čitljivost, prazne retke treba dodati samo za odvajanje velikih, logički dosljednih blokova koda.

Također, za bolju čitljivost, dodajte dva razmaka za uvlačenje. Ne koristite kartice za ovo.

Izbjegavajte nepotreban bijeli prostor i uvlake. Nema potrebe za uvlačenjem svakog elementa.

Nije potrebno:

Poznati gradovi Tokio

Tokio je glavni grad Japana, središte šireg područja Tokija i najnaseljenije gradsko područje na svijetu. To je sjedište japanske vlade i carske palače te dom japanske carske obitelji.

Poznati gradovi Tokio

Tokio je glavni grad Japana, središte šireg područja Tokija i najnaseljenije gradsko područje na svijetu. To je sjedište japanske vlade i carske palače te dom japanske carske obitelji.

Naziv Opis

A	Opis A
B	Opis B

London

Pariz

Tokio

Preskočiti ili ne i?

Prema standardu HTML5, oznaka i oznaka se ne smiju koristiti.

Sljedeći kôd smatra se valjanim prema standardu HTML5:

Naslov stranice Ovo je tekstualni naslov

Ovo je odlomak teksta.

Element je korijen dokumenta. Ovo je preporučeno mjesto za definiranje jezika stranice:

Deklaracija jezika stranice važna je i za specijalizirane aplikacije (kao što su čitači zaslona) i za tražilice.

Osim toga, ako ne napišete oznaku ili oznaku, to može razbiti DOM i XML strukturu aplikacije. A preskakanje oznake također može dovesti do pogrešaka u starijim preglednicima (IE9).

Trebam li preskočiti oznaku?

Prema standardu HTML5, oznaka se ne smije koristiti.

Prema zadanim postavkama, preglednici će dodati sve elemente prije početne oznake unutar elementa koji kreiraju.

Možete smanjiti složenost HTML strukture izostavljanjem oznake:

Naslov stranice Naslov teksta

Ovo je odlomak teksta.

Metapodaci

Element je potreban u HTML5. Naslov stranice treba biti ispunjen značenjem:

Kako bi se osiguralo ispravno tumačenje i ispravno indeksiranje stranice tražilice, definicija jezika stranice i kodiranja znakova moraju se deklarirati što je prije moguće:

Standardi HTML5 sintakse i kodiranja

Instaliranje prozora za gledanje (prozora)

"Viewport" je korisniku vidljivo područje web stranice. Ovo područje razlikuje se od uređaja do uređaja i po Mobiteli bit će manji nego na zaslonu računala.

HTML5 je uveo metodu koja omogućuje web dizajnerima da kontroliraju okvir za prikaz pomoću .

Uvijek biste trebali koristiti kontrolu okvira za prikaz u sljedećem obliku na svim web stranicama:

Ova kontrola okvira prikaza daje upute pregledniku o tome kako kontrolirati veličinu i skaliranje stranice.

Dio width=device-width postavlja širinu stranice tako da odgovara širini zaslona trenutnog uređaja (što će varirati ovisno o uređaju koji koristite).

Početna skala=1,0 skupova dijelova Prva razina povećava se kada preglednik prvi put učita stranicu.

U nastavku možete vidjeti primjer web-stranice na zaslonu pametnog telefona sa i bez instalirane meta oznake prozora:

Stranica s metaoznakom vidnog polja

HTML komentari

Kratak komentar treba napisati u jednom redu: