Szakdolgozat. Responsive webáruház elkészítése. Készítette: Szakos Péter. Gazdaságinformatikus Bsc. Témavezető: Krizsán Zoltán egyetemi tanársegéd

Szakdolgozat Responsive webáruház elkészítése Készítette: Szakos Péter Gazdaságinformatikus Bsc

Témavezető: Krizsán Zoltán egyetemi tanársegéd Konzulens: Dr. Házy Attila egyetemi docens

Miskolci Egyetem 2013

Tartalom 1

Bevezető........................................................................................................................ 1

2

A webáruházakról ......................................................................................................... 3 2.1

Mi az a webáruház? ................................................................................................ 3

2.2

Webáruház követelményei ...................................................................................... 3

2.2.1

Jogi követelmények ......................................................................................... 3

2.2.2

Tájékoztatási kötelezettségek .......................................................................... 4

2.3 3

4

Responsive webdesign .................................................................................................. 9 3.1

A responsive design bemutatása ........................................................................... 10

3.2

A responsive design előnyei ................................................................................. 10

3.3

Szükséges technológiák ........................................................................................ 11

3.3.1

HTML5 .......................................................................................................... 12

3.3.2

CSS3 .............................................................................................................. 13

Keresőoptimalizálás .................................................................................................... 17 4.1

Onsite SEO ........................................................................................................... 17

4.1.1

Title elem ....................................................................................................... 17

4.1.2

Meta Description elem................................................................................... 18

4.1.3

Címsorok ....................................................................................................... 18

4.1.4

Keresőbarát URL ........................................................................................... 19

4.2 5

E-kereskedelmi trendek Magyarországon............................................................... 6

Keresőoptimalizálhatóság megvalósítása ............................................................. 20

A webáruház alkalmazás elkészítése .......................................................................... 22 I

5.1

Általános követelmények ...................................................................................... 22

5.2

Funkció specifikáció ............................................................................................. 24

5.2.1 5.3

Adatok tárolása ..................................................................................................... 28

5.3.1

ER modell ...................................................................................................... 28

5.3.2

Relációs modell ............................................................................................. 29

5.4

Osztályok tervezése .............................................................................................. 30

5.5

Kérések kiszolgálása ............................................................................................. 40

5.6

Keresőoptimalizálás megvalósítása ...................................................................... 42

5.6.1

Dedikált oldalak ............................................................................................. 42

5.6.2

Kategória oldalak ........................................................................................... 45

5.6.3

Egyéb terméklista oldalak ............................................................................. 46

5.6.4

Terméklapok .................................................................................................. 47

5.7

Responsive felhasználói felület............................................................................. 49

5.7.1 5.8 6

Használati eset diagram ................................................................................. 24

Terméklista oldalak ....................................................................................... 54

Cél teljesítése és továbbfejlesztési lehetőségek .................................................... 57

Összegzés .................................................................................................................... 59

Summary.............................................................................................................................. 60 Irodalomjegyzék .................................................................................................................. 61 Melléklet .............................................................................................................................. 62

II

Ábrajegyzék 1. ábra: Forgalomváltozás a magyar webáruházaknál az előző évhez képest ....................... 6 2. ábra: A webáruházak forgalomnövekedésének nagysága a fejlesztések függvényében ... 7 3. ábra: Magyarországon használt webáruház-rendszerek .................................................... 7 4. ábra: Magyar webáruházak mobilra való optimalizáltsága ............................................... 8 5. ábra: Aktorok ................................................................................................................... 24 6. ábra: Dedikált oldalak beállításai az Admin felületen ..................................................... 43 7. ábra: Termékfeltöltés az Admin felületen ....................................................................... 48 8. ábra: Felhasználói felület elrendezésének vázlata ........................................................... 51 9. ábra: Elkészült webáruház kezdőoldala 1 ........................................................................ 52 10. ábra: Elkészült webáruház kezdőoldala 2 ...................................................................... 53 11. ábra: Elkészült webáruház kezdő oldala mobilon nézve ............................................... 53 12. ábra: Terméklista oldal kinézete monitoron és mobilon ............................................... 56 13. ábra: Use Case diagram 1 .............................................................................................. 62 14. ábra: Use Case diagram 2 .............................................................................................. 63 15. ábra: ER modell ............................................................................................................. 64 16. ábra: Relációs modell .................................................................................................... 65

