Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • Windows 7, XP
  • Semantička oznaka: šta je to i zašto je potrebna. Šta je semantika u HTML-u

Semantička oznaka: šta je to i zašto je potrebna. Šta je semantika u HTML-u

Semantičko označavanje je jedan od najmoćnijih - ali, začudo, rijetko korištenih - alata. optimizacija za pretraživače. Zapravo, ovo je način da se pretraživačima olakša ekstrakcija i obrada podataka za njihovu informativniju prezentaciju u rezultatima pretraživanja. A to povećava potencijal klikanja vaših linkova u rezultatima pretraživanja.

Kada kupci traže nešto na Googleu, Yandexu ili Bingu, sigurno će dobiti dugu listu reklame i organske rezultate pretrage. Ako je vaša stranica dobro rangirana za pretragu određenog proizvoda, u rezultatima će se pojaviti veza do nje. Ali ovo je samo dio zadatka, jer neko drugi mora kliknuti na link.

Semantičko označavanje čini rezultat pretraživanja informativnijim

Jedan od načina da se istaknete na listi rezultata pretrage je da joj dodate relevantnije informacije, kao što su ocjena proizvoda, cijena, kao i informacije o recenzijama i dostupnosti.

Na slici ispod možete vidjeti rezultate Google pretrage za 20.06.2016. Ovo je takozvani isječak - Kratki opis web stranice u rezultatima pretraživanja. Kao što možete vidjeti, PHILIPS ProCare peglu za kosu ocijenilo je četiri kupca na Rozetka.com.ua, dajući svaki po pet zvjezdica. Cijena proizvoda je 999 grivna i nalazi se na lageru.

Ovaj rezultat Google pretraživanja vraća strukturirane podatke.

Google to razumije i prikazuje Dodatne informacije zahvaljujući strukturiranim oznakama podataka o tome određena stranica robe. Ovo dodatni posao, što je urađeno na Rozetka.com.ua, neće direktno uticati na rezultate rangiranja. Ali ako se stranica pojavi u rezultatima pretraživanja korisnika u ovom obliku, ima mnogo veće šanse da dobije klik. Stoga, na kraju, semantičko označavanje poboljšava poziciju stranice u SERP-u.

Semantička oznaka i vokabular u formatu mikropodataka

Dakle, postoji standard semantičko označavanje podatke na mreži Schema.org, koju su zajedno kreirali Google, Bing i Yahoo 2011. godine. To je konzistentna semantička šema označavanja koja omogućava pretraživačima da shvate šta da rade sa informacijama na vašem sajtu.

Rečnik Schema.org se koristi zajedno sa mikropodacima, web standardom za semantičko označavanje HTML stranica koji omogućava da se značenje informacija o HTML elementima opiše pomoću posebnih mašinski čitljivih atributa. Drugim riječima, vi dodajete posebne oznake na HTML kod njihovih stranica - i pretraživačima postaje jasno o čemu se radi u pitanju, i šta učiniti s tim.

Kako bi tražilica prepoznala vaše dodatne podatke o proizvodu, označite relevantne stranice prema shemama Product , Offer i AggregateRating.

Korištenje Schema.org rječnika s mikropodacima za stranicu proizvoda u online trgovini počinje s vanjski element uokvirivanje informacija o proizvodu. U ovom primjeru koristimo div.



Koristeći atribut itemscope, dodajemo dodatne informacije o proizvodu.


Neki cool proizvod




To je samo odličan proizvod. Bićete veoma zadovoljni.
123456789


Semantička oznaka i JSON-LD

Nedavno je Google počeo da daje više preferencija JSON za povezivanje podataka ili JSON-LD, a ne mikropodaci. JSON-LD format ima nekoliko prednosti. Na primjer, da biste ga koristili, ne morate uključiti HTML kod u tijelo stranice. Samo zalijepite skriptu u . Prvo postavljamo tip:

