Želite brzo pronaći opis HTML5 elementa ili atributa koji se koristi na web stranici ili web aplikaciji? Evo klasične referentne knjige koju web dizajneri i web programeri pokušavaju držati pri ruci više od 15 godina.
Peto izdanje knjige uključuje kompletan opis HTML5 elemenata i atributa u skladu sa HTML5 Candidate Recommendation, HTML5.1 Working Draft i WHATWG standardima. Karakteristike imenika:
– abecedno poređana lista elemenata i atributa iz HTML5, HTML5.1 i WHATWG standarda;
– primjeri oznaka, kategorija sadržaja, modela sadržaja i zahtjeva za početnu/završnu oznaku za svaki element;
– opis razlika između HTML5 i HTML4.01 specifikacija;
– tabele specijalnih znakova;
– pregled API biblioteka koje se koriste u HTML5.

Bilo da ste iskusan programer web stranica ili želite brzo napraviti web stranicu prema najnovijim standardima, ova korisna knjiga će vam biti neophodna.

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

Sve knjige predstavljene na sajtu su samo u informativne svrhe. Bilo kakva njihova upotreba od strane vas je dozvoljena samo u informativne svrhe. Ako ih planirate koristiti u budućnosti, morate ih kupiti od vlasnika autorskih prava. Administracija stranice nije odgovorna za njihovu upotrebu.

Pročitavši naslov publikacije: „HTML5 Cheat Sheet na ruskom“ - svi su već pogodili o govoru, ali prvo par pasusa o HTML5 općenito.

Rad na kreiranju HTML5 započeo je 2004. godine. i nastavljaju do danas. HTML5 je planiran kao najuniverzalnija i najfunkcionalnija verzija HTML-a (HyperText Markup Language), jer su na ovaj ili onaj način titani industrije kao što su Apple, Mozilla, Opera, Microsoft i Google uključeni u kreiranje HTML5. Dozvolite mi da to tačno primetim google chrome, on ovog trenutka, podržava većinu HTML5 elemenata

Unatoč činjenici da se mogu napraviti promjene u HTML5, jer je rad na HTML 5 specifikaciji još uvijek u toku i još je u procesu, razvoj tehnologije se događa toliko brzo da će HTML5 uskoro biti usvojen i web stranice će morati biti kreirane koristeći široke mogućnosti od HTML5!

HTML5 cheat sheet na ruskom će vam pomoći u učenju

Koderi i dizajneri izgleda moraju da nauče inovacije, oznake i standarde HTML5 danas, jer uprkos tekućem radu na HTML5, neke od njegovih mogućnosti se već prilično uspješno koriste prilikom kreiranja web stranica. Naravno, morate početi učiti HTML5 s oznakama, jer su se u HTML5 pojavile nove oznake, a neke stare neće biti podržane. Takođe, mnoge oznake iz HTML4 su došle do 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

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

HTML5 cheat sheet na ruskom jeziku, napravljen u A4 formatu

Prvi HTML5 cheat sheet na ruskom u RuNetu napravljen je u A4 formatu, tako da će vam biti zgodno da ga odštampate i držite pri ruci. Napominjem da HTML5 cheat sheet na ruskom opisuje sve oznake u jednom redu, prenoseći svrhu oznake što je više moguće. Naš HTML5 cheat sheet na ruskom će se stalno usavršavati i ažurirati kako se oznake uklanjaju ili dodaju u HTML5. Možete preuzeti “HTML5 cheat sheet na ruskom” sa linka ispod. U arhivi ćete naći 1 pdf Visoka kvaliteta i dva jpg fajl u različitim ekstenzijama.

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

Arhiva sadrži dva jpg fajla 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 cheat sheeta na HTML 5. Za to vrijeme, cheat sheet je preuzet 3600 puta), jako sam zadovoljan, nadam se da je bio koristan onima koji su studirali layout u HTML 5. Naučio sam mnogo i naučio na raznim forumima i web stranicama, a kreiranjem cheat sheeta sam želio da iskažem svoju zahvalnost, da vratim dug). Zašto danas pišem ažuriranje u ovom postu, jer danas je razvoj HTML5 konačno završen!

