Nini kipya katika HTML5? Tayari yuko hapa

HTML5 - kizazi kipya. Zaidi ya miaka 10 imepita tangu kutolewa kwa pendekezo la HTML 4.01 (1999), na kwa hiyo mabadiliko mengi na nyongeza zinapaswa kutarajiwa. Vipimo vya HTML5 bado vinatengenezwa kwa sasa. Muungano wa Mtandao Wote wa Ulimwenguni hauendelezi viwango, lakini hutoa mapendekezo pekee. Yote huanza na majadiliano ya kazi, kisha rasimu ya kufanya kazi inaanzishwa, kisha mgombea wa jukumu la mapendekezo hutolewa, na kisha tu vipimo hatimaye hupokea hali ya pendekezo. Hivi sasa, kazi kwenye HTML5 bado iko katika hatua ya rasimu ya kufanya kazi. Licha ya hili, vivinjari vingi maarufu vya mtandao tayari vinaunga mkono kwa kiasi ubunifu wa HTML5. Kabla ya kufanya muhtasari mfupi wao, nitarudia kwamba sio vivinjari vyote vinavyotekeleza utendakazi huu na bado haijakamilika. Leo tunaweza kutegemea Opera, Chrome, Firefox, Safari na Internet Explorer kusaidia HTML5 kwa viwango tofauti.

Nini kipya katika HTML5

Na kweli kuna mengi ambayo ni mapya. Sasa watengenezaji wa wavuti watakuwa na idadi ya vipengele vya ziada, kama vile kuchora maumbo ya kijiometri kwenye turubai ya wavuti, uwezo wa kujengwa ndani wa kuvuta na kuangusha, na kucheza faili za video na sauti (hapo awali hii inaweza tu kufanywa kwa kutumia vipengee vya programu-jalizi kama vile. kama Adobe Flash Player) na mengi zaidi, ambayo yatajadiliwa baadaye kidogo. Kuanza, ningependa kusema maneno machache kuhusu mwenendo wa jumla katika maendeleo ya HTML.

Sehemu ya vipimo vya HTML5 ambayo hujitokeza katika muundo wa lebo mpya ni ncha tu ya barafu. Vipengele vingi vya kina vya HTML5 vinapatikana tu kwa kutumia lugha ya utayarishaji hati, ambayo ndiyo msingi wa upangaji wa programu kwenye wavuti. Ikiwa tunachukua utendaji sawa wa kuchora unaotekelezwa kwa kutumia lebo, basi hatuzungumzii "kuchora alama" kwa kutumia vitambulisho vya sura ya kijiometri, kama mtu anaweza kudhani. Mpangilio wa turubai unaisha kwa kuweka kipengele cha turubai kwenye ukurasa na ndivyo hivyo. Mchoro wenyewe ni kazi ya JavaScript ambayo, ikifikiwa kwenye turubai, itaonyesha maumbo juu yake kwa njia sawa na vile programu za Windows za kawaida huonyesha michoro kwenye madirisha kupitia violesura vya GDI (Graphics Device Interface). Kwa hivyo, vipimo vya HTML5 vinaweka mahitaji makubwa kabisa kwenye vivinjari vya Mtandao katika suala la kutekeleza kazi na JavaScript, ambayo kwa kiasi kikubwa inadhibiti interface ya programu () ya kufanya kazi na mfano wa kitu cha hati (DOM). Hii ni habari njema, kwani watu wengi wanajua kuwa vivinjari tofauti vinaweza kupanga kazi na muundo wa kitu kupitia miingiliano ya programu ambayo hutofautiana kutoka kwa kila mmoja. Kwa sehemu, maelezo ya interface ya programu ni sifa ya shirika Kikundi Kazi cha Teknolojia ya Matumizi ya Maandishi ya Wavuti (WHATWG), ambayo inafanya juhudi kusawazisha sio tu lugha ya alama bali pia API zinazotumiwa katika programu zilizoandikwa katika lugha za hati kama vile JavaScript. WHATWG pia inahusika katika maendeleo na W3C.

Tunaweza pia kuhitimisha kuwa waandishi wa HTML5 walijaribu kuhamisha utekelezaji wa kazi zingine maarufu na zilizotafutwa za upangaji wa wavuti kwa jukumu la vivinjari vya Mtandao wenyewe. Kwa mfano, kwa kutumia HTML5, unaweza kutekeleza kwa urahisi utendakazi wa kuvuta na kuacha vitu, ambavyo vimekuwa maarufu sana katika miingiliano ya watumiaji wa duka za mkondoni (kuchagua bidhaa kwenye gari). Hapo awali, ili kufanya hivyo, ilibidi uandike hati katika JavaScript kwa kutumia aina mbalimbali za maktaba zinazosaidia, kama vile . Sasa ni rahisi zaidi kutekeleza kuburuta na kuacha kwa kufafanua idadi ya sifa za ziada na kuongeza vidhibiti vichache vya matukio kwa lebo unazohitaji. Kupanga "buruta na kudondosha" kwa kutumia jQuery pia sio ngumu sana, lakini katika kesi ya HTML5, tutashughulika na pendekezo moja kwa wateja wote wa programu ya Mtandao, na hiki ni kiwango tofauti kabisa cha usaidizi na dhamana ya uoanifu wa vivinjari tofauti. Inabadilika kuwa vivinjari vinavyotumia mapendekezo ya HTML5 sasa vitatoa uwezo wa kuhifadhi na kurejesha mipangilio ya kipindi katika muktadha wa kipindi cha wavuti yenyewe. Kwa mfano, ukurasa unapopakiwa tena, habari iliyoingia hapo awali haitapotea, lakini itarejeshwa kutoka kwa mazingira ya kikao cha sasa. Hii tayari "inaingia eneo" la programu ya wavuti ya upande wa seva, kwani hapo awali hii haikuweza kufanywa tu kwa kutumia HTML na JavaScript.

Naam, sasa orodha ya ubunifu mashuhuri zaidi katika HTML5:

Kuchora kwenye turubai ya wavuti au kutumia kipengele cha turubai

Kama ilivyoelezwa tayari, sehemu kuu ya mapendekezo kuhusu matumizi ya kipengele kipya ni maelezo ya kiolesura cha programu kwa ajili ya kuonyesha michoro juu yake. Kuanza, unaweka lebo kwenye ukurasa upana na urefu fulani, kisha katika msimbo wa JavaScript unaipata (kwa mfano, kwa id) na kuanza kuchora juu yake. Mchoro unakuja ili kufafanua kwa mpangilio mtindo wa mstari strokeStyle , mtindo wa kujaza Mtindo na mbinu za kuchora wito kama vile moveTo (sogeza kalamu), lineTo (chora mstari), arc (chora arc), n.k. Chini, angalia mfano - chombo rahisi zaidi cha kuchora na panya. Chini ni msimbo wake wa chanzo katika JavaScript na markup ya HTML. Ili kuchora kwa kalamu, bonyeza kitufe cha kushoto cha kipanya na usogeze kishale kwenye turubai. Katika hali ya "mistari" au "polygons", bonyeza tu kwa mfululizo kwenye turubai, na hivyo kuonyesha wima za polylines au vitu vya eneo.