Ključni koncept ove oznake je kontekst (@context). Pomoću njega možete, na primjer, odrediti da se semantika schema.org koristi u označavanju:
{
"@context": "http://schema.org/",
"@type": "Proizvod",
"name": "Neki cool proizvod",
"image": "some-cool-product.png",
"opis": "Ovo je jednostavno odličan proizvod. Bićete veoma zadovoljni."
"sku": "123456789"
"zbirni rejting" :(
"@type": "AggregateRating",
"ratingValue": "4",
"reviewCount": "1,987"
},
ponude :(
"@type": "Ponuda",
"priceCurrency": "UAH",
"cijena": "999",
"availability": "http://schema.org/Available"
}
}

Semantičko označavanje - bilo da se radi s mikropodacima ili JSON-LD - omogućit će vam da bolje predstavite svoje proizvode u rezultatima Rezultati pretrage, čime značajno povećavaju njihovu stopu klikanja i, shodno tome, njihovu prodaju.

U današnjem članku razgovaraćemo o prilično zajebanoj temi o kojoj se već duže vrijeme raspravlja na mnogim forumima, blogovima i drugim stranicama. Kao što pokazuje naša praksa, više od 50% vlasnika sajtova ne razume šta je semantičko označavanje podataka i zašto je potrebno. Koriste ga ili sa greškama, ili samo da budu. Možete pročitati o vrstama semantičkih oznaka.

Šta je semantičko označavanje?

Nisam mogao pronaći odgovarajuću definiciju na Internetu, pa sam odlučio da je sastavim od 4 najprikladnije definicije.

Semantičko označavanje je način da se formaliziraju vrijednosti pomoću razni standardi(rječnici) o različitim entitetima (događaji, organizacije, ljudi, proizvodi itd.) koristeći sintaksu (način na koji se koristi rječnik) na web stranicama resursa.

Ispalo je malo nezgodno... Međutim, od ovu definiciju razumijemo da je semantičko označavanje neka vrsta pravila koja se pridržavaju određenih standarda ili rječnika. Koje su, pak, dizajnirane da pomognu pretraživačima (i ne samo) da razumiju sadržaj stranica web stranice.

Nabrojimo najpoznatije standarde (rječnike) i zadržimo se detaljnije na samo dva od njih, ali o tome kasnije.

Vrste označavanja podataka

    Rečnik podataka- standard za označavanje podataka koji je razvio Google do juna 2011.

    Razvoj standarda je obustavljen zbog stvaranja Schema.org rječnika. Traži Google robot može koristiti podatke dobivene korištenjem ove oznake, ali preporuke se svode na promjenu standarda u Schema.org.

    Dublin Core, ili Dublin core je standard razvijen 1995. godine. Semantiku Dublinskog jezgra kreirao je međunarodni interdisciplinarni tim bibliotečkih i muzejskih profesionalaca, računarska nauka. To je skup meta tagova, 15 glavnih i 3 dodatna svojstva.

    Znakovi korištenja podataka iz ovog standarda u tražilice ah nije pronađeno.

    FOAF, ili prijatelj prijatelja- "međusobno" - standard koji su kreirali Libby Miller i Dan Brickley 2000. godine. Uglavnom se koristi za početne stranice i društvene mreže. Rješava problem izgradnje veza među ljudima i njihovog ujedinjavanja.

    Mikroformati ili mikroformati- standard kreiran 2005. godine od strane zajednice zainteresovanih entuzijasta iz WC3.

    Ovaj standard je bio vrlo popularan prije pojave Schema.org i još uvijek ga koriste mnoge stranice i danas. U vrijeme pisanja ovog teksta, Yandex podržava sljedeće mikroformate: hCard - format za označavanje kontakata (adrese, brojevi telefona, itd.); hRecept - format opisa recepti; hReview - format za označavanje pregleda.

Čini se da su se odlučili za standard, a i za sintaksu.

Prvo, hajde da definišemo šta je glavna svrha markupa. Ako pročitate članak o tome kako vam je zagarantovano mjesto u prvih 10 s markiranjem, onda to nije istina. Svrha mikro-označavanja je poboljšati razumijevanje stranice u očima robota, poslati informacije u baze znanja pretraživača, povećati CTR vašeg isječka (što može indirektno povećati vaš promet i pozicije). Ali moramo shvatiti da su sve to indirektni pokazatelji. Sajtovi sa i bez mikropodataka su rangirani jednako.