III

1 Bevezető Informatikai tanulmányaimon belül mindig is a webes alkalmazások készítése volt az a témakör, ami legjobban érdekelt, és amivel a legtöbbet foglalkoztam. Már több éve foglalkozom weboldalak készítésével hobbi szinten, és jelenleg is több saját honlapot üzemeltetek. Ezen érdeklődésemből kifolyólag nem volt kétséges, hogy mindenképpen ebben a témakörben szeretnék szakdolgozatot írni. Mivel egy egyszerű weboldal elkészítése nem jelent elegendő kihívást, ezért mindenképpen egy komolyabb és összetettebb webes alkalmazás elkészítését tűztem ki célul. Több ötlet közül végül egy komplett webáruház motor elkészítését választottam feladatnak, mivel már régóta szeretnék egy komoly, működő webshopot csinálni. Már nagyon sok ilyen program létezik, és van köztük jó néhány ingyenes rendszer is, de mégsem volt köztük olyan, ami maradéktalanul kielégítené azokat az igényeket, amiket támasztottam, így mindenképpen egy teljesen új, saját rendszer elkészítésébe fogtam bele. A legfontosabb követelményeim egyike, amit a legtöbb korábbi rendszer még nem támogat, az a mobil eszközökön való megfelelő megjelenés. A legtöbb oldalnál ezt úgy oldják meg utólag, hogy csinálnak egy mobil verziójú, külön weblapot, és erre irányítják a felhasználót, ha mobil eszközről böngésznek. Ez azonban sok szempontból nem szerencsés, amit majd ki is fejtek bővebben a szakdolgozat későbbi részében. A másik fontos követelmény, amit mindenképpen tudnia kell az alkalmazásnak, az a keresőbarát kialakítás. Minden webáruház sikere azon múlik, hogy lesz-e megfelelő számú látogatója, és ehhez elengedhetetlen az internetes keresőkben való jó szereplés. Az elkészített alkalmazás egy általános célú kiskereskedelmi webáruház, ami kis módosításokkal szinte bármilyen kisebb boltnak, üzletnek megfelelő lehet az internetes megjelenésre. Egy működő példa webshopot is készítettem, ami egy régiségboltként működik, és a RégiségOnline fantázianevet viseli. A következő, azaz második fejezetben, általánosságban fogok írni a webáruházakról. Itt leírom, hogy mik is azok webshopok, milyen jogi és egyéb követelményeknek kell

1

megfelelniük, illetve ismertetem azokat a jelenlegi magyarországi e-kereskedelmi trendeket, amik hatással lehetnek az elkészített alkalmazásra. A harmadik fejezet a responsive webdesignról fog szólni, mivel ez az egyik fő különlegessége az alkalmazásomnak. Leírom, hogy hol foglal helyet a responsive webdesign a mobil eszközökre való optimalizálási lehetőségek között, illetve hogy hogyan működik, és milyen technológiák szükségesek hozzá. A negyedik fejezetben a keresőoptimalizálási alapelveket fogom ismertetni, mivel ezeknek az ismerete elengedhetetlenül szükséges egy keresőbarát weboldal létrehozásához és működésének megértéséhez. Az ötödik fejezet már konkrétan az elkészített webáruházról fog szólni. Először ismertetem az általam támasztott általános követelményeket, majd specifikálom a webshop funkcióit és felépítését. Mivel a kész alkalmazás igen bonyolult és szerteágazó funkciókkal rendelkezik, ezért csak néhány kiragadott részt fogok részletesebben is ismertetni, így a keresőoptimalizált felépítésről és a responsive felület megvalósításáról lesz részletes beszámoló. Az utolsó, azaz hatodik fejezet lesz az összefoglaló, ahol leírom, hogy milyen tapasztalatokat szereztem a szakdolgozat és az alkalmazás elkészítése során.

2

2 A webáruházakról Egy webáruház elkészítéséhez elengedhetetlen, hogy először tisztázzuk a webáruházak fogalmát és leggyakoribb jellemzőit. Ezen kívül figyelembe kell még venni, hogy milyen követelmények vannak Magyarországon egy webshoppal szemben, valamint érdemes megemlíteni a magyar internetes kereskedelem jelenlegi helyzetét is.