Razvoj HTML5 je zvanično završen

HTML5 je službeno "funkcionalno dovršen". Prema utvrđenim globalnim standardima od strane Worldwide Web Consortium (W3C). Ostalo je još da se urade neki testovi i još uvijek nije postao službeni web standard, ali za sada se može sa sigurnošću reći da neće biti novih funkcija u odnosu na trenutnu verziju.

To znači da web dizajneri i kreatori aplikacija sada imaju "stabilan cilj" za nesmetan prijelaz na novi standard do 2015. HTML5 jezik za označavanje omogućava programerima da dodaju funkcionalnost 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 streaming video i usluge geolokacije, vanmrežni alati i dodirne kontrole, između ostalog.

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

Najnoviji Microsoft verzije Internet Explorer, Google chrome, Mozilla Firefox i Apple Safari su već kompatibilni sa većinom HTML5 elemenata. W3C već radi na HTML 5.1, čiji su prvi dijelovi upravo dostavljeni kao nacrt.

Konvencije HTML kod

Za mnoge web programere, specifikacije HTML koda su slabo razumljive.

U periodu 2000-2010, mnogi web programeri su prešli sa HTML-a na XHTML.

Programeri koji koriste XHTML postepeno razvijaju dobre specifikacije pisanja HTML-a.

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

Koristite ispravnu vrstu dokumenta

Deklaracija tipa dokumenta u prvom redu HTML dokument:

DOCTYPE HTML>

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

DOCTYPE HTML>

Imena elemenata malim slovima

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

• Kućište mješovitog stila je jako loše.
• Mala slova je lako pisati.

Ovo je paragraf.

Veoma loše:

Ovo je paragraf.

Ovo je paragraf.

Isključite sve HTML elemente

U HTML5, ne želite da zatvorite sve elemente (kao što je element ), ali preporučujemo da svaki element treba da doda oznaku za zatvaranje.

Ovo je paragraf.

Ovo je paragraf.

Ovo je paragraf.

Ovo je paragraf.

Zatvori prazni elementi HTML

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

možemo napisati:

Također možete napisati:

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

Ako planirate da koristite svoju XML softversku stranicu, ovaj stil je veoma dobar.

Ime atributa malim slovima

HTML5 vam omogućava da koristite ime svojstva i velikim i malim slovima.

• Slučaj upotrebe je veoma loša navika.
• Programeri obično koriste mala slova (slično XHTML-u).
• Stil malih slova izgleda osvježavajuće.
• Mala slova je lako pisati.

Vrijednost imovine

Vrijednosti HTML5 atributa ne mogu se navesti.

• Ako vrijednost svojstva sadrži razmake, morate koristiti navodnike.
• Mješoviti stil se ne preporučuje, predlaže se pojedinačni stil.
• Vrijednosti svojstava pomoću navodnika lako se čitaju.

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

Ispod se koriste dvostruki navodnici, ovo je tačno:

svojstva

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

= "HTML5" stil = "širina: 128px; visina: 128px">

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

= stil "HTML5" = "širina: 128px; visina: 128px">

Razmaci i znaci jednakosti

Možete koristiti razmake prije i iza znaka jednakosti.

Izbjegavajte dugačke redove koda

Korištenje HTML editora, kod za pomicanje lijevo i desno je nezgodno.

Svaki red koda je što je više moguće manji od 80 znakova.

Prazne linije i udubljenja

Nemojte dodavati prazan red bez razloga.

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

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

Dodatno prazni redovi i uvlake:

Ovaj tutorijal

HTML

Ovaj vodič ne uči samo tehnologiju, već i spavanje.
Ovaj udžbenik, koji podučava ne samo tehnologiju, već i u snu,
Ovaj vodič ne uči samo tehnologiju, već i spavanje.

Ovaj tutorijal