Sada pogledajmo koje podatke na stranici treba označiti i na čemu podržavaju tražilice ovog trenutka(budući da je svakim danom sve više podržanih subjekata).

Pogledajmo pobliže tri najčešća primjera:

schema.org oznaka kartice proizvoda

Kartice proizvoda - oznaka od strane entiteta proizvoda. Implementacija ove vrste pomoći će nam da dobijemo sljedeći isječak u Yandexu:

Ne treba se brkati sa isječkom proizvoda u rezultatima pretrage Yandexa dobivenim korištenjem .yml datoteke sa Yandex.Marketa ili usluge Proizvodi i cijene webmastera Yandexa.

Kako doći do ovog isječka?

Ko ima sličan problem na stranicama za kuhanje, možda imate isti razlog. Svaki put sam uvjeren da je pomoć naše sve.)) Također želim napomenuti kvalitet Yandex podrške, izraziti zahvalnost na brzim odgovorima - prepiska se odvijala gotovo u realnom vremenu.

Sada prijeđimo na implementaciju oznaka za kulinarske stranice.




40 min.

Naziv recepta



Porcije 6


……………………… itd. sastojci……………………………



Tortu od kornjače nije teško pripremiti, osim toga, nesumnjivo će postati omiljena torta vašoj djeci, jer izgleda kao slatka kornjača.











2100




.....




Guglajte naš lijepi isječak:

Postavit ćemo snimak ekrana isječka u Yandex kada se informacije ažuriraju (otprilike za dvije sedmice).

UPD od 05.06.2017. Kao što smo obećali, dodajemo snimak ekrana sa Yandexa:

Korisni resursi o schema.org

  1. Validatori mikropodataka:
    • Yandex validator https://webmaster.yandex.ru/tools/microtest/
    • Validator sa Googlea https://search.google.com/structured-data/testing-tool/
  2. Podržani Yandex standardi i formati: https://yandex.ru/support/webmaster/site-content/data-transmit.xml
  3. Alat "" će vam pomoći da ubrzate pojavu označenih informacija u Google-u.
  4. Pogledajte kako to izgleda određena stranica u izdavanju, operater stranice će vam pomoći: adresu stranice koja se provjerava. Radi i na Google i Yandex.
  5. Također od Google-a postoji prekrasan alat "Čarobnjak za označavanje strukturiranih podataka" - https://www.google.com/webmasters/markup-helper/?hl=ru
  6. Za Open Graph standard sa Facebooka:

Jedna od najtoplijih i najrelevantnijih tema među web programerima i vlasnicima internetskih resursa danas je seo-optimizacija. Da bi vaš sajt bio na prvoj stranici upiti za pretraživanje"Yandex" ili Google, potrebno je obaviti kolosalan posao na njegovom kreiranju i promociji.

Čemu služi semantičko označavanje?

Možete prilagoditi resurs za običnog korisnika koristeći trenutni i zanimljiv sadržaj. Ali da bi korisnik mogao pronaći ovaj resurs, potrebno je optimizirati stranicu za tražilicu. Kako uraditi?

Za razliku od osobe, on ne može prepoznati ono o čemu se raspravlja na stranici bez određenih napomena. On analizira sadržaj, otkriva određene obrasce, definiše ključne riječi, ali, nemajući ljudsku inteligenciju, ne može razumjeti značenje napisanog. Da bi pojednostavili njegov zadatak, programeri su osmislili semantičku ili mikro-oznaku za Yandex i Google. Baš kao što hipertekst govori mašini šta gde da postavi, semantičko označavanje objašnjava kome ili čemu se radi u resursu. Zahvaljujući ovakvom razumijevanju, stranica je bolje rangirana među konkurentima i ima veće šanse da dođe do prvih redova upita za pretraživanje.

Primjer semantičkog označavanja

Yandex i Google markup posebno je efikasan u promociji komercijalnih stranica koje nude robu i usluge. Sljedeći primjer će to najbolje objasniti.

Potrebno je kreirati mikropodatke za stranicu vizit karte za pružanje frizerskih usluga za pse. To će izgledati ovako:

Vrsta artikla - brijačnica,

Naziv - frizer za pse.