2.1 Mi az a webáruház? A webáruház, vagy más néven webshop, egy olyan weboldal, aminek legfőbb célja egy termék vagy szolgáltatás értékesítése, vagyis az online kereskedelem. Szerepelni kell tehát egy ilyen weboldalon értékesíteni kíván áruknak, amikről lehetőleg minél több információ megjelenik. Ezen kívül pedig kell, hogy legyen vásárlási lehetőség, ami a leggyakrabban online bevásárlókosárral történik. Ebbe a kosárba a látogatók virtuálisan pakolhatnak termékeket, majd ezután a virtuális pénztárnál befejezhetik a vásárlást.

2.2 Webáruház követelményei Egy webshop üzemeltetési, működési szempontból nagyon sok jogi és fogyasztóvédelmi követelménynek meg kell, hogy feleljen, és ezeket kivonatosan ismertetni is fogom.

2.2.1 Jogi követelmények Egy webáruház üzemeltetéséhez mindenképpen szükséges valamilyen vállalkozási forma megléte. Ez lehet egyéni vállalkozás, betéti társaság, korlátolt felelősségű társaság stb. Ezen kívül fontos a termék vagy szolgáltatás értékesítéséhez szükséges tevékenységi körök megléte (például: „4791 - Csomagküldő, internetes kiskereskedelem” tevékenységi kör). Speciális termék esetén pedig még külön szakhatósági engedélyre is szükséges lehet. Fontos változás a korábbi jogszabályokhoz képest, hogy 2008. március 31-től csomagküldő kereskedelem esetén nem szükséges üzletet, vagy vevőszolgálati helyiséget fenntartani. Ettől azonban csak akkor lehet eltekinteni, ha a vevőnek nem személyesen kell átvennie a megrendelt terméket.

3

Az előzőeken kívül pedig „a kereskedelemről szóló 2005. évi CLXIV. törvény 2009 júniusában módosított és 2009. október 1-jétől hatályos 3. § (1) bekezdése szerint köteles a webáruház tulajdonos kereskedelmi tevékenységét bejelenteni a székhelye szerinti jegyzőnél” és ez a bejelentés illetékköteles. A jogi követelmények leírása az [1] hivatkozás alapján történt, ahol részletesebb információk is megtalálhatók.

2.2.2 Tájékoztatási kötelezettségek Egy webáruháznak meg kell felelni különböző tájékoztatási kötelességeknek és ezt a hatóságok próbavásárlások során ellenőrzik is. Amennyiben hibát találnak, a törvényben előírtak szerint járnak-e el. A következő adatokat mindenképpen meg kell jeleníteni a webáruházunkban: 1. A cég, vagy cégszerű elnevezésünk, 2. Adószámunk, Cégjegyzékszámunk és a kibocsátó cégbíróság megnevezése (vállalkozás esetén vállalkozói igazolvány számunk, és a kibocsátó okmányiroda megnevezése), 3. Elektronikus elérhetőségünk (pl.: e-mail címünk), 4. Telefonszámunk (amin elérhetőek is vagyunk!), 5. Engedélyhez kötött termék, vagy szolgáltatás értékesítése esetén annak meglétének igazolása, nyilvántartási szám feltüntetése, 6. Továbbá még szükséges megjelenítenünk az oldalunkon a kapcsolattartó személy nevét, 7. A szerződésünk nyelvét (még akkor is, ha magyar), 8. A megkötött szerződésünk írásban kötöttnek minősül-e, iktatják-e, illetve az a későbbiekben visszakereshető-e? 9. A szerződésünk utal-e valamely magatartási kódexre, ha nem akkor is közölnünk kell a vásárlóval! Vásárlóknak kötelezően biztosítandó további információk: 1. A termékkínálatunk meghatározása: azaz milyen termékeket / szolgáltatásokat kínál a webáruházunk, 2. Rendelési

információk:

amelyben

ismertetésre

kerül,

hogy

a

vásárlás

regisztrációhoz kötött-e vagy sem, továbbá mikor történik a megrendelések 4

feldolgozása, visszaigazolása, teljesítése (Jó tanács: nem árt tájékoztatni a vásárlókat, hogy a megjelenített termékképek csak illusztrációként szerepelnek, és eltérhetnek a valóságtól!), 3. A teljes „általános szerződés feltételek” dokumentumot letölthetővé kell tenni a vásárló számára (ugyanakkor tartalmaznia kell a visszaigazoló levélnek melyet elektronikus formában küld a webáruház rendszer a vásárló részére), 4. Adatkezelési információk, melyben tájékoztatva van a webáruházunk felhasználója, és vásárlója az adatai kezelésének módjáról, tárolásának időtartamáról, továbbá az adatok törlésének / töröltetésének lehetőségéről, 5. Rendelés menetének ismertetése: azaz milyen lépéseket kell tennie a vásárlónknak a termékek megrendeléséhez, 6. A megrendelt termék(ek) / szolgáltatás(ok) kifizetésének, ismertetése: azaz a házhoz szállítás díja és információk a kézbesítésről, csomagolásról, stb. 7. Garanciális feltételek: avagy mi a teendő, ha a megrendelt termék esetlegesen hibás, stb. A hibásan leadott, vagy teljesített megrendelések alkalmával szükséges teendők, korrigálási lehetőségek, 8. Az „elállás jogának” ismertetése: a 17/1999. (II. 5.) Korm. rendelet a távollevők között kötött szerződésekről szóló törvény alapján. (Jó tanács: Az sem baj ha a törvény teljes egészében elérhetővé tesszük, továbbá a vásárlóknak „hétköznapi nyelvre” átfogalmazva is megjelenítjük a törvény tartalmát az oldalunkon) 9. Végül, de nem utolsó sorban az elállás jogának gyakorlása esetén az ügyintézés menetének ismertetése: azaz milyen formában kell jeleznie a vásárlónak az elállási szándékát (pl.: írásban, stb.). Termékekkel kapcsolatos kötelező információk, amiket meg kell jelenítenünk: 1. A termék(ek) neve(i), 2. A termék(ek) ismertetője magyar nyelven, 3. Jó minőségű termék fotó(k) 4. Akciós ár megjelenítése esetén, az akció időtartamának megjelölése (kezdete, vége). A különböző tájékoztatási kötelezettségek felsorolása az [1] és [2] hivatkozások alapján történt, ahol bővebben is lehet olvasni témáról.

5

Az előzőekben ismertetett jogszabályok és kötelezettségek ismeretében kell kialakítani a webáruház motort, hogy az megfelelhessen minden követelménynek.

2.3 E-kereskedelmi trendek Magyarországon A kedvezőtlen gazdasági körülmények ellenére is folyamatosan nő a csomagküldéssel és internetes kereskedelemmel foglalkozó cégek száma és az összesített éves árbevételük is. A növekedés ütemét mi sem mutatja jobban, mint az, hogy 2007-ben még csak kicsit több mint 900 cég jelölte meg főtevékenységként a csomagküldő internetes kereskedelmet, 2012-ben ez a szám viszont már meghaladta a 2900-at. Szintén nagy növekedés figyelhető meg akkor is, ha azt nézzük, hogy 2007-ben az e-kereskedelemmel foglalkozó cégek összesen 25 milliárd forint bevételt produkáltak, és ez a szám 2011-ben elérte a 72 milliárd forintot. [3] A Webshop Experts 2013-as felmérése [4] szerint a webáruházak több mint 60%-ának nőtt a forgalma 2012-ben az előző évhez képest, és nagyjából 30%-nál stagnált ez az érték. Részletesebb adatok láthatók az 1. ábrán.

1. ábra: Forgalomváltozás a magyar webáruházaknál az előző évhez képest [4]

6

Az eredmények arra is rámutatnak, hogy a webáruházakon történő fejlesztés mértéke kapcsolatba hozható a forgalom növekedésével. Ahol komolyabb változásokat, újításokat vezettek be, ott nagyobb növekedés volt tapasztalható, ahogyan az a 2. ábrán is látható.

2. ábra: A webáruházak forgalomnövekedésének nagysága a fejlesztések függvényében [4]

Az is érdekes kérdés, hogy a Magyarországon üzemelő webáruházak milyen rendszert használnak. A 3. ábrán látható, hogy a legtöbben bérelhető megoldásokkal élnek (41%), második helyen pedig az egyedi fejlesztésű webáruházak állnak 26%-kal.

3. ábra: Magyarországon használt webáruház-rendszerek [4]

7

