HTML5-standarden ble ferdigstilt og utgitt i 2014, og det er hva HTML burde vært da den første versjonen ble lansert for alle disse årene siden. HTML 2.0 var den første sanne 'standard', utgitt helt tilbake i 1995. To år senere ble HTML 3 utgitt. Ytterligere to år senere ble HTML 4.01 introdusert, og det har vært arbeidshesten på internett siden den gang.
Det første 'arbeidsutkastet' av HTML5 ble introdusert allerede i 2008, med overraskende bred nettleserstøtte den gang. HTML5 som vi kjenner i dag, er veldig forskjellig fra fortidens HTML, og her skal vi diskutere hva den nyeste standarden endret med utgivelsen. Siden HTML5 ble lansert, har den blitt godtatt, og alle funksjonene og funksjonene støttes nå av alle store nettlesere. Det er fremdeles noen hikke her og der, men samlet sett har HTML5 assimilert godt med den moderne online-opplevelsen.
Som nettutvikler kan du enten være en gammel proff som har mestret de eldre standardene eller en nybegynner nysgjerrig og ser på utviklingen av nye standarder på sidelinjen. Uansett må du til slutt begynne å gå over til HTML5.
HTML Vs HTML5 Infographic
Det første trinnet til overgang til HTML5 eller læring er å forstå forskjellen mellom den eldre og den nyeste. Her er noen viktige forskjeller mellom HTML og HTML5:
-
HTML5 er et levende språk
HTML5 er et levende språk, et arbeid som pågår. Det er utrolig å se hva HTML5 kan gjøre, men det er også viktig å vite at HTML5 ikke er en fullt standardisert versjon som HTML4, som er mer enn ti år gammel og en standard som ikke kan skiftes.
Hvis du kommer inn på HTML5, må du gjøre noen oppdateringer. Attributter og elementer legges til og endres regelmessig hvert år. Dette avhenger også av hvor mye du bruker rike elementer, men det er definitivt en av risikoen som er forbundet med å bruke et flytende, skiftende språk som HTML5.
-
HTML5 er enklere
Selv om HTML5 har risikoer som konstante oppdateringer, er det generelt lett å følge med på endringene og oppdateringene på grunn av den enklere syntaks sammenlignet med HTML4. For eksempel har du en veldig enkel erklæring på begynnelsen av siden for å angi den som en HTML5-side:
Den enkle Doctype-deklarasjonen er en av forenklingene som er gjort i HTML-syntaks, som er kompatibel med alle versjoner fra HTML4 og helt tilbake til XHTML1. HTML5 er imidlertid ikke kompatibel med SGML.
Anbefalte kurs
- Gratis Python-programmeringstrening
- Sertifiseringskurs for programvaretesting
- Gratis Java-programmeringskurs
- Fullfør PERL-kurs
-
Det nye elementet
HTML5 kommer med en rekke nye elementer og eliminerer flere andre (som vi vil dekke om en stund), men et av de viktigste elementene som er lagt til er, som har påvirket bruken av Adobe Flash på nettsteder enormt. Selv om Flash fortsatt er i bruk av flere nettsteder, har HTML5 blitt adoptert mange og mange tror at det vil gjøre Flash foreldet til slutt. Bare tiden bestemmer det; frem til da har HTML5s kaskadeelement vist seg å være et godt alternativ til Flash.
Elementet kan brukes til å tegne grafikk med forskjellige former og farger via scripting, vanligvis JavaScript. Elementet er ganske enkelt en beholder for grafikken; du må bruke et skript for å definere grafikken. Som standard er et lerret et rektangulært område uten innhold eller grenser. Markedet er slik:
Det er viktig å spesifisere et ID-attributt så vel som bredde og høyde for å definere lerretsstørrelse. Du kan legge til et stilattributt for å definere grenser.
Du kan også bruke JavaScript, som følgende eksempel:
var c = document.getElementById (“myCanvas”);
var ctx = c.getContext (“2d”);
ctx.fillStyle = “# FF0000”;
ctx.fillRect (0, 0, 150, 75);
-
Den nye og elementene
Et annet stort tillegg som HTML5 kommer med er det nye og elementene, noe som indikerer en ny nettanatomi. Med disse nye taggene er det ikke lenger behov for å identifisere de to elementene med en tag.
Spesifikasjonene definerer overskriftselementet som representerer en gruppe 'navigasjons' eller 'introduksjons' hjelpemidler. Som sådan kan elementet brukes til å definere en introduksjon til en del av en side, eller til hele siden. Her er et kodebit som bruker headerelementet.
Tittel
Av forfatter Filed in Web 2.0
Tekstdel
HTML5-spesifikasjonene refererer til fotelementet som representerer "en bunntekst for det nærmeste forfedresnittinnhold eller seksjonering av rotelement", og inneholder vanligvis informasjon om seksjonen, for eksempel forfatternavnet, opphavsrettsdata, koblinger til dokumenter og så videre.
Logisk sett er bunnteksten plassert nederst på websiden. Men det kan også plasseres på slutten av en sideseksjon. Her er noen eksempler på koding som bruker bunntekstelementet:
Innholdstittel
Av forfatter Filed in Web 2.0
Tekstdel.
Tagger: Kommandoprompt, kompass, CSS, Sass, terminal
10 likes
Her inneholder bunnteksten innleggskoder og innlegget 'Facebook likes'.
-
Elementene og
Hvis du nå gikk gjennom eksemplene ovenfor, ville du lagt merke til noen flere nye elementer, som. Dette elementet, sammen med elementet, gjør det mulig for deg å merke bestemte deler av oppsettet ditt og er enormt fordelaktig for søkemotoroptimalisering. Artikkelelementet er spesifisert som å representere en selvstendig komponent på en webside som uavhengig kan brukes eller distribueres. Dette kan være en avis, foruminnlegg, magasinartikkel, blogginnlegg eller noe annet.
Artikkelelementet har generelt en egen overskrift i et topptekstelement, og kanskje til og med en bunntekst, som du så i eksemplet ovenfor. Du kan ganske enkelt tenke på elementet som et blogginnlegg eller et uavhengig innhold. den vanskelige delen er å identifisere hva som er uavhengig. Enkelt sagt er et uavhengig innholdsinnhold som gir mening av seg selv.
En god måte å vite om et innhold er uavhengig er ved å spørre om det er fornuftig i en RSS-feed. Bloggartikler og statiske sider gir mening, og noen nettsteder har kommentarstrømmer. Men et avsnitt i artikkelen ville ikke gi noen mening atskilt fra resten av innholdet. Her er et kodebit med bunntekst og publiseringsmerker.
Innholdstittel
Publisert: 2016-02-24
Tekstdel
Creative Commons Attribution-ShareAlike lisens
Seksjonselementet, i henhold til W3C-spesifikasjoner, som representerer en 'generisk seksjon' i en applikasjon eller et dokument. Det kan forveksles med koden, så la oss fjerne klar forvirring akkurat nå. Seksjonskoden brukes når innholdet i det må grupperes atskilt fra resten av siden med et enkelt tema, og når det skal sees på som en oppføring i sideoversikten. Div-elementet er imidlertid spesifisert som en "generisk beholder", noe som betyr at det ikke er atskilt fra selve siden, bortsett fra sin egen tittel, språk og klasseattributter.
-
Nye og elementer
HTML5s nye og elementer er en del av Interactive Elements-spesifikasjonene, men er blant de minst omtalte elementene av utviklere. Med tanke på at nettet har endret seg til mer nettopp koblede sider og dokumenter, er disse elementene et kjærkomment tilskudd for større nettinteraktivitet.
Elementet skal ikke forveksles med elementet, som er definert som en HTML-navigasjonsbrikke som representerer navigasjonsblokken for siden. Den inneholder vanligvis koblinger for brukere å hoppe gjennom seksjoner på siden eller til en annen side. På den annen side representerer menykoden menykommandoer for enkelhet i stasjonære og mobile applikasjoner. Her er et eksempel på elementet i handling:
Hei Verden
I mellomtiden er elementet en annen måte å arrangere bilder og tekst på. Det brukes sammen med elementet for å merke opp illustrasjoner, diagrammer og bilder. Nedenfor er en kort kodebit som inneholder begge elementene i aksjon.
-
Nye og elementer
Dette er to viktige tillegg til HTML5-standarden. Lydkoden, som videokoden, gjør det mulig for utviklere å legge inn musikk og lyd på nettstedet deres. I motsetning til forrige standard, er du ikke begrenset til å legge til midi-musikk, selv om det fremdeles er noen begrensninger i typen filer som brukes. De fleste Webkit-relaterte nettlesere støtter vanlige MP3-filer, men andre støtter bare OGG-format. Den gode nyheten er at det er mange filkonvertere, og du kan ganske enkelt levere to versjoner av lydfilen; riktig versjon blir hentet automatisk.
Du kan bruke lydmerket som alle andre elementer. Her er et eksempelutdrag:
Audio taggen har også en rekke attributter for ekstra kontroller, inkludert hendelsesattributter, og hendelsene inkluderer vinduhendelser, formhendelser, mediehendelser og musebegivenheter. Videoelementet har også en rekke innholdsattributter, inkludert SRC, globale attributter, loop, kontroll, forhåndsinnlasting og plakat. Attribusjonene SRC, loop, autoplay og kontroller er ganske selvforklarende og de samme for alle medieelementer, mens de globale attributtene er vanlige for alle elementene. De inkluderer dir, skjult, hurtigmeny og mer.
Det er noen få andre multimediaattributter og elementer som følger med HTML5, som sporelementet som gir tekstspor for videoelementet.
-
Nye former
HTML5 kommer nå med form og elementer. Hvis du ikke planlegger å bruke mange tabeller på siden, kan du også fjerne attributtet og se på endringene som er gjort før du går videre.
-
Ikke flere elementer
Dette betyr at alle attributtene som gjør det mulig for utviklere å lage et perfekt opplagt, tonet bord, for eksempel grensen, bgcolor, align, høyde, regler og mer. Alle disse attributtene blir erstattet av CSS.
-
No More, og
Dette er flott for de utviklerne som jobbet gjennom de tidlige dagene av HTML. Attributtene for rammesett, ramme og noframes er fjernet helt, sammen med andre som blink, basefont og mer. Du må administrere uten å bruke tabeller for oppsettet. Tabeller er fortsatt en del av HTML5, men de er ikke ment for piksler lenger. Spesifikasjonene sier at tabeller ikke skal brukes til layouthjelpemidler og for å kontrollere sideoppsettet.
Konklusjon
Som du tydelig ser, er det mange endringer i HTML5, og du må bruke den med forsiktighet og forsiktighet. Du må også oppdatere kunnskapen din om språket ettersom det endres over tid og får flere oppdateringer. Du må stoppe bruken av elementer som HTML5 har fjernet fra seg selv og bruke de nye HTML5-elementene som definitivt vil forbli, for eksempel topptekst- eller bunntekstkodene.
Det du har sett over er den bare forenklede versjonen av hvor mange endringer HTML5 har gjort med lanseringen. Men la oss være ærlige her; det er ikke noe enkelt eller tregt i måten HTML5 blir tatt i bruk, og den nye standarden tilfører mange muligheter som er avgjørende for en moderne brukeropplevelse. Du må følge med på det nye språket og også lære litt CSS, som har en større rolle enn før.
Det gode med disse endringene er at selv om de er store, er de til det bedre, og dette blir forstått av alle interessenter som er involvert her. Nettlesere vil være kraftigere når de beveger seg mot skyen, med muligheten til å håndtere mer av seg selv. Med ting som Ajax og med video- og lydinnstøting og så videre, vil det være så mye enklere å kode på en grei metode og la nettleseren ta på seg tunge oppgaver. For eksempel blir nye strukturelementer som figur, bunntekst, sammendrag og seksjon alle henvist til dokumentstrukturen og gjengivelsen overlates til nettleseren.
Relaterte artikler:-
Her er noen artikler som vil hjelpe deg med å få mer detaljert informasjon om HTML vs HTML5, så bare gå gjennom lenken.
- HTML og XML
- HTML5 vs Flash Topp 9 forskjeller (med Infographics)
- HTML vs XHTML
- HTML5 vs Flash
- Fantastiske forskjeller HTML5 vs JavaScript
- 10 fantastiske nyttige tips om Python-programmering (triks)