Prvi red određuje područje stranice, a drugi - određeni objekat. Stranica s takvom skriptom pojavit će se više na ljestvici pretraživanja nego slična bez nje, jer će je pretraživač smatrati relevantnijom za koncept „frizera za pse“, a ne samo „frizera“.

Mikro-oznaka kreirana uz pomoć Yandex.Webmastera omogućava vam da odredite mnoge parametre - prodajna mjesta, radno vrijeme, kontakte, brief ili usluge i još mnogo toga.

Gdje se koristi semantička oznaka?

Sve više resursa nastoji korisniku pružiti kvalitetno obrađeni materijal. Što će po značenju biti bliži željenom, to će više efikasnosti donijeti web lokaciji. Stoga se mikro-označavanje danas aktivno koristi:

  • Komercijalne stranice za promociju robe i usluga.
  • Online imenici i enciklopedije za formiranje višerazinskih veza između članaka.
  • Društvene mreže za detalje profila, događaja i drugog sadržaja.

Single Standard Schrema.org

Stvaranje semantičke oznake dovelo je do potrebe jedinstveni standard za sve pretraživače. Postali su mikro-markup "Yandex" i Google - schrema.org. Pojednostavljuje proces kreiranja kratkog opisa (isječka) koji vidimo kada se stranica prikaže u rezultatima pretraživanja. Ove informacije mogu uključivati važna informacija o stranici, što će pomoći korisniku da odluči da li da ode na ovu stranicu ili ne.

Inače, broj elemenata i rječnika u schremi je ogroman, tako da se može koristiti za stranice gotovo svih tema.

Otvorite Graph Standard

Pored pretrage Google sistemi i Yandex, mikro označavanje robe, usluga, multimedijalnog i informativnog sadržaja je također potrebno za društvene mreže. Za njih je Facebook osmislio singl Otvoreni standard graf. Ova oznaka vam omogućava da kontrolirate kako će stranica biti predstavljena novosti socijalna mreža. A danas da stvaram prelepi linkovi uz njegovu pomoć možete ne samo na Facebooku, već i na Google+, VKontakte, Twitter. Za prekrasan prikaz potonjeg, inače, koriste se i Twitter kartice.

Koje mikropodatke odabrati?

U stvari, prilikom rangiranja stranice, ni Yandex ni Google ne daju standardnu ​​veću prednost. Klasični slučaj upotrebe, schrema.org, je najkompletniji, najažurniji i koji se aktivno razvija.

Rječnici mikropodataka

Utvrdili smo šta je Yandex markup. Kako da se prikaže potrebne informacije? Za to se koristi koncept kao što je rečnik mikropodataka. To je skup elemenata, oznaka i sintakse koji nešto naglašava. pretraživač.

Svaki standard ima svoje rječnike i elemente. schema.org ima nekoliko ključne riječi područje sa svojom ogromnom hijerarhijom i tipovima prikaza. Na primjer, rječnik Thing vam omogućava da predstavite informacije u 3 glavna svojstva:

  • alternateName - za pseudonim (alias) objekta;
  • opis - za tekstualni opis objekt;
  • slika - za sliku ili link do nje.

Ili rječnik dobrih odnosa, koji će biti posebno koristan za platforme za online trgovanje. Omogućava vam da objavite podatke o cijenama, mjestima kupovine, dostupnosti itd.

Rječnik FOAF - mikro označavanje kontakata "Yandex" i Google. Ovo je upitnik koji ste ispunili milione puta na raznim stranicama - vaše ime, koordinate, stranica u na društvenim mrežama, mail, datum rođenja, itd. Ovo znanje će vam omogućiti da ubijedite korisnika da slijedi link, nudeći mu nešto što bi ga moglo zanimati. Na taj način stranica može povećati promet.

Za Detaljan opis audio i video informacije - izvođač, naslov albuma, trajanje - koristi oznaku VideoObject.

Tu je i oznaka za mail poruke, koji omogućava korisniku, bez odlaska na drugu stranicu, da pristane na sastanak ili ostavi komentar ispod članka, na primjer.

Šta je validator