U ovom tutorijalu podučavate ne samo tehnologiju, već i spavanje.
Ovaj vodič ne uči samo tehnologiju, već i spavanje.
Ovaj vodič ne uči samo tehnologiju, već i spavanje.
Ovaj vodič ne uči samo tehnologiju, već i spavanje.

Primjer obrasca:

Ime
Opis


A
Opis A


B
Opis B

Primjer liste:

London

Pariz

Tokyo

Hajde da 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 osnovni element dokumenta, jezik koji se koristi za opis stranice:

DOCTYPE HTML>

Izjava o jeziku radi lakšeg čitanja na ekranima i pretraživačima.

Hajde da izostavimo padove DOM ili XML softvera.

Izostavimo grešku koja se javlja u starijim pretraživačima (IE9).

Hoćemo li to izostaviti?

U HTML5 standardu, oznaka se može izostaviti.

Pretraživač podrazumevano postavlja sadržaj pre nego što se element doda na podrazumevani.

primjeri

DOCTYPE HTML>

Naslov stranice

Ovo je naslov

Ovo je paragraf.

Pokušajte » Metapodaci

HTML5 zahtijeva element čiji naslov naslov opisuje temu stranice:

U ovom tutorijalu

Naslov i jezik koji omogućavaju pretraživaču da brzo razumije temu vaše stranice:

DOCTYPE HTML>



U ovom tutorijalu

Web dizajner - HTML5 specifikacija (HTML 5)

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

Naslov stranice Vrh web stranice, "header" Glavni meni web stranice Glavno tijelo, članak, materijal stranice Bočna traka (bočna traka) Dno stranice, podnožje

Struktura web stranice

- uokviriti glavni sadržaj stranice (članka),
- uokviriti zaglavlje stranice,
- uokviriti podnožje stranice,
- kadrirajte glavnu stvar meni stranice,
- uokviriti bočnu traku stranice (sidebar),
- blokovi koji se ponavljaju okviri na stranici (na primjer komentari).

Elementi koda šablona HTML5 web stranice.

- dodijeliti kodiranje windows-1251.

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

- prikazivanje stranice na mobilnim uređajima.

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

nav - glavni meni stranice stranice.

članak - glavni sadržaj stranice: članak, blog post, tema foruma, itd. Može sadržavati tekst, slike, video zapise, tabele itd.

aside - bočna traka (bočna traka) stranice, obično sadrži raznih elemenata, kao što su: kategorije, oznake, najnovije objave/komentari, dodatni meniji, brojači itd.

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

HTML5 na nivou strukture stranice

Pogledajmo listu novih HTML5 oznaka odgovornih za podelu strukture stranice:

- tagovi koji uokviruju elemente dizajna gornjeg dijela stranice, takozvanog “zaglavlja stranice”. Također, oznake zaglavlja se mogu koristiti kao gornji dio oznaka odjeljka.

- oznake koje uokviruju glavni meni na sajtu.

- oznake koje uokviruju glavni sadržaj stranice: članak, unos na blogu, vijesti, 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), listu najnoviji unosi i tako dalje. Takođe možete koristiti oznake sa strane za uokvirivanje brojača, vidžeta (na primjer, komentara iz VKontaktea) i društvenih dugmadi.

- oznake za uokvirivanje donji dio stranice, tzv. “podnožje stranice”, koje može sadržavati ime autora (kompanije), kontakte (adrese, brojeve telefona), pravne informacije (autorska prava) itd. Oznake podnožja mogu se koristiti i kao donji dio oznake odjeljka, tj. same oznake podnožja će se nalaziti između oznaka sekcija

- oznake koje uokviruju ponavljajuće dijelove stranice ili glavnog sadržaja, na primjer, ako na stranici postoji nekoliko poglavlja priče, onda se svako poglavlje može smjestiti između ovih oznaka. Ili ako kliknete na link u bočnoj traci (na primjer, na link neke kategorije), tada će se pojaviti stranica na kojoj će se nalaziti linkovi s opisima koji vode do članaka koji pripadaju ovoj kategoriji, a veze s opisima se mogu uokviriti sa oznakama sekcija, kao i proizvodi sa opisima u internet prodavnici, komentarima na objave, komentarima na temu na forumima itd.