Fontos téma még a webáruházak mobil eszközökre való optimalizáltsága, amire az eNET és az Árukereső.hu közös 2012-as felméréséből [5] kapunk választ. Ez alapján kiderül, hogy a felmérésben résztvevő magyar webáruházak 20-25%-a rendelkezik mobilra optimalizált oldallal, de a legtöbben 2013-ra tervezik ennek a bevezetését. Az is kiderül, hogy minél nagyobb egy oldal látogatottsága, annál nagyobb a hajlandóság a mobil eszközökre való optimalizálásra. Részletesebb adatokat mutat erről a 4. ábra:

4. ábra: Magyar webáruházak mobilra való optimalizáltsága [5]

8

3 Responsive webdesign Néhány éve még elhanyagolható volt a mobil eszközökről internetezők száma, most azonban már feltétlenül számolnunk kell velük. A StatCounter nemzetközi kutató cég adatai [6] szerint 2013-ban a teljes internetforgalom 16%-át a mobilról érkező forgalom tette ki. 2012-ben ez a szám még csak 11% volt, ami jól mutatja, hogy nagymértékű a növekedés. A kutatásban egyébként mobil alatt csak a zsebben hordható mérettel rendelkező telefonokat értik, és nem az összes mobil eszközt, azaz a táblagépeket a másik kategóriába sorolták. Egyre nagyobb szerepet kapnak tehát a mobil eszközök, ami azt jelenti, hogy a mobiltelefonokról és táblagépekről érkező látogatókat nem szabad figyelmen kívül hagyni. Gondolni kell arra, hogy a kisebb képernyőméreteken hogyan fog kinézni a weboldalunk, mennyire lesz az jól olvasható és használható. A mobil eszközökön való megfelelő megjelenést alapvetően kétféle módon lehet megoldani. Az egyik módszer az, ha a normál weboldalunk mellett csinálunk egy mobilra optimalizált oldalt is, és ha a rendszer azt érzékeli, hogy mobilról böngészik az oldalt, akkor automatikusan átirányít az ennek megfelelő változatra. Ez azonban több szempontból sem szerencsés. Először is megnehezíti a keresőoptimalizálást, mivel így más lesz az URL-cím és külön kell optimalizálni a mobil verziót is. A második nagy probléma ezekkel az weblapokkal kapcsolatban, hogy túlságosan leegyszerűsítik a mobil oldalt, és sok olyan funkció nem lesz elérhető, amit már a weblap normál verziójánál megszoktunk. A fenti problémák miatt döntöttem úgy, hogy a legújabb trendeket követve a másik módszerét választom a mobil eszközökre való optimalizálásnak, és egy responsive designnal ellátott webshopot készítek. Ez azt jelenti, hogy ugyanaz a weblap jelenik meg asztali gépeken és mobil eszközökön is, csak az elrendezés igazodik a képernyőmérethez. A responsive webdesign-nak megvan az az előnye, hogy a tartalom általában nem változik, és a funkciók hiánytalanul megmaradnak, így nem fogja azt érezni a felhasználó, hogy egy lebutított honlapon jár, csak azt veszi észre, hogy mennyire kézre áll az elrendezés.

9

3.1 A responsive design bemutatása A responsive webdesign azt jelenti, hogy van egy adott tartalma az oldalnak, amihez külön stíluslapokat

illetve

stílusbejegyzéseket

rendelünk,

és

ezek

különböző

képernyőfelbontásokhoz igazodó elrendezéseket hoznak létre. Ennek segítségével tehát nem kell külön weboldalakat fejleszteni mobilra vagy tabletre, mert a tartalom előre megírt módon igazodik a különböző felbontású készülékekhez, és így az mindig jól áttekinthető és olvasható marad. [7] A technika már 2010 óta jelen van, és azóta is terjed, de még mindig nagyon kevesen használják. Sokan vannak, akik nem igazán tartják előnyösnek ezt a megoldást, de azért a legtöbben, akik ismerik ezt a technológiát, pozitív véleménnyel vannak róla és elismerik, hogy nagyon sok előnnyel jár a használata.