Svaka promocija na Internetu zahtijeva temeljnu i dubinsku analizu efektivnosti. Možete provjeriti Yandex oznake pomoću validatora - softvera A koji prepoznaje metapodatke na web stranicama. Dokumenti bilo kojeg formata mogu se provjeriti na ispravnost - HTML, XHTML, RSS, XML, na bilo kojem jeziku.

Yandex mikropodatke provjerava bilo koji validator koji podržava Schema.org formate, HTML mikropodatke, Open Graph, RDF.

Kako provjeriti google markup

Saznajte kakav je vaš sajt Google pretraga moguće na nekoliko načina. Za napredni korisnik koji tečno govori skrivene postavke Google webmasteri, Rich Snippet Tool, dostupan samo putem linka, će poslužiti.

Drugi način je instalacija Seo dodatak by Yoast. Jednostavan je za korištenje i bit će dostupan nakon instalacije gornji panel webmaster.

Treći način je na web stranici Google Developers u traci s alatima, odaberite “Ostali resursi”, kliknite na dugme “Alat za provjeru strukturiranih podataka” i navedite html stranicaželite provjeriti. Kada robot izračuna datu skriptu, dobićete detaljan izveštaj sa greškama, ako ih ima, i objašnjenjima za njih.

Kako provjeriti Yandex oznake

Sa ovom tražilicom sve je nešto jednostavnije. Yandexov alat za provjeru označavanja nalazi se u alatima za webmastere, na kartici "Moje web stranice". Ovdje trebate kliknuti na dugme “Provjeri oznaku” i unijeti URL web-stranice, a validator će početi izračunavati greške. Nakon nekoliko minuta, dobit ćete jednu od tri opcije odgovora:

  • Mikromarkiranje nije pronađeno.
  • Ima grešaka.
  • Micromarking je u potpunosti usklađen sa standardom.

U kojim slučajevima se pojavljuju informacije o neispravnom označavanju?

"Yandex.Webmaster" - validator mikropodataka - prikazuje poruku o grešci u dvije situacije:

  • Kada ne prepoznaje oznake.
  • Kada mikropodaci ne zadovoljavaju standard.

U svakom slučaju, program će dati detalje greške, na osnovu kojih se može procijeniti koja Obavezna polja su izostavljeni u markupu ili koji je atribut izostavljen.

Također može dati poruku - "stranica se ne može učitati". Ukazuje na grešku servera ili nepostojeću stranicu.

Ako su "Yandex" mikropodaci napravljeni sa Nepoznata greška ili ne znate kako to popraviti, uvijek možete pitati Yandex.Webmaster za pomoć.

Nakon što je validacija završena, nova oznaka pojavit će se u roku od 2 sedmice.

Kako mikropodaci utiču na rangiranje web stranice?

Označili ste svoj resurs prema svim pravilima, a Yandexov validator markupa pokazao je da je sve urađeno bez grešaka. Za koliko bodova će se vaša stranica popeti na ljestvici pretraživanja?

Semantičko označavanje samo indirektno utiče na relevantnost, a nemoguće je navesti tačan broj pozicija na koje će podići sajt. Međutim, mikropodaci su jedan od ključni faktori utiče na pažnju korisnika. Zanimljiv i atraktivan isječak će voditi više posjetitelja, a pozicija stranice će rasti. Ostalo će ovisiti o punoći i relevantnosti resursa.

Prednosti mikropodataka

Osim vidljivosti resursa, mikro-označavanje značajno povećava težinu i kvalitetu stranice među konkurentima. Vrijedi istaknuti sledeće pogodnosti oznaka:

  • Povećava kredibilitet pretraživača, robot za pretragu lakše je istaknuti glavne elemente stranice, što znači da im postaje lakše da nas indeksiraju. Ako ovaj proces opišemo na vrlo pojednostavljen način, onda možemo reći da je pretraživač zadovoljan što mu otvaramo srce stranice, naše unutrašnje tajne i povećava se njegovo povjerenje u nas.
  • U očima potrošača, stranice sa isječcima izgledaju ne samo uočljivije, već i kvalitetnije. Shodno tome, na takve resurse se češće klika, što znači da se povećava CTR u SERP-u ili klikabilnost.
  • Vlasnik ima jedinstvena prilika prikazuju informacije koje će biti zapažene čak i ako korisnik nije otišao na stranicu.
  • Informacije o isječku se uvijek mogu promijeniti bez utjecaja na poziciju resursa na listi.