HTML5 na nivou teksta

Pogledajmo listu novih HTML5 oznaka odgovornih za semantičku podelu teksta stranice:

- tekst koji se nalazi između ovih oznaka postaje “selektiran”. Jedna od svrha oznaka za označavanje je da uokvire riječi u tekstu koje se, na primjer, podudaraju s riječju koju je korisnik unio u liniju za pretragu.

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

- oznake su dizajnirane da pohranjuju informacije koje su ili skrivene ili prikazane (radi 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čke oznake

Lista novih HTML5 oznaka koje obogaćuju jezik:

- oznake su dizajnirane da prikazuju indikator statičke skale, u kojem se rezultat mjerenja ne mijenja. Da biste radili, potrebna vam je minimalna i maksimalna vrijednost.

- oznake su dizajnirane da prikazuju indikator dinamičke skale (na primjer, skalu za preuzimanje datoteke), u kojoj se rezultat mjerenja mijenja u realnom vremenu.

- oznaka se mora nalaziti između oznaka menija, koje se koriste prilikom kreiranja skripti u JavaScript-u.

- komandna oznaka se postavlja između ovih oznaka.

- oznake su namijenjene za prikaz rada skripte.

- oznake su namijenjene kreiranju liste koja će biti prikazana kada se unese u tekstualno polje.

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

- oznake grupišu različite objekte stranice sa vlastitim opisima, na primjer, slike s opisima, proizvodi s opisima, itd.

- oznake su dizajnirane da grupišu naslove h*

- oznaka se koristi za generiranje parova javnih/privatnih ključeva, šifriranje/dešifriranje podataka, kreiranje/verifikaciju 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 pretraživačima koji ne podržavaju ruby ​​oznake.

- oznaka govori pretraživaču gdje treba postaviti riječ (" meki transfer") ako ova riječ ne stane u prozor pretraživača.

HTML5 oznake koje opisuju nove tehnologije

HTML5 uvodi mogućnost korištenja mnogih tehnologija i API-ja koji su dio HTML5 jezika, a ne dodaci treće strane, evo nekih od njih:

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

- oznake su namijenjene za reprodukciju video datoteka, bez upotrebe programa trećih strana (dodataka, ekstenzija).

- oznaka je namijenjena da naznači putanju do audio/video datoteka, smještenih unutar audio i video oznaka.

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

Tag

Oznaka je poseban element koji je dizajniran da crta i manipulira vektorskim oblicima. Oznaka je kreirana da zamijeni Flash tehnologiju. Pomoću oznake možete crtati vektorske oblike (slike), a pomoću JavaScripta manipulirati tim oblicima, stvarajući na taj način animaciju (crtaće, pa čak i igre) na web stranici.

Audio Video

Koristeći oznaku, možete ugraditi audio datoteke na stranicu i slušati ih. Element

Koristeći oznaku, možete ugraditi video datoteke na stranicu i pregledati ih. Element takođe kreira panel sa dugmadima za reprodukciju.

JavaScript API

HTML5 specifikacija opisuje kako bi trebala biti u interakciji JavaScript jezik, sa elementima stranice putem DOM tehnologije. Također u HTML5 postoje nove metode za manipulaciju objektima, na primjer, korištenjem JavaScripta i ovim metodama možete programski kontrolirati dugmad na audio/video kontrolnoj tabli.

Podrška za XML tehnologiju

U HTML dokumentu napisanom koristeći HTML5 jezik, 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. Pošto je HTML5 počeo da podržava XML formate, sada je moguće ugraditi slike kreirane pomoću SVG-a u HTML dokument i njima manipulisati putem JavaScript-a.

Primjer koda za uzorak zelenog kruga:

rezultat:

MathML

MathML - Mathematical Markup Language (matematički markup jezik) XML format. Korišćenjem ovog formata Možete opisati različite matematičke formule.

Koje oznake u HTML5 su zastarjele?

Naslijeđene oznake u HTML5 specifikaciji su:

a umjesto toga treba koristiti oznaku embed
umjesto toga treba koristiti oznaku abbr
umjesto toga treba koristiti audio oznaka
umjesto toga treba koristiti ul oznaku
..treba koristiti umjesto toga iframe tag
umjesto toga trebali biste koristiti gomilu obrazaca i oznaka za unos
a umjesto njih treba koristiti oznake pre ili code


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

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

Nije preporučljivo koristiti zastarjele oznake prilikom kreiranja web stranica na HTML5, ali to ne znači da ih preglednici više ne podržavaju, na primjer, rad nepreporučene oznake donje crte

Novi globalni atributi u HTML5

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

Pogledajmo imena i opise globalnih HTML5 atributa:

accesskey=" " - omogućava korištenje bilo kojeg elementa (tag) stranice pritiskom na unaprijed programiranu kombinacija tastera,
class=" " - omogućava vam da postavite naziv klase,
contenteditable=" " - omogućava vam uređivanje sadržaja stavka Novo,
contextmenu=" " - omogućava kreiranje kontekstnog menija za novi element,
dir=" " - omogućava vam upravljanje smjer teksta,
draggable=" " - omogućava korisniku da prevuče element New,
dropzone=" " - omogućava vam da odredite šta da radite sa elementom prilikom prevlačenja New,
hiden=" " - omogućava vam da sakrijete Novi element,
id=" " - omogućava vam da postavite jedinstveni identifikator za element,
lang=" " - omogućava vam da odredite kod jezika u sadržaju elementa,
spellcheck=" " - omogućava vam da odredite da li se provjerava pravopis u sadržaju novog elementa,
style=" " - omogućava vam da kreirate stil za element,
tabindex=" " - omogućava vam da kreirate pravilo koje određuje kojim redosledom elementi treba da dobiju fokus kada pritisnete taster Tab,
title=" " - omogućava vam da kreirate opis alata koji se pojavljuje kada pređete mišem preko elementa.

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

Inovacije u strukturi koda HTML5 dokumenta

Struktura koda u HTML5 je pretrpjela neke promjene, evo nekih od njih:

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

2. Da biste naznačili jezik dokumenta, sada umjesto meta oznake:
morate koristiti lang="ru" atribut u oznaci:

3. Da biste naznačili kodiranje dokumenta, sada umjesto meta oznake:

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

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

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

6. Link je inline tag, tako da u početku HTML specifikacije i XHTML, nije im se preporučivalo da uokviruju blok oznake; sada je u HTML5 specifikaciji ova preporuka za veze uklonjena i sada im je dozvoljeno da uokviruju jedan ili više blok elemenata.

Naslov

Paragraf

Sada sa HTML5, možete učiniti ovo:

Naslov

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

Komandne oznake za robote pretraživača, semantičko opterećenje stranica

• Dodaci u HTML W3C od 2015-2017

• Preporuke W3C 24. decembra 1999

Često web programeri nisu ni svjesni postojanja određenih standarda HTML kodiranja. Međutim, između 2000. i 2010. godine, mnogi web programeri su prešli sa HTML-a na XHTML. U isto vrijeme, XHTML je primorao programere da napišu valjan i "dobro oblikovan" kod. HTML5, kada je u pitanju validacija koda, dozvoljava neku aljkavost.

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

Možda jednog dana programi poput čitanja programa XML podaci, morat ćete pročitati svoj HTML kod. Stoga je korištenje dobro oblikovane sintakse slične 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 zadržati dosljednost s malim slovima oznaka, možete koristiti sljedeću definiciju tipa dokumenta:

Napišite nazive elemenata malim slovima

HTML5 dozvoljava i velika i mala slova u nazivima elemenata. Međutim, bolje je uvijek koristiti samo mala slova. Ovo se objašnjava sljedećim razmatranjima:

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

Ovo je pasus teksta.

Veoma loše:

Ovo je pasus teksta.

Ovo je pasus teksta.

Zatvorite sve HTML elemente

U HTML5, od vas se ne traži da zatvorite sve elemente (na primjer, element

Ovo je pasus teksta.

Ovo je pasus teksta.

Ovo je pasus teksta.

Ovo je pasus teksta.

Zatvorite prazne HTML elemente

U HTML5, da li ćete zatvoriti prazne elemente ili ne zavisi od želje web programera.

prihvatljivo:

Također prihvatljivo:

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

Ako se očekuje da će vašoj web stranici pristupiti XML aplikacije, onda u 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 imena atributa.

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

Stavite vrijednosti atributa u navodnike

HTML5 dozvoljava da se vrijednosti atributa zapisuju bez navodnika. Međutim, preporučujemo da uvijek stavljate vrijednosti atributa u navodnike jer

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

Veoma loše:

Ovo neće raditi jer ima razmaka u vrijednosti

Atributi slike

Kada definirate slike, uvijek koristite atribut "alt". Ovaj atribut je važan kada se slika iz nekog razloga ne prikazuje.

Također, uvijek definirajte širinu i visinu slike. Ovo smanjuje razlaganje izgleda stranice jer će pretraživač rezervisati prostor za sliku dok se stranica učitava.

Razmaci i jednaki

HTML5 dozvoljava razmake oko znaka jednakosti. Međutim, kada nema razmaka, kod se lakše čita i bolje grupiše entitete.

Izbjegavajte dugačke redove koda

At koristeći HTML editor, nezgodno je čitati HTML kod ako morate pomicati prozor lijevo ili desno.

Pokušajte da red koda ne bude duži od 80 znakova.

Prazne linije i udubljenja

Ne biste trebali dodavati prazne redove bez dobrog razloga.

Za najbolju čitljivost, prazne linije treba dodati samo u odvojene velike, logički konzistentne blokove koda.

Takođe, za bolju čitljivost dodajte dva razmaka za uvlačenje. Nemojte koristiti kartice za ovo.

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

Nije potrebno:

Poznati gradovi Tokio

Tokio je glavni grad Japana, centar šireg područja Tokija i najnaseljenije metropolitansko područje na svijetu. To je sjedište japanske vlade i carske palate, te dom japanske carske porodice.

Poznati gradovi Tokio

Tokio je glavni grad Japana, centar šireg područja Tokija i najnaseljenije metropolitansko područje na svijetu. To je sjedište japanske vlade i carske palate, te dom japanske carske porodice.

Naziv Opis

A	Opis A
B	Opis B

London

Pariz

Tokyo

Preskočiti ili ne i?

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

Sljedeći kod se smatra važećim prema HTML5 standardu:

Naslov stranice Ovo je naslov teksta

Ovo je pasus teksta.

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

Deklaracija jezika stranice je važna i za specijalizovane aplikacije (kao što su čitači ekrana) i za pretraživače.

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

Da li da preskočim oznaku?

Prema HTML5 standardu, oznaka se ne smije koristiti.

Po defaultu, pretraživači ć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 tekstualni pasus.

Metapodaci

Element je obavezan u HTML5. Naslov stranice treba da bude ispunjen značenjem:

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

HTML5 sintaksa i standardi kodiranja

Instaliranje prozora za pregled (prozor za gledanje)

"Viewport" je korisniku vidljivo područje web stranice. Ovo područje se razlikuje od uređaja do uređaja i po mobilni telefoni biće manji nego na ekranu računara.

HTML5 je uveo metodu koja omogućava web dizajnerima da kontrolišu okvir za prikaz koristeći .

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

Ova kontrola prikaza pruža uputstva pretraživaču kako da kontroliše veličinu i skaliranje stranice.

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

Inicijalna skala=1.0 skupovi dijelova Prvi nivo povećava kada pretraživač prvi put učita stranicu.

U nastavku možete vidjeti primjer web stranice na ekranu pametnog telefona sa i bez instalirane metaoznake viewport-a:

Stranica sa meta oznakom polja za prikaz

HTML komentari

U jednom redu treba napisati kratak komentar: