Sadržaj
- 01. slika>
- 02. datalist>
- 03. dl>
- 04. detalji>
- 05. dfn>
- 06. slika>
- 07. kod>
- 08. vrijeme>
- 5 HTML oznaka koje treba izbjegavati
- 01. font>
- 02. menuitem>
- 03. velika>
- 04. središte>
- 05. šator>
Kada je uvedena HTML5 specifikacija, sa sobom je donijela mnoštvo novih semantičkih oznaka, koje su HTML oznakama dale više značenja. Izvrsne vijesti za web dizajnere, koji više nisu morali proizvoditi uzorke div> tagova za izgradnju svoje web stranice.
Dok su osnovne semantičke HTML oznake poput zaglavlje>, podnožje> i nav> su samorazumljive, postoji mnoštvo novijih HTML oznaka koje web dizajneri također trebaju koristiti. U ovom postu sakupljamo osam bitnih HTML oznaka koje trebate koristiti i objašnjavamo kako to učiniti. Radi ravnoteže, odabrali smo i pet oznaka koje treba protjerati u granice web povijesti.
Za više savjeta o web dizajnu pogledajte naš pregled alata za web dizajn, popis najboljih graditelja web stranica ili naš vodič za izradu aplikacije.
01. slika>
The slika> Oznaka je slična img>, slika> element pruža fleksibilnost dopuštajući višestruko izvor> elementi za isti resurs, koji se mogu prilagoditi na temelju medijskog upita ili podrške za vrstu slike. Na primjer, može isporučiti WebP slike preglednicima koji podržavaju noviju, manju veličinu datoteke.
02. datalist>
The datalist> Oznaka pruža sučelje za samodovršavanje za ulaz> elementi. Svaki popis sadrži skup opcija> elementi koji imaju pridruženu vrijednost. Kada je povezan s ulaz> pomoću atributa "popis" može pružiti padajući popis ili čak prikazati prijedloge kao tipove korisnika.
03. dl>
Ovaj popis opisa ili dl> tag, element služi kao spremnik za skupine definiranih pojmova. Unutar, svaki pojam (dt>) i definicija (dd>) grupiraju se zajedno kako bi stvorili strukturu nalik rječniku. Iako se prema zadanim postavkama primjenjuje osnovno formatiranje, semantički HTML koristi čitačima zaslona i drugim automatiziranim alatima, poput alata za indeksiranje.
04. detalji>
Harmonike su uobičajeni obrazac dizajna kada treba prikazati puno podataka odjednom, poput stranice s pitanjima. Korištenjem detalji> element uz sažetak>, isti učinak možemo postići i bez JavaScript-a. Klikom na sažetak prebacit će se ostatak sadržaja.
05. dfn>
Složene pojmove ili kratice često je potrebno definirati za one koji nisu poznati. Pojam umotan u a dfn> Oznaka će biti definirana tekstom koji je okružuje. Ovo je ugrađeni element i dizajniran je da se koristi za isticanje definicija u ljudskom jeziku.
06. slika>
Lik je definiran kao jedinica sadržaja koja se često pojavljuje u glavnom tijeku dokumenta, ali se također može tumačiti zasebno. The slika> element omotava sliku ili drugi referentni sadržaj, a može sadržavati i opis sadržaja s figcaption>.
07. kod>
Uz tehničko pisanje, može biti korisno vizualno odvojiti računalni kod od ostatka rečenice. Umotavanjem svake pojave u a kod> oznaka, preglednik može primijeniti neko zadano oblikovanje kako bi ga ispravnije prikazao. Kombinirati s pre> za veće blokove koda.
08. vrijeme>
Vremenske vrijednosti možemo pisati različito, ovisno o kontekstu ili jeziku. Označavanjem ovih vrijednosti znakom vrijeme> tag, tražilice i drugi automatizirani alati mogu brzo izvući ove podatke. Upotrijebite atribut "datetime" za unos određenog vremena u formatu prilagođenijem stroju.
5 HTML oznaka koje treba izbjegavati
HTML specifikacija ima puno naslijeđenih oznaka koje se još uvijek mogu koristiti i dalje će raditi, ali jednostavna je činjenica da vani postoji obično bolja alternativa. A ako postoji bolja opcija, tada je stvarno trebate koristiti.
Tu je i pitanje podrške preglednika. Neke oznake više neće biti podržane u svakom pregledniku, ali one mogu proći nezapaženo kada se gleda dizajn stranice. Opet ih treba zamijeniti.
Ispod ćete pronaći pet oznaka koje definitivno ne bi trebale stajati unutar HTML-a bilo koje stranice. Ako u svom kodu primijetite bilo što od toga, provjerite je li zamijenjeno prikladnijom oznakom ili je uopće uklonjeno.
01. font>
Povijesno gledano, font> Oznaka korištena je za oblikovanje bloka teksta, sada je najbolje ciljati i oblikovati tekst pomoću CSS-a. Prema Advanced Web Rankingu, gotovo 6,5 milijuna web stranica i dalje koristi oznaku unatoč tome što je zastarijevala dugi niz godina.
02. menuitem>
U kombinaciji s izbornik>, menuitem> Oznaka nudi opcije i radnje za izvođenje unutar kontekstnih izbornika. Ovo je sada uklonjeno iz specifikacije jer nije dobilo veliku podršku preglednika.
03. velika>
The velika> oznaka povećala bi veličinu teksta unutar oznake za jednu razinu. Njegov suputnik mali> još uvijek vrijedi HTML, ali sada ima više definirano semantičko značenje koje se odnosi na sitni tisak.
04. središte>
Prije središte> oznaka bio je jedini način za centraliziranje i blok i ugrađenog sadržaja, ali je sada zamijenjen s "poravnanje teksta: središte”U CSS-u, koji obavlja isti posao.
05. šator>
The marquee> Oznaka je omogućila da se tekst unutar oznake kreće po zaslonu poput oznake vijesti. Iako je ranije bila popularna značajka weba, klasificirana je kao zastarjela u korist CSS-animacija.
Da bi vaša web lokacija radila kako želite, provjerite imate li pravu uslugu web hostinga za sebe. Imate hrpu imovine koju možete sakriti? Treba vam pouzdana pohrana u oblaku.
- Alati za web dizajn: koji će vam pomoći da radite pametnije
- Odzivni vodiči za web dizajn: stvarno korisni resursi
- Prijenosna računala za programiranje: najbolje opcije