Ali, naravno, sa SEO promocijom, ne biste se trebali fokusirati samo na razvoj mikropodataka. Izuzetno je važno imati korisnu i jedinstveni sadržaj, ali ne samo. Mnogo je drugih faktora koji utiču na povećanje stranice u rangiranju pretraživača "Yandex" i Google.

Drugi načini promocije stranice

Interna promocija, koja uključuje Yandex i Google mikropodatke, ima nekoliko smjerova:

  • korištenje ključnih riječi u domeni i zaglavljima stranice;
  • prisutnost ključnih riječi na samoj stranici, njihova ujednačena distribucija u cijelom tekstu, lokacija u podnaslovima, oznake;
  • ispravna HTML oznaka bez grešaka (provjereno pomoću Yandex Webmaster alata);
  • prisutnost mega tagova (ključne riječi, opis itd.) koji pretraživaču ukazuju na suštinu stranice;
  • ponovno povezivanje - tj. linkovi na druge stranice stranice;
  • jednostavna struktura web stranice koja vam omogućava da jednim klikom dođete do glavne stranice;
  • nezaboravan i razumljiv dizajn;
  • rad sa društvenim mrežama, mogućnost da drugima preporučite informacije koje vam se sviđaju;
  • prisustvo mape lokacije;
  • jedinstven, zanimljiv i redovno ažuriran sadržaj koji je koristan i relevantan za čitaoca;
  • optimiziran CMS za brzo učitavanje stranica bez grešaka.

Pored interne promocije, treba raditi i sa vanjski faktori. Web programer treba redovno da prati da li se linkovi ka sajtu prikazuju na drugim resursima, koliko je ta masa linkova teška i autoritativna (ovaj proces se određuje tematskim i ponderisanim). reklamni baneri resurs.

Prema najnovijim studijama, jedan od naj efikasne načine promocija je diskusija ili spominjanje stranice na društvenim mrežama. Pretraživač vidi aktivno kretanje ovih informacija i percipira ih kao relevantne i tražene, čime se povećava rejting resursa.

Za internet prodavnice je efikasno koristiti komentare i recenzije kupaca, kako na samom sajtu, tako i na tematskim forumima, portalima sa recenzijama itd.

Umjesto zaključka

Online promocija je složen višestruki proces koji zahtijeva intenzivan rad na različitim vanjskim i unutrašnjim faktorima. Ne može se reći da je bilo koja od gore navedenih metoda apsolutno ispravna, a on je taj koji će vašu stranicu dovesti na vrh. Nađite se gornje linije upiti za pretraživanje mogući su samo uz kompleksan rad na svim aspektima seo promocija, posebno, veliku ulogu treba dati mikro-oznakama.

Vrlo je važno prenijeti pretraživaču da na sve načine pokušavate pojednostaviti njegov odabir i to ne samo radi visoki rang, ali i zbog pogodnosti korisnika, tačnije, u prvom redu kako bi osoba ove informacije pronašla na mreži.

Yandex i Google su direktno zainteresirani za primanje korisnika potrebne informacije, što znači da što je vaš resurs lojalniji, veće su mu šanse da zauzme mjesto u vrhu.

Nije važno kakvu marku koristite - OpenGraph, schrema.org ili neku drugu, glavno je da se izvršava bez grešaka i naglašavanja ključne točke stranice resursa. Provjeravajte ga redovno s validatorom, trošite duboko skeniranje svaki aspekt Vaše aktivnosti, a onda Vas očekuju odlični rezultati!