Mfano wa kuchora kwenye kipengele cha turuba

Mfano wa kutekeleza shughuli za kuchora kwenye kipengele kwa kutumia HTML5.

Msimbo wa chanzo cha JavaScript

//Msimbo wa operesheni ya sasa var operation=0;

//Hali ya uendeshaji var active=false;

//Anzisha chaguo la kukokotoa la utendakazi wa kielelezo startOperesheni(e) (ikiwa (operesheni==0) inarudi; ikiwa (imetumika) inarudi; var context = getContext(); context.strokeStyle = getColor("stroke"); context.fillStyle = getColor ( "jaza"); context.beginPath() (ikiwa (! active) return; var muktadha = getContext(); context.closePath(); amilifu = uongo, //Matukio ya kipanya kazi ya panyaDown(e) ( var e = e || window.event; ikiwa (!active) ( startOperation( e); rudi; ) mwingine ( var context = getContext(); var point = getPoint(e); context.lineTo(point.x, point.y); context.stroke(); ikiwa (operesheni == 3) muktadha .fill(); ) rudisha kweli; ) fanya kazi mouseUp(e) ( var e = e || window.event; ikiwa (!active || operation != 1) return; stopOperation(); rudisha true; ) fanya kazi panyaSogeza(e) ( var e = e ||. window.event; ikiwa (!active || operation != 1) inarudi = getContext();

var point = getPoint(e);

Hii sio kitu zaidi ya usaidizi wa kivinjari kwa mfano wa "drag na drop" wa classic, ambao ni maarufu sana katika maombi ya kawaida ya GUI. Kwa vipengele ambavyo "utaburuta", fafanua sifa inayoweza kukokotwa, na kwa vipengele ambavyo "utatupa" vipengele vinavyoburutwa, unafafanua vidhibiti vya tukio ondragenter , ondragover na ondorp . Hiyo ndiyo yote, kwa kweli. Mfano hapa chini.

Mfano wa HTML5 wa kuvuta na kuacha - "Kikapu cha Mpira wa Kikapu"

Mfano wa kutekeleza shughuli za kuburuta na kuacha (vipengee vya kuburuta) kwa kutumia HTML5.

//Hali ya uendeshaji var active=false;

HTML5: Buruta na Achia html, mwili ( fonti-familia: saizi ya fonti ya Arial: 11px; ) .kikapu ( mpaka: 1px imara #777; upana: 105px; urefu: 120px; pedi: 10px; radius ya mpaka:0 0 10px 10px; rangi ya mandharinyuma: #eee; kisanduku-kivuli: 0px 0px 5px #777 : kulia; .mpira (mpaka: 1px imara #FF7F50; upana: 20px; urefu: 20px; radius ya mpaka:10px; rangi ya asili: #FF8C00; kivuli-sanduku: 0px 0px 5px #777; kuelea: kushoto; ukingo: 1px; ) chaguo la kukokotoa startDrag(e) ( var e = e || window.event; e.dataTransfer.setData("Mpira", e.target.id); e.dataTransfer.effectAllowed="move"; rudisha kweli ; ) kazi endDrag(e) ( var e = e || window.event; e.dataTransfer.clearData("Mpira"); rudisha kweli; ) tone la kazi(e) ( var e = e || window.event; e .target .appendChild(document.getElementById(e.dataTransfer.getData("Ball"))) e.stopPropagation() : e.cancelBubble = true;

kurudi kwa uwongo;

) ... Inacheza faili za video na sauti Kila kitu ni rahisi sana hapa; kutakuwa na kitu cha kuzaliana na wapi. Weka vitambulisho

Na

kwenye ukurasa wako, fafanua sifa ya src kwao, ikionyesha chanzo cha uchezaji, na subiri vivinjari vya Mtandaoni kujifunza kuchakata maagizo haya mazuri na kucheza fomati za kawaida. Vipengele vipya vya fomu ya wavuti maalum

HTML5 huahidi aina mpya za vipengee

, kudhibiti ingizo la anwani ya Mtandao, anwani ya barua pepe, thamani za nambari, tarehe, saa, rangi, n.k. Ikiwa kivinjari chako tayari kinaunga mkono ubunifu huu wote, basi chini utaona jinsi inavyofanya. Ikiwa kivinjari hakiingiliani na aina zote mpya za vipengee, basi zile ambazo bado hazijui jinsi ya kufanya kazi nazo zitaonekana kama sehemu za maandishi ya kawaida.

Ikiwa thamani ya anwani hailingani na umbizo url, kisha baada ya kubofya [thibitisha], kivinjari kitajaribu kusahihisha. Ikiwa haiwezi kufanya hivi, itaonyesha ujumbe wa hitilafu. Ikiwa thamani ya barua pepe hailingani na umbizo barua pepe, kisha baada ya kubofya [thibitisha], kivinjari kitarekebisha anwani au kuripoti hitilafu ya ingizo.

Taswira ya maadili ya nambari

Uwasilishaji wa thamani ya nambari kwa namna ya kiwango na uwezo wa kuonyesha vipindi chini ya kawaida ya chini na juu ya kawaida ya juu, pamoja na thamani bora zaidi.

Kipengele:

Taswira ya mchakato wa utekelezaji. Unaweza tu kubainisha upeo wa juu na thamani ya sasa.

Kipengele cha Msimbo wa Chanzo cha HTML

Nambari kutoka kwa muda:

Nambari kamili:

Tarehe na saa:

Tarehe:

Saa:

Mwezi:

Wiki:

Rangi:

url:

barua pepe:


Kusimamia historia ya kuvinjari

Itawezekana kudhibiti mpito kwa kurasa zilizopakiwa hapo awali kwa kutumia JavaScript na kipengee historia. Kwa mfano, kupiga simu kwa window.history.length kutarudisha "urefu wa historia", na kupiga window.history.back() , window.history.forward() au window.history.go(stepCount) kutafanya mabadiliko yanayofaa. Chini ni mfano mdogo:

Mbele>

Kuhifadhi hali ya kipindi

Utendaji huu mzuri utakuwezesha kuokoa na kurejesha data ya kikao. Tulijaza agizo, tukaenda kutazama bidhaa, tukarudi (kwa kutumia kiunga) tena ili kujaza agizo, lakini data iliyoingia hapo awali ilikuwa bado. Hapo awali, ili kutoa mali hiyo ya ukurasa, haikuwezekana kufanya bila jitihada za ziada kwenye upande wa seva wa programu ya wavuti. Sasa itawezekana kuhifadhi data katika muktadha wa kipindi cha wavuti ( KipindiUhifadhi) au ndani kwenye RAM ya kivinjari ( Hifadhi ya ndani) sessionStorage inapaswa kuruhusu data kubakishwa mradi tu kipindi ambacho kilianzishwa kinatumika. Data iliyohifadhiwa inaweza kupatikana kutoka kwa kurasa mbalimbali za tovuti zilizopakiwa na kivinjari. Chaguo la Hifadhi ya ndani, inaonekana, inapaswa kuhifadhi data wakati kivinjari chenyewe kimefunguliwa. Kwa kuwa ufikiaji wa Uhifadhi wa ndani unapaswa kupatikana kila wakati, hata ikiwa hakuna muunganisho na seva, ukurasa wowote uliofunguliwa na kivinjari unaweza kupokea data kutoka kwa Hifadhi ya ndani. Hali ya kipindi katika hali zote mbili ni seti ya jozi za thamani-msingi zinazofikiwa na simu kwa xxxStorage.setItem(key, value) na xxxStorage.getItem(key) .

Mfano: Tazama sehemu ya kuhariri maudhui ya kipengele kwa kutumia sifa mpya ya kuridhisha, iliyoletwa katika HTML5, ni. Vifungo viwili vimeongezwa hapa chini, moja ambayo huhifadhi yaliyomo kwenye block iliyohaririwa, na ya pili inarejesha. Bofya [Hifadhi], hariri yaliyomo kwenye kizuizi na ubofye [Rejesha]. Ikiwa kivinjari chako kinaauni utendakazi wa HTML5 KipindiUhifadhi, basi yaliyomo kwenye kizuizi ya kuridhisha itarejeshwa.

Rejesha

Hifadhi Kurejesha

Badilishana ujumbe kati ya kurasa

Ikiwa ukurasa wako una vipengele ambayo hupakia yaliyomo kwenye kurasa zingine: sio kurasa za tovuti yako tu, bali pia kurasa kutoka kwa kikoa tofauti kabisa, basi kwa utekelezaji wa mapendekezo ya HTML5 itawezekana kubadilishana ujumbe na madirisha kama hayo. Ukurasa unaotuma ujumbe hufanya hivi kwa kutumia simu ya kitendakazi ya window.postMessage(ujumbe, lengo), na ukurasa unaopokea ujumbe lazima uwe na kidhibiti tukio cha "onmessage", ambapo lazima tayari kuchakata ujumbe wa tukio.data ikiwa ni hakika mpokeaji wake - inalingana na tukio la thamani.origin . Kabla ya ujio wa utaratibu huu, haikuwezekana kuwasiliana na rasilimali mbalimbali za mtandao kwa upande wa mteja. Mfano wa utekelezaji rahisi zaidi wa mawasiliano kati ya kurasa mbili kwa kutumia utaratibu mpya wa ujumbe wa HTML5 umetolewa hapa chini. Kwa mtazamo wa kwanza, inaweza kuonekana kuwa hakuna kitu maalum kinachotokea katika mfano. Kwa usahihi, haijulikani kwa nini hii yote inahitajika. Kwa kweli, ujumbe unaweza kuwa maarufu wakati wa kuunda tovuti za habari zinazochanganya huduma mbalimbali za mtandao katika sehemu moja. Kwa mfano, tuseme kuna huduma fulani ya mtandao, ambayo huduma zake zinaweza kutumika tu baada ya kujaza programu kubwa ya kielektroniki. Pia, tuseme kuna mteja ambaye mara nyingi hutumia huduma za huduma hii, lakini maombi yake hutofautiana kidogo kutoka kwa kila mmoja kila wakati (vigezo vingi huwa sawa). Ikiwa huduma kama hiyo ya mtandao, pamoja na fomu ya elektroniki ya kujaza ombi, pia iliunga mkono "mpokeaji wa ujumbe" kwa kuweka otomatiki kwa huduma zake, basi wateja wake wataweza "kuburuta" dirisha la huduma hii kwenye. kurasa zao (kwa kutumia kipengee ), tengeneza fomu za maombi (iliyoboreshwa kwako mwenyewe) na kazi za kuzituma kwa huduma inayolengwa kwa njia ya ujumbe. Vigezo vingi katika kesi hii vitatolewa moja kwa moja, kwa mfano, maelezo ya mteja. Kwa kweli, mawasiliano kama hayo yanaweza kutekelezwa kupitia maombi ya http kutoka kwa mteja hadi kwa seva, kwa kichwa ambacho vigezo vinavyohitajika vinapitishwa, lakini ni muhimu kuzingatia kwamba katika kesi ya utaratibu wa ujumbe wa HTML5, trafiki wakati wa kupitisha vigezo ni. sifuri, kwani kila kitu kinatokea kwa upande wa mteja.

Mfano wa kurasa mbili zinazobadilishana ujumbe

Mfano wa kutekeleza ubadilishanaji wa ujumbe kati ya kurasa kwa kutumia HTML5.

Msimbo wa chanzo wa ukurasa wa chanzo cha ujumbe