3.2 A responsive design előnyei Az egyik legjelentősebb előnye a responsive webdesign-nak a költséghatékonyság. Több különálló oldal esetén több oldalt kell karban tartani, és a kifejlesztés is több energiát és pénzt emészt fel. Igaz, hogy egy responsive oldal kifejlesztése némileg többe kerül, mint egy átlagos weblapé, viszont ha külön készítünk mobilra optimalizált verziót is a honlapunknak, akkor már jelentősen olcsóbb egy responsive oldal. A költségeken túl, azt is be kell látnunk, hogy lehetetlen az összes készülékre külön weboldalt készíteni. Nagyon sokféle mobil eszköz van és nagyon különböző felbontással rendelkezhetnek. Számolni kell a mobiltelefonokkal, a tabletekkel, elterjedőben vannak az okostévék, illetve ott vannak az asztali számítógépek. A responsive webdesignban akár az összes képernyőfelbontáshoz is külön elrendezést hozhatunk létre anélkül, hogy külön weboldalakat kellene készítenünk. A gyakorlatban azonban 3-5 különböző elrendezést szoktak megtervezni, és mindig az adott eszközhöz legjobban illeszkedő jelenik meg, a képernyőfelbontásnak megfelelően. A responsive webdesign előnyihez sorolható az az alapvető tervezési szempont is, hogy a tartalom jól elkülönül a megjelenéstől, és így bármilyen eszközről is nézzük a weboldalt, a tartalom nem változik, csak a megjelenés.

10

Az, hogy a tartalom állandó, és csak a megjelenés változik, nem csak tervezési szempontból, hanem a felhasználók szempontjából is előnyös. Gyakran esnek abba a hibába a mobil változatot kifejlesztő személyek, hogy lebutítják a tartalmat. Ezt a legtöbb felhasználó nem szereti, sőt, egyenesen idegesíti őket és kényelmetlenül érzik magukat a weboldalon, mivel nem tudják az összes, jól megszokott funkciót igénybe venni, vagy a kívánt tartalmat elérni. Ez jobb esetben csak oda vezet, hogy átváltanak mobil eszközön is a desktop verzióra, rosszabb esetben elnavigálnak az oldalról és esetleg pont a konkurenciánál kötnek ki. Ha az első eset következik be, akkor az azt jelenti, hogy feleslegesen költöttünk rengeteg pénzt a mobil verzió kifejlesztésére. A második esetnél pedig értelemszerűen bevételkiesés, illetve adott esetben fontos ügyfelek elvesztése is bekövetkezhet. Ezért is előnyös tehát a responsive weboldal, mivel itt ugyanazokat a funkciókat és tartalmakat érheti el a felhasználó, csak egy olyan elrendezésben, ami kényelmesebben olvasható és áttekinthető az adott eszközön. Utolsó, de nagyon fontos előnyként szeretném megemlíteni a keresőoptimalizálást. A Google és a Microsoft (Bing) is hivatalosan jelezte, hogy az egy és közös URL-t ajánlják, szemben a külön mobilokra létrehozott aldomaines és egyéb megoldásokkal (pl. m.domain.hu). Ezen kívül a Google külön elérhetővé tett olyan segédanyagokat, amik a responsive weboldal megvalósításában nyújtanak segítséget. Nem kérdés tehát, hogy mindenképpen helye van a webfejlesztésben a responsive webdesignnak, és egyre jobban terjed majd az elkövetkezendő években, követve a mobil eszközök térnyerését és fejlődését.

3.3 Szükséges technológiák A responsive weboldalak elődjének tekinthetők a fluid, azaz változó szélességű oldalak. Ezek úgy működnek, hogy az elemek szélességét százalékosan adjuk meg, és így ez igazodik a képernyőhöz. Ezt lehet kombinálni a max-width és min-width CSS attribútumokkal, amivel megadhatjuk, hogy mi az a maximális és minimális szélesség, amit az adott elem felvehet. Amíg a fluid weboldalaknál korábbi technológiák is használhatóak voltak, addig a valódi responsive webdesign megvalósításához már mindenképpen HTML5 és CSS3 technológiák szükségesek.

11

3.3.1 HTML5 A HTML5 korábbi verziója a HTML4.01, ami még 1999-ben jelent meg. Könnyen belátható, hogy ez már nagyon elavult, mivel azóta rengeteg változás és fejlődés ment végbe az internet világában. A HTML5 fejlesztése még most is folyamatban van, de már használható, és sok böngésző támogatja. Az új szabványban elhagytak néhány elemet a korábbiakból. Ilyenek például a és a elemek. Ezeket most már mindenképpen CSS kóddal kell megvalósítani. Rengeteg újítás került bele a HTML5-be. Ilyenek az újonnan megjelent tartalom specifikus elemek, mint például az <article>, a