Niz sadrži nizove - elemente liste. Oznaka se postavlja na samu HTML stranicu.
    , da biste dodali elemente na listu, morate:
    1. programski kreirati element< li >;
    2. dodaj u kreirano HTML element- šifra sadržaja;
    3. dodati element na listu.

    Programski će izgledati ovako:

    var list = document.getElementById("list"); za (var i = 0; i< items.length; i++) { var listItem = document.createElement("li"); listItem.innerHTML = items[i]; list.appendChild(listItem); }

    Dakle, kada se funkcija pozove, sadržaj liste sa id="list" će biti generisan.

    Formiranje grupe linkova je malo teže, jer pored teksta veze postoji i element mora sadržavati adresu za skok. Da bismo to učinili, potreban nam je niz sljedećeg oblika:

    var links = ; linkovi = (ime: "prvi", href: "document1.html"); linkovi = (ime: "drugi", href: "document2.html"); linkovi = (ime: "treći", href: "document3.html"); linkovi = (ime: "četvrti", href: "document4.html");

    Kontejner definiran na HTML stranici

    . Redoslijed dodavanja veze u kontejner izgleda ovako:

    1. programsko kreiranje elementa ;
    2. postavljanje teksta linka;
    3. postavljanje vrijednosti atributa href;
    4. dodavanje veze u kontejner.

    Sljedeći kod ilustruje implementacija softvera navedeni slijed radnji:

    var nav = document.getElementById("navigacija"); for(var j = 0; j

    Naravno, sadržaj možete generirati ne samo na osnovu nizova, u sklopu naknadnih praktičnih vježbi razmotrit ćemo primjer generiranja sadržaja različitih elemenata na osnovu korištenja skladišta podataka.

    Semantička oznaka

    Za početak, potrebno je reći nekoliko riječi o semantici općenito. Nažalost, u okviru ovog kursa ne možemo priuštiti detaljan opis ove oblasti znanja, pa ćemo se pokušati fokusirati samo na ključne tačke.

    Semantika, kao naučna disciplina, proučava značenje jedinica jezika. U IT-u, semantika se odnosi na formalizaciju konstrukcija programskog jezika.

    Pokušajmo shvatiti što to znači već u kontekstu HTML-a i web razvoja.

    Spomenuli smo da se većina web stranica kreira prema određenom šablonu: zaglavlje stranice, traka za navigaciju, blok glavnog sadržaja itd.

    HTML5 pruža niz oznaka koje vam omogućavaju da eksplicitno naznačite da ovaj ili onaj sadržaj pripada određenom dijelu web stranice, ili naznačite kakav je sadržaj (citat, vrijeme i datum, itd.).

    Očigledno, "potrošači" takve oznake nisu korisnici stranice, jer ne vide oznake. Suština semantičkog označavanja je pojednostavljenje mašinske obrade sadržaja stranice, na primjer, za bolje "razumijevanje" stranice roboti za pretragu.

    Uz ono što je već rečeno, mogu se izdvojiti sljedeće prednosti semantičkog označavanja:

    • Povećana dostupnost, kao stranice web stranice neće izgubiti svoju strukturu čak ni sa onemogućenim ili nepodržanim CSS-om.
    • Sadržaj stranica stranice bit će razumljiv ljudima koji čitaju stranicu koristeći posebne čitače ekrana.
    • Semantičko označavanje ima pozitivan uticaj na tražilice, jer njihovim robotima nije teško indeksirati stranice i odrediti pravo značenje pojedinih fragmenata teksta.
    • Značajno pojednostavljuje dalju podršku slično dizajniranog sajta, smanjuje troškove redizajna.
    • Smanjena je težina stranica stranice, povećana je čitljivost koda web mjesta zbog njegove kompaktnosti, povećana je brzina učitavanja stranica stranice.

    Tako se HTML oznake mogu podijeliti na semantičke i prezentacijske.

    Semantičke oznake su bilo koje oznake koje ukazuju na suštinu njihovog sadržaja. Evo liste najčešćih semantičkih oznaka:

    Tabela 14.1.
    Tag Opis
    a dizajniran za kreiranje veze ili sidra
    skr označava da je sadržaj oznake skraćenica
    akronim označava da je sadržaj oznake akronim
    adresa sadrži podatke o autoru
    području nanosi se unutar kontejnera< mapa > da kreirate slikovnu mapu. Definira parametre aktivnih zona-linkova na karti
    baza označava punu bazna adresa dokument. Koristi se za kompajliranje relativne adrese i da odredite ciljni prozor svih veza stranica
    bdo postavlja smjer izlaza teksta (zdesna na lijevo, slijeva nadesno)
    blok citat ističe citat (obično dugačak). Prikazuje se sa povećanim uvlačenjem
    tijelo definira granice tijela dokumenta. Unutar oznake nalaze se svi elementi odgovorni za sadržaj HTML stranice.
    dugme kreira dugme na obrascu
    natpis kreira zaglavlje tabele. Prikazuje se iznad stola izvan okvira. Element tabele
    citat koristi se za označavanje izvora citata ili njegovog autora. Obično se piše kurzivom
    kod
    col omogućava postavljanje opšta svojstva za cijelu kolonu tabele odjednom
    col group omogućava vam da postavite zajednička svojstva za nekoliko kolona tabele odjednom
    dd
    i
    . Određuje definiciju pojma
    del označava tekst kao izbrisan. Može se pojaviti kao mala slova ili kao blok element zavisno od konteksta
    dfn ističe pojam u tekstu
    div dodjeljuje logički blok. Jedan od glavnih elemenata rasporeda blokova
    dl koristi se prilikom kreiranja liste definicija zajedno sa
    i
    dt koristi se prilikom kreiranja liste definicija zajedno sa
    i
    em koristi se za naglašavanje
    fieldset dizajnirano da grupiše elemente forme
    formu kreira obrazac na stranici. Obrazac se koristi za razmjenu podataka između korisnika i servera
    h1, h2, h3, h4, h5, h6 koristi se za kreiranje zaglavlja
    glava naslov dokumenta, sadrži informacije o trenutnom dokumentu
    html kontejner tag koji sadrži sav sadržaj stranice, osim za doctype, koji se mora postaviti prije oznake
    img dodaje sliku na stranicu
    unos omogućava kreiranje elemenata interfejsa: dugmadi, tekstualna polja, radio dugmad i potvrdni okviri. Glavni način dobijanja informacija od korisnika (čitača) zasniva se na ovoj oznaci
    ins označava tekst koji je dodan nova verzija dokument. Može djelovati kao inline ili blok element ovisno o kontekstu
    kbd označava tekst upisan na tastaturi ili prečice na tastaturi
    etiketa omogućava vam da povežete element interfejsa na obrascu sa tekstualnim natpisom i postavite prečice
    legenda definira naslov za elemente obrasca grupisane u tag kontejner
    li kreira stavku liste
    veza povezuje sa eksterna dokumenta, najčešće sa stilovima
    mapa kontejner tag za kreiranje mape slike
    meta sadrži metapodatke - tehnički opis dokument kao parovi ime-vrijednost. Koristi se za identifikaciju svojstava dokumenta (npr. autora, datum završetka upotrebe, lista ključnih riječi, itd.) i postavljanje vrijednosti ovih svojstava
    noscript sadrži tekst koji prikazuje pretraživač
    objekt koristi se za ugrađivanje različitih objekata na stranicu (obično medijske datoteke)
    ol kreira numerisanu listu
    optgroup tag kontejner za oznake
    opcija postavlja poseban string liste u oznaci
    str dizajniran za kreiranje pasusa
    pre definira unaprijed formatirani dio teksta. Prikazuje se s obzirom na sve razmake i nove redove
    q ističe citat u tekstu
    samp označava tekst kao programski kod ili formulu
    script dodaje skriptu na stranicu
    izaberite kreira selektor vrijednosti
    raspon koristi se prvenstveno za stiliziranje i/ili dodjelu jedinstvenog identifikatora ( id ) određenom dijelu teksta
    jaka logično ističe, poboljšava tekst.
    stil postavlja stilski list
    sto definiše tabelu
    tijelo koristi se za grupisanje redova za postavljanje općeg oblikovanja
    td postavlja ćeliju tabele
    textarea definira višelinijsko polje za unos.
    stopalo koristi se za definiranje reda koji će biti prikazan na dnu tabele
    th definira ćeliju zaglavlja tablice
    thead koristi se za definiranje reda(ova) koji će se prikazati na vrhu tabele
    naslov definiše naslov dokumenta
    tr definiše red tabele
    ul kreira listu sa nabrajanjem
    var označava ime varijable

    Dali smo nepotpune

Top Related Articles