function init() ( document.getElementById("form").onsubmit = sendMessage; ) chaguo la kukokotoa sendMessage() ( var location = window.location; var message = document.getElementById("ujumbe").value; var target = document. getElementById("target"); target.contentWindow.postMessage(ujumbe, location.protocol+"//"+location.host) ...

message_source.html:

Imeshindwa kupakia messages_target.html!

Nakala ya ujumbe


Msimbo wa chanzo wa ukurasa wa mpokeaji ujumbe

kazi init() ( ikiwa (window.addEventListener) window.addEventListener("ujumbe", receiveMessage, uongo); else window.attachEvent("onmessage", receiveMessage); ) tenda kazi receiveMessage(event) ( document.getElementById("target" ).innerHTML = event.data; document.getElementById("origin").innerHTML = "kutoka " + event.origin) ...

messages_target.html:

Nasubiri ujumbe kutoka...

Kuhariri maudhui ya kipengele

Sasa, kwa kufafanua sifa inayoweza kuhaririwa, unaweza kufanya vipengele vya markup binafsi kuhaririwa, kwa mfano, vitalu vya maandishi, orodha, nk. Kwa kutumia sifa ya modi ya kubuni, unaweza kufanya ukurasa mzima kuhaririwa. Utendaji huu unaweza kuwa muhimu kwa kupanga maoni na mmiliki wa rasilimali, kwa mfano, kwa kujaza na kutuma maombi, agizo, au kitu kingine kama hicho. Unaunda ukurasa wa HTML wa fomu katika umbo lake asili na kumpa mtumiaji kujaza. Baada ya kujaza, mtumiaji anathibitisha data iliyoingia, na hati iliyohaririwa inatumwa kwa seva. Mfano wa markup inayoweza kuhaririwa umeonyeshwa hapa chini:

Yaliyomo kwenye kizuizi hiki yanaweza kuhaririwa kwa sababu sifa imebainishwa kwayo ya kuridhisha:

Wakati wa kuhariri seli za meza, upana wa safu na urefu wa mistari hubadilika moja kwa moja.

Kuingiza kipengee kipya cha orodha, bonyeza .

  • Kipengee cha orodha 1
  • Kipengee cha orodha 2
  • Kipengee cha orodha 3

Baada ya kuongeza kipengee kipya kwenye orodha, nambari zitasasishwa kiotomatiki.

  • Kipengee cha orodha 1
  • Kipengee cha orodha 2
  • Kipengee cha orodha 3
  • Picha za Vekta

    Usaidizi unatarajiwa SVG- Lugha ya ghafi ya michoro ya vekta kulingana na . Graphics itaingizwa kwenye markup, ambayo ni ya kimantiki, kwa kutumia lebo , kwa mfano kama hii:

    Ukiona maumbo ya kijiometri hapa chini, inamaanisha kuwa kivinjari chako tayari kinaauni svg.

    Maneno ya Hisabati

    Msaada pia unatarajiwa Hisabati- lugha ya alama kwa maneno ya hisabati kulingana na XML. Hapa kuna mfano wa kuashiria fomula ya kuhesabu urefu wa upande wa pembetatu kwa kutumia theorem ya cosine:

    a = b 2 + c 2 - 2 b c cos α

    Ukiona fomula iliyo na alama ya mzizi wa mraba, basi kivinjari chako tayari kinaelewa MathML.

    A = b 2 + c 2 - 2 b c cos α

    Vipengele vingine vya markup

    Kwanza kabisa, ningependa kuangazia kikundi cha vipengee vya alama za ukurasa mpya ambavyo havikuwepo hapo awali. Hizi ni pamoja na tag - makala, kumbuka, habari, nk; - kichwa cha makala au kichwa - kijachini au kijachini - sehemu au sura ya kifungu. Kwa nini hii inahitajika ikiwa kitu kimoja kinaweza kufanywa kwa kutumia vipengele madarasa tofauti? Hii ni muhimu ili maana ya markup yako pia iwe wazi kwa wale wanaojaribu kuichambua. Sizungumzi juu ya mtu anayesoma maandishi yako (haoni markup, kila kitu ni wazi kwake bila hiyo), lakini kuhusu mifumo ya automatiska na, kwanza kabisa, hii inatumika kwa injini za utafutaji. Mzigo wa kisemantiki ni muhimu sana kwa injini za utafutaji wakati wa kukokotoa umuhimu wa kurasa zako kwa hoja maalum ya utafutaji. Katika hali hii, kipengele kinastahili tahadhari maalum , kwa sababu imeundwa kuangazia kizuizi na viungo kuu vya kusogeza kwenye ukurasa wako. Labda injini za utaftaji zitashughulikia viungo kama hivyo tofauti. Ifuatayo ni jedwali la muhtasari wa lebo mpya za HTML5 ambazo zinaongeza maana kwenye lebo.

    Tag Maelezo Fupi
    Makala, habari, dokezo, maoni au aina nyingine yoyote ya uchapishaji wa mtu binafsi. Lebo makala huchanganya habari zinazohusiana na mada au suala moja. Kipengele kimoja makala inaweza kujumuisha vipengele vingine makala(mfano hapa chini).
    Maoni, kushuka. Lebo kando pia inaweza kutumika kuangazia sehemu za maandishi ambazo hazihusiani na maudhui kuu ya ukurasa, kwa mfano kuweka matangazo.
    Sehemu ya habari ya kina ambayo inaweza kupanuliwa kwa ombi.
    Saini ya mchoro. Lebo figcaption kutumika ndani ya lebo takwimu.
    Kuchora kwa saini. Kipengele hiki lazima kiwe na picha img na saini figcaption.
    Kijachini. Lebo kijachini inaleta maana pia kuiweka ndani ya lebo makala ili kuonyesha mwandishi wa makala au dokezo.
    Kichwa cha ukurasa au utangulizi wa makala. Inapowekwa ndani ya lebo makala kuweka alama kichwa Unaweza kujumuisha kichwa, maelezo mafupi ya chapisho, na viungo vya nyenzo zinazohusiana.
    Upangaji wa Vichwa h1 - h6 kwenye kichwa cha ngazi nyingi.
    Weka alama. Lebo alama Inaleta maana kutumia ikiwa unahitaji kuangazia sehemu ya maandishi kwa mtindo tofauti na kurejelea kutoka sehemu nyingine kwenye hati.
    Kizuizi cha viungo vya urambazaji.
    Sehemu ya ukurasa, kifungu cha makala. Inapowekwa ndani ya makala (tag makala) inaweza kufasiriwa kama sura yake tofauti.

    Chini ni mfano wa alama za HTML kwa kutumia lebo zilizoorodheshwa.

    HTML5 bado haijawa pendekezo, na kuna utata juu ya matumizi ya "lebo zake za semantic" kama vile Inacheza faili za video na sauti tayari sana. Hakuna anayejua bado jinsi zinafaa kuingizwa kwenye ghafi kwa usahihi, lakini kuna vidokezo kadhaa vya kutumia lebo mpya za muundo wa HTML5, ambazo ni ngumu kubishana nazo, kwani maana yake ni dhahiri. Hapa kuna baadhi yao:

  • Usitumie lebo kichwa ili tu kuweka lebo moja ya kichwa ndani yake h1 - h6 kama vile hakuna haja ya kuweka chochote ndani ya vitambulisho vya kichwa isipokuwa maandishi ya vichwa vyenyewe. Hupaswi kufanya hivi: Jina la tovuti

  • Usitumie lebo kundi kuunda vikundi vya vichwa kutoka kwa kipengele kimoja. Kila kipengele cha mtu binafsi kutoka h1 kwa h6 na hivyo kichwa chenyewe. Hapa kuna mfano wa kile usichopaswa kufanya: Jina la tovuti

  • Hakuna haja ya kuongeza vipengele sehemu ndani ya vipengele vingine, ikiwa ni pamoja na yaliyomo yote kuu ya vipengele hivi. Katika mfano hapo juu hakuna vizuizi tofauti ndani ya kila maoni sehemu ili kuangazia maandishi ya maoni yenyewe. Hapa kuna mfano wa kipengele cha ziada sehemu :

    Maandishi ya maoni

    Imechapishwa...

  • Hakuna haja ya kuelewa maana ya kipengele makala kihalisi. Hii sio tu makala, lakini pia aina yoyote ya uwasilishaji wa mawazo kamili. Ni kwa sababu hii kwamba maoni kwa kifungu katika mfano uliotolewa hapo awali pia yanasisitizwa katika vizuizi tofauti makala.

  • Tumia lebo za muundo za HTML5 ikiwa tu unaamini zitasaidia injini za utafutaji kujifunza zaidi kuhusu semantiki za lebo yako. Ikiwa lebo haina maana tofauti, lakini imeongezwa tu kwa "uzuri," basi matokeo ya nyongeza yake ni "uzito wa ziada" wa ukurasa wako, ambao, kama unavyojulikana, "ni hatari kwa afya" ya tovuti.
  • Hayo ni kwa ajili yangu tu kuhusu vipengele vipya vya lugha ya markup hypertext ambavyo vinapaswa kuonekana wakati wa kutolewa kwa pendekezo la HTML5.

    Kwa kutolewa kwa HTML5, vipengele vingi vipya vimeongezwa kwenye HTML. Na kilicho bora zaidi ni kwamba vivinjari vingine tayari vinaauni baadhi ya vipengele hivi wakati vingine bado vinasonga mbele. Unaweza kufuatilia vipengele hivi vinavyoongezwa kwenye vivinjari kwenye ukurasa huu.

    1. Doctype Mpya na Charset.

    Moja ya faida za HTML5 ni unyenyekevu wake.

    Ndiyo, ni hayo tu. Kwa kweli maneno mawili. Usahihi huu pengine ni kutokana na ukweli kwamba HTML5 inajisimamia yenyewe badala ya kubaki sehemu ya SGML.

    Charset pia ni rahisi sana, hutumia utf-8, na imeainishwa kwa njia ile ile, halisi na lebo moja:

    2. Muundo mpya

    HTML5 inaelewa kuwa ukurasa wa wavuti una muundo, kama kitabu, kwa mfano. Kawaida hii ni urambazaji, yaliyomo yenyewe, menyu ya kando (upau wa kando) na kichwa. Na HTML5 hutoa vitambulisho kwa vipengele hivi vyote.

    • - inafafanua sehemu za ukurasa
    • - inafafanua kichwa cha ukurasa
    • - inafafanua kijachini cha ukurasa
    • - inafafanua urambazaji wa ukurasa
    • - inafafanua makala au maudhui kuu kwenye ukurasa
    • - inafafanua maudhui ya ziada, upau wa kando kwenye ukurasa
    • - inafafanua picha, maelezo ya makala
    3. Vipengele vipya vya kujengwa.

    Vipengele hivi vipya hufafanua baadhi ya dhana za kimsingi na kuwakilisha vipengele vya ukurasa:

    • - kuashiria yaliyomo
    • - kuashiria wakati au tarehe
    • - kuonyesha vipimo fulani, kama vile nafasi ya diski
    • - kuonyesha mafanikio na maendeleo yako
    4. Usaidizi mpya wa kurasa zinazobadilika

    HTML 5 iliundwa ili kurahisisha kazi za wasanidi wa wavuti, ndiyo maana kuna vipengele vingi vipya vya kusaidia kurasa zinazobadilika.

    • Menyu ya Muktadha - HTML 5 itasaidia kuunda na kutumia menyu za muktadha katika kurasa za wavuti na programu
    • sifa ya asynchronous - Lebo hii huambia kivinjari kuwa hati inapaswa kupakiwa kisawazisha ili isipunguze kasi ya ukurasa uliosalia kutoka kwa upakiaji na uwasilishaji.
    • - ina maelezo ya kina kuhusu kipengele.
    • - huunda jedwali ambalo limeundwa kutoka kwa hifadhidata au chanzo kingine cha ukurasa chenye nguvu
    • - vitambulisho vya zamani vimerudi, hukuruhusu kuunda mifumo ya menyu kwenye kurasa zako za wavuti
    • - hufafanua vitendo vinavyopaswa kutokea wakati kipengele kinachobadilika kinapoamilishwa
    5. Aina mpya za fomu

    HTML5 inasaidia aina zote za fomu za zamani, lakini mpya pia zimeongezwa:

    • tarehe
    • tarehe-ndani
    • mwezi
    • nambari
    • mbalimbali
    • barua pepe
    6. Vipengele vipya

    Kuna baadhi ya vipengele vipya katika HTML5:

    • - kipengele kinachokuruhusu kutumia JavaScript katika kurasa za wavuti. Hii inaweza kukuruhusu kuongeza picha au michoro kwenye vidokezo vya zana, au kuunda tu michoro inayobadilika kwenye ukurasa kwenye nzi.
    • - inaongeza video kwenye ukurasa wa wavuti.
    • - inaongeza sauti kwenye ukurasa wa wavuti.
    7.Vipengee vilivyofutwa

    Pia kuna vipengele vya HTML4 ambavyo haviwezi kutumika tena katika HTML5. Wengi wao ni wa zamani, kwa hivyo vitendo kama hivyo havishangazi.

    Kutoka kwa mwandishi: Kutolewa kwa kiwango cha HTML 5 miaka 2 iliyopita kulizua tafrani katika jumuiya ya wasanidi programu. Sio tu kwa sababu kulikuwa na sifa nyingi mpya katika vipimo, lakini pia kwa sababu ilikuwa sasisho kuu la kwanza kwa HTML tangu HTML 4.01, ambayo ilitoka mwaka wa 1999. Bado unaweza kupata tovuti mtandaoni zikijivunia kwamba zinatumia kiwango cha "kisasa" cha HTML5.

    Kwa bahati kwetu, wakati huu hatukulazimika kungoja kwa muda mrefu kwa kizazi kijacho cha HTML. Mnamo Oktoba 2015, W3C ilianza kutengeneza rasimu ya HTML 5.1, ambayo ilipaswa kutatua matatizo kadhaa ambayo yalisalia wazi katika HTML5. Baada ya muda mrefu, vipimo vilifikia hali ya "Mapendekezo ya Mgombea" mnamo Juni 2016, hali ya "Mapendekezo Yanayopendekezwa" mnamo Septemba 2016, na hatimaye hali ya Mapendekezo ya W3C mnamo Novemba 2016. Wale waliofuata maendeleo wanaweza kuwa wameona kuwa njia ilikuwa mwiba. Vipengele vingi vya msingi vya HTML 5.1 vilikataliwa kwa sababu ya muundo duni na ukosefu wa usaidizi wa kivinjari.

    HTML 5.1 bado iko katika maendeleo, na W3C imeanza kazi ya rasimu ya HTML 5.2, ambayo inatarajiwa kutolewa mwishoni mwa 2017. Katika makala hii, tutaangalia vipengele vipya vya kuvutia na uboreshaji wa toleo. 5.1. Usaidizi wa mali hizi bado ni duni, lakini tutakuambia ni vivinjari vipi unaweza kujaribu mifano.

    Menyu ya muktadha kwa kutumia tagi za menyu na vipengee

    Rasimu ya 5.1 inaleta aina mbili za vipengele vya menyu: muktadha na upau wa vidhibiti. Ya kwanza hutumiwa kupanua menyu ya asili, ambayo kawaida huonyeshwa kwa kubofya kulia kwenye ukurasa. Ya pili inafafanua vipengele vya menyu rahisi. Wakati wa mchakato wa ukuzaji, upau wa vidhibiti uliachwa; lebo ya muktadha bado iko.

    Kwa kutumia lebo ya menyu, unaweza kuunda menyu yenye lebo moja au zaidi za menyu, na kisha ukabidhi lebo hizi kwa vipengele vyovyote kwa kutumia sifa ya menyu ya muktadha. Lebo ya menyu inaweza kuwa moja ya aina tatu:

    kisanduku cha kuteua - hukuruhusu kuchagua au kuondoa;

    amri - inakuwezesha kufanya kitendo kwa kubofya;

    redio - hukuruhusu kuchagua chaguo moja kutoka kwa kikundi.

    Kesi ya msingi ya utumiaji, inafanya kazi katika Firefox 49, hakuna msaada katika Chrome 54.

    Katika vivinjari vinavyotumika, menyu ya muktadha inapaswa kuonekana kama hii:

    maelezo na vipengele vya muhtasari

    Maelezo na lebo za muhtasari hukuwezesha kuonyesha na kuficha vizuizi kwa maelezo ya ziada unapobofya. Hii kawaida hufanywa katika JS, lakini sasa inaweza kufanywa kwa kutumia maelezo na tagi za muhtasari. Kubofya lebo ya muhtasari hufungua yaliyomo kutoka kwa lebo ya maelezo.

    Mfano hapa chini ulijaribiwa katika Firefox na Chrome.

    Katika vivinjari vinavyotumika onyesho linaonekana kama hii:

    Aina za sehemu za ziada za ingizo ni mwezi, wiki na tarehe-ndani

    Silaha ya uga ingizo imepanuliwa kwa aina tatu mpya: mwezi, wiki na tarehe-ndani.

    Aina mbili za kwanza hukuruhusu kuchagua wiki na mwezi. Katika Chrome, aina hizi zote mbili zinaonyeshwa kama kalenda kunjuzi ambapo unaweza kuchagua mwezi au wiki. Inapofikiwa kutoka kwa JS, kamba itaonekana kama hii: "2016-W43" kwa wiki na "2016-10" kwa mwezi.

    Hapo awali, rasimu ya 5.1 ilianzisha pembejeo mbili za wakati: tarehe na tarehe-ya ndani. Tofauti kati yao ni kwamba tarehe-ya karibu kila wakati huchagua saa katika eneo la saa la mtumiaji, wakati muda wa tarehe hukuruhusu kubadilisha saa za eneo. Wakati wa uundaji, aina ya tarehe ilitupwa, na kuacha tu tarehe-ya kawaida. Sehemu ya aina ya tarehe-ya ndani ina sehemu mbili: tarehe, ambayo inaweza kuchaguliwa kwa njia sawa na katika nyanja za aina ya wiki na mwezi, na wakati, ambayo inaweza kutajwa tofauti.

    Onyesho la CodePen hapa chini linaonyesha mifano ya aina zote. Inafanya kazi katika Chrome, hakuna msaada katika Firefox bado:

    Katika vivinjari vinavyounga mkono onyesho itaonekana kama hii:

    Picha Msikivu

    HTML 5.1 inaleta vipengele vipya kadhaa vya kufanya kazi na picha sikivu bila kujumuisha CSS. Kila kipengele kina mifano yake ya matumizi.

    Sifa ya picha srcset

    Sifa ya picha ya srcset hukuruhusu kusajili picha kadhaa za ziada zilizo na msongamano tofauti wa saizi. Kwa njia hii, kivinjari kinaweza kupakia picha za ubora unaohitajika kwa kifaa cha mtumiaji (kulingana na msongamano wa pikseli kwenye kifaa, kiwango cha kukuza na kasi ya mtandao). Kwa mfano, kwa watumiaji walio na simu ndogo au mitandao ya polepole, unaweza kuonyesha picha za azimio la chini.

    Sifa ya srcset inakubali orodha iliyotenganishwa kwa koma ya URL za picha na kirekebishaji cha X. Virekebishaji vinaelezea uwiano wa pikseli (idadi ya saizi halisi kwa kila pikseli ya CSS) inayofaa kwa kila picha. Mfano rahisi:

    < img src = "images/low-res.jpg" srcset = "

    Picha/low-res.jpg 1x,

    Picha/high-res.jpg 2x,

    Picha/ultra-high-res.jpg 3x"

    Ikiwa uwiano wa pixel ni 1, picha ya chini-res itaonyeshwa, kwa 2 itaonyeshwa high-res, kwa 3 - ultra-high-res. Unaweza kuonyesha picha za ukubwa tofauti badala ya uwiano wa pikseli. Ili kufanya hivyo unahitaji kutumia w modifier:

    < img src = "images/low-res.jpg" srcset = "

    Picha/low-res.jpg 600w,

    Picha/high-res.jpg 1000w,

    Images/ultra-high-res.jpg 1400w"

    Katika hali hii, picha yenye upana wa 600px imewekwa kwa res chini, 1000px kwa res za juu, na 1400px kwa ultra-high-res.

    Ukubwa wa sifa za picha

    Unaweza kutaka kuonyesha picha kwa njia tofauti kulingana na saizi ya skrini yako. Kwa mfano, unaweza kuonyesha picha katika safu mbili kwenye skrini pana, lakini katika safu moja kwa skrini nyembamba. Sifa ya saizi itakusaidia na hii. Sifa inakuwezesha kutafsiri upana wa skrini kwenye nafasi iliyotengwa kwa ajili ya picha, baada ya hapo picha inayofaa inachaguliwa kwa kutumia sifa ya srcset. Mfano:

    < img src = "images/low-res.jpg" sizes = "(max-width: 40em) 100vw, 50vw"

    srcset = "images/low-res.jpg 600w,

    Picha/high-res.jpg 1000w,

    Images/ultra-high-res.jpg 1400w"

    Wakati upana wa dirisha la kivinjari ni mkubwa kuliko 40em, sifa ya ukubwa hubainisha upana wa picha kama 50% ya upana wa dirisha. Wakati upana wa dirisha ni chini ya au sawa na 40em, upana wa picha ni 100%.

    Lebo ya picha

    Haitoshi kurekebisha ukubwa wa picha ili kutoshea skrini tofauti. Unahitaji njia ya kuonyesha picha tofauti kabisa. Lebo ya picha itakusaidia kwa hili. Lebo hii hukuruhusu kusajili picha nyingi kwa skrini tofauti. Ili kufanya hivyo, unahitaji kuifunga lebo ya img kwenye picha na ueleze vitambulisho vya ziada vya chanzo. Lebo za chanzo zina viungo vya picha.

    < picture >

    < source media = "(max-width: 20em)" srcset = "

    Picha/small/low-res.jpg 1x,

    >

    < / picture >

    Uthibitishaji wa Fomu kwa kutumia form.reportValidity()

    HTML5 inajumuisha njia ya form.checkValidity(), ambayo inaweza kutumika kuangalia sehemu za fomu dhidi ya wathibitishaji. Matokeo yake ni thamani ya Boolean. Njia mpya ya reportValidity() inafanya kazi kwa njia sawa. Kwa msaada wake, unaweza kuthibitisha fomu na kurejesha matokeo. Zaidi ya hayo, njia hii inaonyesha makosa kwa mtumiaji moja kwa moja kwenye kivinjari. Onyesho la CodePen hapa chini linaonyesha matokeo (yaliyojaribiwa katika Firefox na Chrome):

    Sehemu ya Jina la Kwanza lazima iangaziwa na isiwe tupu. Kawaida inafanya kazi kama hii:

    sifa ya skrini nzima ya fremu

    Sifa mpya ya Boolean ya fremu, skrini nzima, hukuruhusu kubadilisha jinsi maudhui yanavyoonyeshwa kwa kutumia njia ya requestFullscreen(). Kwa hiyo, unaweza kupanua maudhui hadi skrini nzima.

    Kukagua tahajia kwa kutumia element.forceSpellCheck()

    Mbinu mpya ya element.forceSpellCheck() hukuruhusu kuwezesha ukaguzi wa tahajia wa vipengele vya maandishi. Hiki pia ni kipengele cha kwanza ambacho bado hakitumiki katika kivinjari chochote. Kinadharia kabisa, njia hii inaweza kutumika kuangalia tahajia ya vipengee visivyoweza kuhaririwa.

    Vipengele ambavyo havikutekelezwa

    Baadhi ya vipengele vilivyoandikwa katika rasimu za awali za vipimo hatimaye viliondolewa, kwa kiasi kikubwa kutokana na ukosefu wa maslahi kutoka kwa watengenezaji wa kivinjari. Hapa kuna baadhi ya vipengele vya kuvutia:

    sifa ajizi

    Sifa ajizi ilipaswa kuzima mwingiliano wa mtumiaji kwa vipengele vyote vya watoto. Sawa na kuongeza sifa iliyozimwa kwa vipengele vyote kwa mikono.

    Kidirisha cha lebo

    Kwa kutumia lebo ya kidadisi iliwezekana kuunda madirisha ibukizi. Njia rahisi ya ujumuishaji ilifikiriwa hata. Sifa ya mbinu ya lebo ya kidirisha ilizuia fomu kuwasilishwa kwa seva; badala yake, lebo hiyo ilirudisha thamani kwa mtayarishaji mazungumzo.

    Lebo bado inaungwa mkono katika Firefox, mfano wa jinsi inavyofanya kazi:

    Viungo vya ziada

    Hii sio orodha kamili ya mabadiliko katika HTML 5.1. Vipimo vina vipengele vingi vidogo na mabadiliko ambayo yalipitishwa katika Living Standard, pamoja na vipengele vingi ambavyo viliondolewa. Orodha kamili ya mabadiliko inaweza kupatikana katika sehemu ya Mabadiliko ya vipimo. Wakati huo huo, hebu tumaini kwamba watengenezaji wa kivinjari watachukua vipengele vipya haraka!

    Ulipenda nini zaidi kuhusu HTML 5.1? Andika kwenye maoni!

    Mhariri: Pavels Jelisejevs

    Februari 1, 2008 saa 11:51 jioni Ni nini kipya katika HTML 5.0? Sehemu ya 1
    • Maendeleo ya tovuti
    • Tafsiri

    Teknolojia za wavuti zinaendelea kubadilika. Kila siku tovuti mpya zinaundwa zinazopanua uwezo wa HTML. HTML 4 imekuwapo kwa takriban muongo mmoja, lakini wachapishaji wanatafuta njia mpya za kupanua utendakazi wa umbizo. Walakini, anuwai ya lugha na vivinjari huzuia baadhi ya uwezo wake.

    Ili kuwapa wasanidi programu bidhaa inayoweza kunyumbulika zaidi, inayoweza kushirikiana ambayo hufanya miradi iingiliane na kuvutia zaidi, HTML 5 inatanguliza na kupanua vipengele mbalimbali ikiwa ni pamoja na vidhibiti vya fomu, API, midia anuwai, muundo na semantiki.

    Kazi kwenye HTML 5 ilianza mnamo 2004. Maendeleo kwa sasa yanafanywa kama sehemu ya juhudi za pamoja kati ya WG ya W3C HTML na WHATWG. Makampuni mengi yanayojulikana yanahusika katika maendeleo, ikiwa ni pamoja na: Apple, Mozilla, Opera, na Microsoft, na idadi ya mashirika mengine na watu binafsi wenye maslahi na asili tofauti.

    Kumbuka kuwa vipimo bado vinatengenezwa na ni mbali na kukamilika. Kwa hiyo, inawezekana kwamba vipengele vyovyote vilivyotajwa katika makala hii vinaweza kubadilika katika siku zijazo. Makala haya yanalenga kuelezea vipengele vipya vya umbizo la HTML toleo la 5.


    Muundo

    HTML 5 inatanguliza kundi zima la vipengee vipya vinavyofanya muundo wa ukurasa kuwa rahisi zaidi. Kurasa nyingi za HTML4 zina idadi ya miundo ya kawaida, kama vile vichwa na safu wima, na leo imekuwa desturi kuangazia kwa kutumia vipengele vya div, kugawa darasa au kitambulisho kwake.


    Mchoro unaonyesha mpangilio wa kawaida wa safu wima 2 kwa kutumia vipengee vya div, ukiwapa darasa au kitambulisho. Muundo una kichwa cha ukurasa, kijachini, menyu ya kusogeza na maudhui yaliyogawanywa katika safu wima 2 -

    Matumizi ya vipengele vya div ni ya upendeleo kwa sababu toleo la sasa la HTML 4 halina semantiki kuelezea sehemu hizi haswa zaidi. HTML 5 hutatua tatizo hili kwa kuanzisha vipengele vipya, ambavyo kila kimoja kina jina lake tofauti.

    Nambari ya hati inaonekana kama hii:

    ...
    ...
    ...

    ...
    ...


    Kuna faida kadhaa za kutumia vipengele hivi. Inapotumiwa pamoja na vichwa vya vipengele (h1 - h6), hii huwezesha kuanzisha kifungu kidogo chenye kichwa katika kila ngazi, tofauti na viwango 6 vinavyowezekana katika toleo la awali la HTML. Vipimo vinajumuisha algorithm ya kina ya kuunda mipaka. Vipengele hivi vinaweza kutumika kama zana za uandishi na kivinjari ili kutengeneza jedwali la yaliyomo na kusaidia watumiaji kuvinjari hati.

    Kwa mfano, muundo ufuatao umegawanywa katika viwango na vitu vya h1 vilivyowekwa:

    Kiwango cha 1Kiwango cha 2Kiwango cha 3
    Kumbuka kuwa kwa utangamano wa juu zaidi na vivinjari tofauti, unaweza kutumia viwango tofauti vya vichwa, kama vile h2, h3, n.k.

    Kwa kufafanua madhumuni ya sehemu kwenye ukurasa kwa kutumia vipengele maalum vya sehemu, teknolojia hii inaweza kumsaidia mtumiaji kuvinjari ukurasa kwa urahisi zaidi. Kwa mfano, mtumiaji anaweza kwenda kwa sehemu ya menyu kwa urahisi au kuhamisha haraka kutoka kwa nakala moja hadi nyingine bila msanidi programu kuunda kiunga kama hicho. Watengenezaji wanaweza pia kufurahi kwa sababu kwa kubadilisha vipengele vya div na vipengele vinavyolingana, msimbo wa chanzo utakuwa rahisi na safi.

    Kipengele cha kichwa kinawakilisha kichwa cha ukurasa. Sehemu hii haiwezi tu kuwa na mada yenyewe, lakini pia vichwa vidogo ambavyo vitasaidia mtumiaji kuelewa zaidi kuhusu maudhui ya ukurasa.

    Muhtasari wa HTML 5 Na Lachlan HuntMfano BlogIngiza mstari wa lebo hapa.
    Kipengele cha "chini" kinawakilisha "chini" ya ukurasa. Sehemu hii ya ukurasa huwa na kiunga cha haki za mwandishi, vihesabio, n.k.

    Kipengele cha "nav" - kinafafanua sehemu ya urambazaji wa tovuti:

    Kipengele cha "kando" kinafafanua sehemu inayohusiana kwa njia isiyo ya moja kwa moja na maudhui ya ukurasa, ambayo hutumiwa mara nyingi kama kiambatisho.
    Nini kipya katika HTML5? Tofauti kati ya HTML5 na HTML 4

    Vipimo vya HTML5 vinatanguliza mabadiliko mengi ya viwango na umuhimu tofauti. Kimsingi, mabadiliko muhimu yanaweza kugawanywa katika vizuizi 7:

    a) Semantiki (maana ya kisemantiki ya vitengo vya lugha)

    HTML5 inatanguliza idadi ya vitambulisho vipya vya kisemantiki ambavyo vinakuruhusu kupanga kwa maana zaidi muundo wa ndani wa kurasa za wavuti. Hii inajumuisha lebo zote mbili za kuzuia kama vile kijajuu, kijachini, makala, na lebo za lebo za maandishi kama vile alama, rubi, maelezo. Idadi ya lebo zilizopo za HTML4 zimetangazwa kuwa hazitumiki, lebo za kibinafsi zimebadilisha maana yake, na sifa zimepitia mabadiliko fulani.

    b) Multimedia

    HTML5 inaongeza usaidizi asilia kwa maudhui ya medianuwai (sauti na video) moja kwa moja kwenye lebo ya HMTL -- na API inayolingana ya usimamizi.

    c) Michoro

    Kufanya kazi na michoro kwa upande wa mteja imekuwa rahisi sana. HTML5 imeongeza kipengele cha turubai na API maalum ya JavaScript ya kufanya kazi nayo. Turubai ni "uso" unaobadilika ambao unaweza kuchora kwa utaratibu. HTML5 pia inajumuisha rasmi tagi ya svg, ambayo hukuruhusu kutekeleza michoro ya vekta iliyofafanuliwa na SVG ya kiwango cha wavuti kinacholingana (Scalable Vector Graphics).

    d) Fomu za wavuti

    Vipengele vipya vya fomu ya wavuti: aina na sifa zinazokuruhusu kupanua uwezo wa fomu za kitamaduni na zana zilizojengwa ndani bila kutumia maktaba ya ziada - kutoka kwa vidokezo kwenye uwanja wa uingizaji (kishikilia nafasi) na uthibitisho wa maadili yaliyoingizwa hadi vitu maalum ingiza tarehe na rangi.

    e) API za JavaScript.

    HTML5 inajumuisha uwezo mpya wa kusonga vitu (Buruta na Achia), kufanya kazi na historia ya mabadiliko (API ya Historia), pamoja na idadi ya vitu vidogo, kama vile uwezo wa kufanya maudhui yaweze kuhaririwa katika eneo la sasa kwa kutumia sifa zinazoweza Kuharirika za Maudhui. .

    e) DOCTYPE Mpya

    Lebo ya DOCTYPE ni sehemu kuu ya kurasa za wavuti zinazodai kuzingatia viwango: bila hiyo, msimbo hautapita kiidhinishi. DOCTYPE pia ni muhimu kwa ukurasa kuonyesha na kufanya kazi ipasavyo katika vivinjari vinavyotii viwango.

    Katika HTML 4 kulikuwa na aina 3 za kipengele:

    • 1. Mkali
    • 2. Mpito
    • 3. Na viunzi (Frameset)

    Mara nyingi, kuchagua kipengee kimoja au kingine cha DOCTYPE ilikuwa ngumu sana. Katika HTML5 DOCTYPE kuna moja tu, imeandikwa kama hii:

    Ingizo hili fupi linachukua nafasi ya fomu ya zamani, ndefu zaidi:

    g) Sintaksia

    HTML 5 itakuwa na syntaxes mbili - "desturi" HTML na XML. Sintaksia ya HTML inafafanua sheria za uchanganuzi za kina (pamoja na "kushughulikia makosa").

    Sintaksia ya XML inaoana na hati za XHTML1 na utekelezaji wake. Ili kutumia sintaksia hii, aina ya MIME (Multipurpose Internet Mail Extensions) lazima itangazwe kama aina ya XML, na vipengele lazima viundwe kulingana na vipimo vya XML.

    Kielelezo 2 - Sifa za Msingi za HTML5