HTML5: stare oznake s novom svrhom. HTML5 elementi - nove oznake

HTML oznake su osnova HTML jezik. Oznake se koriste za omeđivanje početka i kraja elemenata u označavanju.

Svaki HTML dokument sastoji se od stabla HTML elemenata i teksta. Svaki HTML element identificiran je početnom (otvornom) i završnom (zatvarajućom) oznakom. Početne i završne oznake sadrže naziv oznake.

Svi HTML elementi podijeljeni su u pet vrsta:

• prazni elementi - , ,
  , , , , , ,
  Koristi se za skladištenje dodatne informacije o stranici. Ove informacije preglednici koriste za obradu stranice, a tražilice za indeksiranje. U bloku može biti nekoliko oznaka, jer ovisno o korištenim atributima nose različite informacije. Indikator mjerenja u zadanom rasponu. Odjeljak dokumenta koji sadrži navigacijske veze za web mjesto. Definira odjeljak koji ne podržava skriptiranje. Spremnik za ugradnju multimedije (npr. audio, video, Java appleti, ActiveX, PDF i Flash). Također možete umetnuti drugu web stranicu u trenutni HTML dokument. Oznaka se koristi za prosljeđivanje parametara dodatka. Uređena numerirana lista. Numeriranje može biti numeričko ili abecedno. Spremnik s naslovom za grupu elemenata. Određuje opciju/opciju za odabir s padajućeg popisa , ili . Polje za prikaz rezultata izračuna izračunatog pomoću skripte.

  Odlomci u tekstu. Definira parametre za dodatke ugrađene pomoću elementa. Element spremnika koji sadrži jedan element i nula ili više elemenata. Sam po sebi ne prikazuje ništa. Omogućuje pregledniku odabir najprikladnije slike. Ispisuje tekst bez oblikovanja, čuvajući razmake i prijelome teksta. Može se koristiti za prikaz računalni kod, poruke E-mail itd. Pokazatelj dovršetka zadatka bilo koje vrste. Definira kratki citat. Spremnik za Istočnoazijski likovi i njihovo dešifriranje. Definira svoj ugniježđeni tekst kao osnovnu komponentu napomene. dodaje Kratak opis iznad ili ispod znakova sadržanih u elementu, prikazanih manjim fontom. Označava ugrađeni tekst kao dodatnu napomenu. Izlazi alternativni tekst u slučaju da preglednik ne podržava element. Prikazuje tekst koji nije trenutačno precrtan. Koristi se za prikaz teksta koji predstavlja rezultat izvršenja programski kod ili skripta, kao i poruke sustava. Prikazuje se monospace fontom. Koristi se za definiranje skripte na strani klijenta (obično JavaScript). Sadrži tekst skripte ili ukazuje na vanjska datoteka skriptu koja koristi atribut src. Definira logično područje (odjeljak) stranice, obično sa zaglavljem. Kontrolni element koji vam omogućuje odabir vrijednosti iz predloženog skupa. Vrijednosti varijante smještene su u . Prikazuje tekst manjim fontom. Određuje lokaciju i vrstu alternativnih medijskih izvora za , , . Spremnik za inline elemente. Može se koristiti za oblikovanje odlomaka teksta, kao što je isticanje pojedinačnih riječi bojom. Stavlja naglasak u tekst, naglašavajući ga masnim slovima. Uključuje stilske listove koji se mogu ugraditi. Određuje pisanje indeksa simbola, na primjer, indeks elementa u kemijskim formulama. Stvara vidljiv naslov za oznaku. Prikazan s ispunjenim trokutom, klikom na njega možete vidjeti detalje naslova. Određuje pravopis nadskripta znakova.

  Oznaka odjeljka

  Oznaka odjeljka grupira sadržaj prema temi ili, drugim riječima, definira odjeljak dokumenta. Obično prethodi zaglavlju, može se pojaviti u podnožju. Oznaka odjeljka može se omotati unutar druge oznake odjeljka ako je potrebno i može sadržavati bilo koju količinu oznaka. U običnom html-u, u pravilu, div se koristi umjesto oznake section.

  oznaka zaglavlja

  Oznaka zaglavlja obično sadrži naslov ili grupe naslova, ali također može sadržavati informacije o odjeljku.

  Drugim riječima, oznaka zaglavlja definira zaglavlje stranice stranica (zaglavlje stranice).

  Oznaka podnožja

  Oznaka podnožja obično sadrži informacije o odjeljku, na primjer: autor članka, datum, autorsko pravo itd.

  HTML

  Autorska prava 20011 Sva prava

  navigacijska oznaka

  Oznaka nav definira navigacijsko područje, obično popis poveznica. Navigacijska oznaka srodna je glavnom odjeljku, zaglavlju i podnožju.

  HTML
  • Dom
  • preuzimanje datoteka
  • Arhiva
  • O nama

  Element navigacije također se može postaviti, na primjer, u oznaku zaglavlja.

  oznaka na stranu

  Sporedna oznaka definira sadržaj koji se nalazi oko glavnog sadržaja. To bi mogao biti bočna ploča(bočna traka), koji sadrži niz poveznica na članke, arhive i oznake.

  Oznaka članka

  Oznaka članka definira bilo koji samostalno snimanje(članak) na web stranici, ili, na primjer, to može biti životopis, opis proizvoda u online trgovini i tako dalje.

  oznaka figure

  Ponekad je potrebno postaviti sliku i popratni tekst kao jednu ilustraciju. Element figure označava da su tekst i slika dio jedinstvene cjeline.

  HTML Ovdje opisujem sliku Dijalog oznake

  Oznaka dijaloga je područje gdje se prikazuju komentari (razgovor, razgovor). Oznaka dijaloga sastoji se od sljedećih dijelova:

  • sama dijaloška oznaka, koja definira blok s komentarima
  • dt oznaka će odrediti tko govori
  • dd oznaka definira tekst komentara
  HTML Vasya Bio sam ovdje Petya Potvrđujem da je sve što je Vasya napisao istinito Markup na temelju HTML5 oznaka

  Pa spojimo naše oznake strukture Na stranici.

  Obični blog Standardni blog

  • Dom
  • preuzimanje datoteka
  • Arhiva
  • O nama
  Titula

  Lorem ipsum...

  Titula

  Lorem ipsum...

  Autorska prava 20011 Sva prava

  Kao što možete vidjeti, same oznake su više opisne nego da ste koristili obične identifikatore (id). div oznake. Također postoji očita prednost korištenja odgovarajućih završnih oznaka kao što je article. Na primjer, označavanje dokumenta postaje razumljivije (uključujući i tražilice) ako umjesto nerazumljivog bloka s id="something" (gdje još treba tražiti završnu oznaku!) koristite oznaku članka.

  Trebate li sada koristiti strukturne oznake?

  Zapravo, da, ako slijedite nekoliko dodatnih točaka. Ove oznake će raditi u moderni preglednici a vjerojatno i u IE6. Ali postoji nekoliko točaka koje treba obratiti pozornost ako danas želimo koristiti html5 strukturne oznake.

  Prvo, budući da većina preglednika ne razumije HTML5 doctype, oni nisu svjesni novih oznaka u HTML5. Srećom, preglednici su prilično osjetljivi, što im omogućuje da se nose s nepoznatim oznakama. Jedini je problem što nepoznate oznake nemaju zadane stilove, a takve se oznake tretiraju kao ugrađene oznake. Ali naše nove HTML5 oznake su strukturne i očito bi trebale biti blok elementi. Dakle, kada ih stiliziramo u css-u, moramo uključiti display:block deklaraciju.

  Samo uključite mali dio koda u svoj CSS i nove HTML5 oznake su spremne. I naravno, kada se HTML5 u potpunosti usvoji, opis display:block može se ukloniti, jer će ovaj opis biti uključen u zadane stilove.

  IE podrška

  Postoji problem ako trebate podršku za IE. Ispostavilo se da će IE mehanizam raditi s novim oznakama, ali neće prepoznati nijednu CSS stil, primijenjen na njih. Srećom, to možete popraviti tako da omogućite mali dio JavaScripta. Sve što trebamo je omogućiti sljedeći kod:

  document.createElement("zaglavlje"); document.createElement("podnožje"); document.createElement("odjeljak"); document.createElement("na stranu"); document.createElement("nav"); document.createElement("članak");

  Ovaj kod može biti uključen izravno u glavu ili povezan putem vanjske datoteke.

  Zaključak

  Tako da već sada možete strukturirati svoje dokumente pomoću novih HTML5 oznaka.

  U HTML5 je uvedeno nekoliko novih oznaka za strukturu koda: , , , , , koje u nekim slučajevima zamjenjuju uobičajene . Iako se čini da među oznakama nema velike razlike, među njima postoji veliki jaz. Oznake nisu namijenjene ljudima koji nemaju razloga za razgledavanje izvor stranicama, već strojevima koji interpretiraju kod. Strojevi ili roboti ne razumiju, za njih je to tipična oznaka za označavanje - zamijenite je s i značenje se neće promijeniti. Druga stvar je da robot, nakon što je otkrio ovu oznaku, percipira to upravo kao zaglavlje stranice ili odjeljka.

  Što ovo daje na kraju? Tražilice Počinju bolje indeksirati web mjesto jer jasno odvajaju sadržaj stranice od pomoćnih elemenata. Govorni preglednici namijenjeni slijepim osobama preskaču zaglavlje i idu izravno na sadržaj. Stranice mogu automatski međusobno dijeliti sadržaj i druge informacije. Sve te mogućnosti nazivaju se semantikom i omogućuju vam da podatke predstavite u obliku pogodnom za robote.

  Najprije napravimo zaglavlje stranice pomoću oznake (primjer 6.2).

  Primjer 6.2. Korištenje

  

  Pokušaj dodavanja pozadine oznaci u stilovima nije doveo do ničega; pozadina se ne želi prikazati u nekim preglednicima. Sve nove oznake treba prvo napraviti na razini bloka putem svojstva prikaza, a zatim će se početi ispravno prikazivati ​​(primjer 6.3).

  Primjer 6.3. Zaglavlje stranice

  HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx

  zaglavlje ( prikaz: blok; pozadina: #00B0D8 url(images/header-gradient.png) repeat-x; )

  Ovaj će primjer raditi u svim preglednicima osim IE7 i IE8. Internet Explorer ne dodaje stil elementima koje ne razumije. Ovaj se nesporazum može ispraviti stvaranjem lažnog elementa s koristeći JavaScript. Da bismo to učinili, uključit ćemo ovo u kod.

  document.createElement("zaglavlje");

  Ako postoji jedna oznaka na stranici, ova skripta je sasvim prikladna za posao. Ali ne želim ponavljati rečenicu deset puta za deset različite oznake, tako da automatiziramo ovaj proces kroz petlju. Same oznake navedene su u popisu, odvojene zarezima (primjer 6.4).

  Primjer 6.4. Skripta za IE

  var e = ("članak,na stranu,naslov slike,slika,podnožje,zaglavlje,hgrupa,nav,odjeljak,vrijeme").split(","); za (var i = 0; i< e.length; i++) { document.createElement(e[i]); }

  Sama skripta sastoji se od uvjetni komentari, tako da radi samo za IE verziju 8.0 i starije. IE9 već uključuje podršku za nove HTML5 oznake.

  Ne morate ugraditi gornji primjer na svoju web stranicu; možete koristiti javno dostupnu skriptu koju je napisao Remy Sharp i distribuira pod licencom MIT-a. Da biste to učinili, samo navedite poveznicu na njega, kao što je prikazano u primjeru 6.5.

  Primjer 6.5. Skripta za IE

  Sve navedene skripte moraju se nalaziti u kodu prije CSS-a.

  Stoga, za puna upotreba HTML5 oznake u svim preglednicima trebaju samo ispuniti tri uvjeta:

  postaviti tip dokumenta;
  uključite skriptu iz primjera 6.4 ili 6.5;
  u stilovima za nove oznake postavite display: block.

  Pogledajmo sada detaljnije neke HTML5 oznake da bismo razumjeli njihov opseg.

  Primjer 6.6. Korištenje oznake

  HTML5 IE Cr Op Sa Fx

  članak Tragovi neviđenih životinja Priča o tome kako su se misteriozni ružičasti otisci sa šest prstiju pojavili u blizini blagovaonice i zašto se to dogodilo.

  Definira blok koji nije povezan s glavnim sadržajem za postavljanje kategorija, poveznica na arhivu, oznaka i drugih informacija (primjer 6.7). Takav blok, ako se nalazi sa strane, obično se naziva "bočna traka" ili "bočna traka".

  Primjer 6.7. Korištenje

  HTML5 IE Cr Op Sa Fx

  po strani document.createElement("po strani"); document.createElement("članak"); na stranu ( background: #f0f0f0; /* Boja pozadine */ padding: 10px; /* Margine */ width: 200px; /* Sidebar width */ float: right; /* Wrap lijevo */ ) članak ( margin-desno: 240px ; /* Desna uvlaka */ prikaz: blok /* Blok element */ }

  Štedite električnu energiju

  Dobar jezik

  Čiji je štap veći

  Priča o tome kako se struja morala štedjeti, koje su mjere za to poduzete i gdje je zapravo nestala.

  Koristi se za grupiranje bilo kojih elemenata, na primjer, slika i naslova (primjer 6.8).

  Primjer 6.8. Korištenje

  HTML5 IE Cr Op Sa Fx

  dokument figure.createElement("figura"); document.createElement("figcaption"); figura ( pozadina: #5f6a72; /* Boja pozadine */ padding: 10px; /* Margine oko */ display: block; /* Block element */ width: 150px; /* Širina */ float: lijevo; /* Blokovi su poredano vodoravno */ margina: 0 10px 10px 0;

  

  Katedrala Svete Sofije

  

  Poljska crkva

  Sadrži opis za oznaku. Oznaka mora biti prva ili posljednji element u grupi.

  Određuje "podnožje" stranice ili odjeljka; obično sadrži ime autora, datum dokumenta, kontakt i Legalna informacija(Primjer 6.9).

  Primjer 6.9. Korištenje

  HTML5 IE Cr Op Sa Fx

  footer Osobna stranica Kristine Vetrove Dobrodošli!

  Drago mi je što vas mogu pozdraviti na svojoj web stranici.

  Copyright Kristina Vetrova

  Definira "zaglavlje" stranice ili odjeljka.

  Koristi se za grupiranje naslova web stranica ili odjeljaka (Primjer 6.10).

  Primjer 6.10. Korištenje

  HTML5 IE Cr Op Sa Fx

  hgroup Kristina Vetrova Osobna web stranica

  Postavlja navigaciju web stranice (primjer 6.11). Ako na stranici postoji nekoliko blokova veza, tada se prioritetne veze obično postavljaju u njih. Također je prihvatljivo koristiti više oznaka u dokumentu. Nemojte stavljati unutra.

  Primjer 6.11. Korištenje

  HTML5 IE Cr Op Sa Fx

  nav Čeburaška i krokodil Gena Čeburaška | Gene | Shapoklyak | Lariska Dobrodošli!

  Definira odjeljak dokumenta koji može uključivati ​​naslove, zaglavlje, podnožje i tekst (Primjer 6.12). Dopušteno je ugniježditi jednu oznaku u drugu.

  Primjer 6.12. Korištenje

  HTML5 IE Cr Op Sa Fx

  odjeljak Snimanje Polipropilen

  Priča o tome kako su snimili film u kojem su se junaci odmarali na plaži, onda je došao antagonist, pretukao protagoniste, bacio ih u bazen i što se dogodilo.

  Dobar jezik

  Priča o tome kako je nastao studio za učenje esperanta, a iznad njega, na verandi, studio za šalu u kojem su se pričale šale i što je iz toga proizašlo.

  Označava tekst unutar oznake kao datum, vrijeme ili i datum i vrijeme. Može se navesti izravno unutar spremnika ili navesti putem atributa datetime (primjer 6.13).

  Datum i vrijeme postavljeni su na međunarodnom nivou ISO format 8601. Primjeri dizajna dani su u tablici. 6.1.

  Svaka jedinica ima svoj određeni oblik i ograničenja.

  • Godina je navedena u četiri znamenke (1860).
  • Mjesec - dvije znamenke (01 - siječanj, 02 - veljača, 12 - prosinac).
  • Dan - dva broja od 01 do 31.
  • Sat - dvije znamenke od 00 do 23.
  • Minute su dvije znamenke od 00 do 59.
  • Sekunde su dvije znamenke od 00 do 59.
  • Vremenska zona - sati i minute označeni znakom plus ili minus.

  Datum i vrijeme su odvojeni velikim slovima latinično pismo T. Ako je potrebno, vremenska zona se upisuje iza vremena sa znakom plus ili minus. Na primjer, za Moskvu će vremenska zona biti +03:00.

  Primjer 6.13. Korištenje

  HTML5 IE Cr Op Sa Fx

  vrijeme

  1957-10-04 prvi put lansiran umjetni satelit Zemlja.

  1960-08-19 prvi let pasa u svemir.

  1961-04-12 prvi svemirski let s ljudskom posadom.

  1963-06-16 prvi let astronauta.

  21. srpnja 1969. čovjek sletio na Mjesec.

  Napomena autora: Dobrodošli na ovaj blog. U ovoj lekciji želio bih vas upoznati s osnovama html5, odnosno najosnovnijim oznakama koje su se pojavile u njemu i već se koriste u izradi modernih web stranica. Elementi HTML5 značajno proširuju mogućnosti ovog jezika, upoznajmo se s njima.

  Novi elementi u html5 - semantika

  Za početak bih spomenula tzv semantičke oznake, koji su glavna inovacija, iako osim njih postoje mnoge inovacije vezane uz forme i njihovu obradu. Semantika u rasporedu bila je jednostavno nula, još u danima tablica. Danas u eri promocija tražilice Sve više i više webmastera počinje shvaćati njegovu važnost, jer čak i takve stvari igraju ulogu.

  Osim toga, sami moderni web standardi usmjereni su na jednostavnost i jasnoću koda. Novi elementi posebno uključuju sljedeće oznake:

  Zaglavlje uparena oznaka, što označava zaglavlje stranice, članka ili nečeg drugog. Osobno sam isprva mislio da bi se ova oznaka trebala koristiti samo za označavanje samog zaglavlja stranice.

  Kasnije sam od iskusnijih ljudi u izradi web stranica saznao da na jednoj stranici može biti nekoliko oznaka zaglavlja. Sukladno tome, potreba za identifikatorima ili klasama za takve elemente ostaje relevantna.

  Footer – dno stranice, podrum ili kako god ga drugačije nazvali. Obično sadrži informacije o autorskim pravima, ponekad dodatni izbornik I kontakt informacije. U slučaju ove oznake, situacija je ista kao i sa zaglavljem - ono možda nije jedino na stranici; ova oznaka se može koristiti za označavanje, na primjer, donjeg odjeljka na bočnoj traci ako se stvarno razlikuje od ostali.

  Nav je spremnik za poveznice koje su od posebne važnosti na web stranici. Ukratko, sada bi ova oznaka trebala sadržavati glavni izbornik web-mjesta koji sadrži veze na važne stranice i zaglavlja web mjesta.

  Članak – spremnik za sadržaj stranice, bilo da se radi o članku, vijestima, nova tema na forumu itd.

  Na stranu – još uvijek se vode rasprave o tome za što bi se ova oznaka trebala koristiti. Prvo se netko dosjetio da im je uobičajeno napraviti bočni stupac u kojem se nalaze razni widgeti. Ova se izjava smatra smislenijom - ova bi oznaka trebala uokviriti sve informacije koje su sporedne informacije na web stranici. Na primjer, citat, blok s navigacijom dokumenta ili blok s kontekstualno oglašavanje.

  

  Riža. 1. Semantički elementi i nova oznaka uz njihovu pomoć.

  Ovo su bili glavni semantički elementi html5, a sada pogledajmo ostale koji dodaju dodatne mogućnosti na web stranici.

  Umetanje medijskih datoteka

  Audio – ovaj tag je također uparen, namijenjen je jednostavnom i razumljivom prikazu audio zapisa na ekranu, kao i player u kojem se mogu reproducirati. Osim toga, morate staviti ovu oznaku pojedinačne oznake izvor, u koji upišite put do audio datoteke različite formate tako da svi preglednici mogu obraditi zvuk.

  To je učinjeno radi kompatibilnosti s više preglednika. Dovoljno je u ekstenziji ogg i mp3 napisati put do audio datoteke. Audio također ima određene atribute. Na primjer, atribut kontrole dodaje kontrole audio snimci tako da možete promijeniti glasnoću i zaustaviti reprodukciju.

  Video je potpuno identičan element prethodnom, osim što prikazuje video. Također sadrži izvorne oznake, gdje su staze do datoteka navedene u src atributima.

  Vrijedno je reći da je s videom situacija malo kompliciranija. Kako bi se mogao reproducirati u svim preglednicima, potrebno ga je dodati u tri formata odjednom - ogg, mp4 i webm.

  Općenito, oznaka ima iste atribute kao i zvuk. Dodatno, ima atribut poster, s kojim možete postaviti put do slike koja će biti vidljiva ako se video ne reproducira. Također koristeći atributi širine i visinu možete odrediti veličinu područja u kojem će se video reproducirati. Ali ipak mi se čini da je bolje to učiniti preko css-a.

  Iz nekog razloga ne dajem primjere, ali to bi trebalo biti učinjeno umetanjem videozapisa.

  Vaš preglednik ne podržava video oznaku.

  Oznaka za izradu tablice.
  	Definira tijelo tablice.
  		Stvara ćeliju tablice.
  	Koristi se za deklariranje fragmenata HTML koda koji se mogu klonirati i umetnuti u dokument pomoću skripte. Sadržaj oznake nije njezin potomak.
  	Stvara velika polja za unos teksta.
  	Definira podnožje tablice.
  	Stvara naslov ćelije tablice.
  	Definira naslov tablice.
  	Definira datum/vrijeme.
  	Naslov HTML dokumenta koji se pojavljuje na vrhu naslovne trake preglednika. Može se također pojaviti u rezultatima pretraživanja, pa to treba uzeti u obzir prilikom davanja naslova.
  Stvara red tablice.
  	Dodaje titlove za elemente i .
  	Ističe odlomak teksta podvlačenjem, bez dodatnog naglašavanja.
  	Stvara popis s grafičkim oznakama.
  	Ističe varijable iz programa prikazujući ih kurzivom.
  	Dodaje video datoteke na stranicu. Podržava 3 video formata: MP4, WebM, Ogg.
  	Označava pregledniku gdje bi dugi red mogao prekinuti.

  < video width = "600" height = "450" poster = "video/poster.jpg" controls = "controls" > < source src = "movie.ogv" type = "video/ogg; codecs="theora, vorbis"" > < source src = "movie.mp4" type = "video/mp4; codecs="avc1.42E01E, mp4a.40.2"" > < source src = "movie.webm" type = "video/webm; codecs="vp8, vorbis"" > Vaš preglednik ne podržava video oznaku. < / video >

  Kao što vidite, imamo istu datoteku - film. Samo je u različitim formatima. Također morate navesti vrstu MIME i kodeke. Ali ovo ne biste trebali zapamtiti i pokušavati zadržati u svom sjećanju - samo kopirajte.

  Slika – oznaka stvorena za grupiranje nekih elemenata. Neraskidivo je povezan s figcaption. S tim elementima možemo postići ono što je prethodno učinjeno na druge načine. Na primjer, umetnite naslov na sliku. To se može učiniti ovako:

  Naslov slike

  < figure > < img src = “image . jpg ”> < figcaption >CaptionsImage< / figcaption > < / figure >

  

  Riža. 2. Natpis za sliku.

  Datalist je zanimljiva oznaka u koju se može unijeti pomoću oznaka opcija moguće opcije kada korisnik upisuje riječi u polje za unos teksta. To možete vidjeti u tražilici - ona vam sama govori o mogućim opcijama. Ovdje, naravno, sustav nije tako genijalan - možete jednostavno zapisati nekoliko najviše uobičajene riječi koje ljudi mogu tražiti na vašoj web-lokaciji. Element je povezan s polje za tekst pomoću atributa liste, u kojem trebate navesti identifikator koji smo definirali za oznaku datalist.

  Možda bi o html5 elementima trebalo napisati knjigu, a ne članak, jer nismo pokrili ni pola svega što se ovom tehnologijom može napraviti. Ali, nadam se da vam je postalo jasno - HTML5 je moć i to je tehnologija koja značajno proširuje arsenal mogućnosti web programera.

  Dotaknuli smo se samo mogućnosti tehnologije, a također možete pronaći informacije u našem tečaju o osnovama HTML5. Uključen je zajedno s drugim zanimljivim tečajevima o izradi web stranica.

  Kao što vidite, HTML5 pruža mnogo novih mogućnosti, pa bi se svi zainteresirani za izradu web stranica trebali upoznati s ovom tehnologijom. Želim vam uspjeh u učenju i ne zaboravite pogledati naš blog.

  Svi znaju da oznake, , , prezentacijski su, pa se stoga, na temelju paradigme "struktura, prezentacija, ponašanje", njihova uporaba ne potiče. Elementi , , , čine se mnogo poznatijim. Tako je kroz dugogodišnju razvojnu praksu. Međutim, dosta se promijenilo u semantici ovih elemenata dolaskom HTML5. Sada imamo 4 nove oznake sa značenjem i neredom u našim glavama.

  vs Ako su prije svi udžbenici s rasporedom bili puni izraza poput "upotrijebiti umjesto ", a to je bilo napola točno, danas takva navika može odigrati okrutnu semantičku šalu. Stvar je u tome što autori HTML5 predlažu da se njime istaknu odlomci teksta kako bi se privukla pozornost čitatelja, ali bez impliciranja povećanog značaja teksta ili intonacije. Specifikacija daje primjere korištenja za označavanje ključne riječi u dokumentu

  Frobonitor i barbinator komponente su pržene.

  I vodi (prvi odlomak članka u novinarstvu)

  
  Mačiće "usvojio" kućni ljubimac kunić
  

  Šest napuštenih mačića pronašlo je neočekivanu novu majčinu figuru - kućnog ljubimca zeca.

  
  

  Veterinarska sestra Melanie Humble odvela je tri tjedna stare mačiće u svoj dom u Aberdeenu.

  
  

  Zauzvrat, kao i do sada, to znači povećanje značaja njegovog sadržaja.

  vs Od sada nadalje sadrži tekst koji odskače od općeg okruženja, ali nema emocionalni prizvuk. Po mom mišljenju, logično je koristiti tamo gdje tipografska tradicija predlaže kurziv (na primjer, riječi u strani jezik, uvjeti itd.)

  Per aspera ad Astra— u prijevodu s latinskog, izreka znači “Preko trnja do zvijezda”.

  to znači emfatički naglasak, emocionalno naglašavanje određenog odlomka teksta. To je slučaj kada u govoru ističemo riječi glasom (intonacijom, glasnoćom itd.)

  Ne možete pogubiti, možete imati milost.

  Pažljivo pročitajte ugovor! “Sitnim slovima” (informacija koja je pravna formalnost, kao što je poslovna dozvola ili pravnu adresu itd.) element smo u pravilu označavali klasom koja definira više u vizualnim korisničkim agentima mali font. Sada se u našem arsenalu pojavio novi stari semantički element - .Holivar o Ranije nije bio ništa više od prekriženog teksta. Sada predstavlja informacije koje su izgubile na važnosti.
  Također imamo element čiji je zadani rezultat u vizualnim korisničkim agentima precrtani tekst. To znači izmjene na dokumentu, a na prvi pogled njihova svrha može izgledati ista. Međutim, ovdje postoji jedna suptilna točka. Pogledajmo primjer stranice proizvoda u online trgovini.
  Može označavati dvije cijene, od kojih je jedna prekrižena. Označavamo ga elementom . To znači da stara cijena izgubila na važnosti (nije važno kada je bila, važna je sama činjenica). Kako provjeriti da nije? podrazumijeva izmjene napravljene na dokumentu(važno je to u nekom trenutku dokument je promijenjen). U našem slučaju, novi dokument već sadrži nevažne informacije i stari doctype If iz nekog razloga iz nepoznatih razloga ne možete zamijeniti doctype s novim i formalno su raspored u HTML 4.01 - ne očajavajte. Koristite stare nove elemente s novim značenjem i s vremenom ćete biti zahvalni. Možda će netko reći da je to netočno, ali ovi elementi nisu ni nevažeći. Osim toga, HTML5 je dizajniran sa unatrag kompatibilan, isto vrijedi i za novu semantiku starih elemenata. Ništa se nije radikalno promijenilo, već je samo dodan semantički začin.