De HTML5-standaard werd voltooid en uitgebracht in 2014, en het is wat HTML had moeten zijn toen de eerste versie al die jaren geleden werd gelanceerd. HTML 2.0 was de eerste echte 'standaard', die helemaal in 1995 werd gepubliceerd. Twee jaar later werd HTML 3 gepubliceerd. Nog twee jaar later werd HTML 4.01 geïntroduceerd en is het sindsdien het werkpaard van het internet.
Het eerste 'werkende concept' van HTML5 werd al in 2008 geïntroduceerd, met destijds een verrassend brede browserondersteuning. De HTML5 die we vandaag kennen, verschilt sterk van de HTML uit het verleden, en hier gaan we bespreken wat de nieuwste standaard is veranderd met de release. Sinds de lancering van HTML5 is het algemeen geaccepteerd en worden alle functies en mogelijkheden nu ondersteund door alle belangrijke browsers. Er zijn hier en daar nog steeds een paar minpuntjes, maar over het algemeen is HTML5 goed geassimileerd met de moderne online ervaring.
Als webontwikkelaar kun je een oude professional zijn die de oudere normen onder de knie heeft of een nieuwkomer die nieuwsgierig de ontwikkeling van nieuwe normen aan de zijlijn bekijkt. Hoe dan ook, je moet uiteindelijk beginnen met de overgang naar HTML5.
HTML versus HTML5 Infographic
De eerste stap naar de overgang naar HTML5 of leren is het verschil te begrijpen tussen de oudere standaard en de nieuwste. Hier zijn enkele belangrijke verschillen tussen HTML en HTML5:
-
HTML5 is een levende taal
HTML5 is een levende taal, een werk in uitvoering. Het is verbazingwekkend om te zien wat HTML5 kan doen, maar het is ook belangrijk om te weten dat HTML5 geen volledig gestandaardiseerde versie is, zoals HTML4, die meer dan tien jaar oud is en een vaste standaard, onveranderlijk.
Als u HTML5 gebruikt, moet u enkele updates uitvoeren. Attributen en elementen worden elk jaar toegevoegd en regelmatig aangepast. Dit hangt ook af van hoeveel je rijke elementen gebruikt, maar het is absoluut een van de risico's die gepaard gaan met het gebruik van een vloeiende, veranderende taal zoals HTML5.
-
HTML5 is eenvoudiger
Hoewel HTML5 risico's heeft zoals constante updates, is het over het algemeen eenvoudig om de wijzigingen en updates bij te houden vanwege de eenvoudigere syntaxis in vergelijking met HTML4. U hebt bijvoorbeeld een heel eenvoudige verklaring aan het begin van de pagina om deze in te stellen als HTML5-pagina:
De eenvoudige Doctype-aangifte is een van de vereenvoudigingen in de HTML-syntaxis, die compatibel is met alle versies van HTML4 en helemaal terug tot XHTML1. HTML5 is echter niet compatibel met SGML.
Aanbevolen cursussen
- Gratis Python Programming Training
- Certificeringcursus gratis software testen
- Gratis programmeercursussen voor Java
- Voltooi PERL cursus
-
Het nieuwe element
HTML5 wordt geleverd met een aantal nieuwe elementen en elimineert verschillende andere (die we later zullen behandelen), maar een van de belangrijkste toegevoegde elementen is, die het gebruik van Adobe Flash op websites enorm heeft beïnvloed. Hoewel Flash nog steeds in gebruik is door verschillende websites, is HTML5 veel overgenomen en veel mensen denken dat het Flash uiteindelijk overbodig zal maken. Alleen de tijd zal dat beslissen; tot die tijd heeft het cascade-element van HTML5 bewezen een goed alternatief te zijn voor Flash.
Het element kan worden gebruikt om afbeeldingen met verschillende vormen en kleuren te tekenen via scripting, meestal JavaScript. Het element is gewoon een container voor de afbeeldingen; u moet een script gebruiken om de afbeeldingen te definiëren. Standaard is een canvas een rechthoekig gebied zonder inhoud of randen. De markt ziet er zo uit:
Het is belangrijk om een id-kenmerk en breedte en hoogte op te geven voor het definiëren van de canvasgrootte. U kunt een stijlkenmerk toevoegen om randen te definiëren.
U kunt ook JavaScript gebruiken, zoals in het volgende voorbeeld:
var c = document.getElementById ("myCanvas");
var ctx = c.getContext ("2d");
ctx.fillStyle = "# FF0000";
ctx.fillRect (0, 0, 150, 75);
-
De nieuwe en elementen
Een andere grote toevoeging die HTML5 met zich meebrengt, zijn de nieuwe elementen en elementen, die een nieuwe webanatomie aangeven. Met deze nieuwe tags is het niet langer nodig om de twee elementen met een tag te identificeren.
De specificaties definiëren het header-element als een groep van 'navigatie-' of 'inleidende' hulpmiddelen. Als zodanig kan het element worden gebruikt om een inleiding op een gedeelte van een pagina of op de hele pagina zelf te definiëren. Hier is een codefragment dat het header-element gebruikt.
Titel
Door auteur Opgeslagen in Web 2.0
Tekstgedeelte
De HTML5-specificaties verwijzen naar het voetelement als 'een voettekst voor zijn dichtstbijzijnde voorouder die content of sectioning root-element scheidt', en in het algemeen informatie over de sectie bevat, zoals de auteursnaam, auteursrechtgegevens, links naar documenten, enzovoort.
Logischerwijs wordt de voettekst onderaan de webpagina geplaatst. Maar het kan ook aan het einde van een paginasectie worden geplaatst. Hier is een voorbeeldcodering die het voettekstelement gebruikt:
Inhoudstitel
Door auteur Opgeslagen in Web 2.0
Tekstgedeelte.
Tags: opdrachtprompt, kompas, CSS, Sass, Terminal
10 likes
Hier bevat de voettekst berichttags en het bericht 'Facebook likes'.
-
De en elementen
Als je nu de bovenstaande voorbeelden hebt doorgenomen, zou je nog een paar nieuwe elementen hebben opgemerkt, zoals de. Dit element, samen met het element, stelt u in staat om specifieke delen van uw lay-out te markeren en zijn enorm voordelig voor zoekmachineoptimalisatie. Het artikelelement wordt gespecificeerd als een op zichzelf staand onderdeel van een webpagina dat onafhankelijk herbruikbaar of verspreidbaar is. Dit kan een krant, forumbericht, tijdschriftartikel, blogbericht of iets anders zijn.
Het artikelelement heeft meestal een eigen kop in een koptekstelement, en misschien zelfs een voettekst, zoals u in het bovenstaande voorbeeld zag. Je kunt het element eenvoudigweg zien als een blogbericht of een onafhankelijk stuk inhoud; het lastige deel is het identificeren van wat onafhankelijk is. Simpel gezegd, een onafhankelijk stuk inhoud is er een die op zichzelf logisch is.
Een goede manier om te weten of een stuk inhoud onafhankelijk is, is door te vragen of het zinvol is in een RSS-feed. Blogartikelen en statische pagina's zijn logisch en sommige sites hebben commentaarfeeds. Maar een paragraaf in artikel zou geen enkele zin hebben los van de rest van de inhoud. Hier is een codefragment met voettekst en publicatietags.
Inhoudstitel
Gepubliceerd: 24-02-2016
Tekstgedeelte
Creative Commons Naamsvermelding-Gelijk delen Licentie
Het sectie-element, volgens de W3C-specificaties, die een 'generieke sectie' van een applicatie of document vertegenwoordigt. Het kan worden verward met de tag, dus laten we de verwarring nu wegnemen. De sectietag wordt gebruikt wanneer de inhoud erin moet worden gegroepeerd gescheiden van de rest van de pagina met een enkel thema, en wanneer het moet worden gezien als een item in het paginaoverzicht. Het div-element wordt echter gespecificeerd als een 'generieke container', wat betekent dat het niet los staat van de hoofdpagina zelf, afgezien van zijn eigen titel-, taal- en klassenattributen.
-
Nieuw en elementen
De nieuwe en elementen van HTML5 maken deel uit van de Interactive Elements-specificaties, maar behoren tot de minst besproken elementen door ontwikkelaars. Gezien het feit dat internet is veranderd in meer alleen gelinkte pagina's en documenten, zijn deze elementen een welkome aanvulling voor meer interactiviteit op het web.
Het element moet niet worden verward met het element, dat is gedefinieerd als een HTML-navigatietag die het paginanavigatieblok vertegenwoordigt. Het bevat meestal koppelingen waarmee gebruikers door secties binnen de pagina of naar een andere pagina kunnen springen. Aan de andere kant vertegenwoordigt de menutag menuopdrachten voor eenvoud in desktop- en mobiele applicaties. Hier is een voorbeeld van het element in actie:
Hallo Wereld
Ondertussen is het element een andere manier om afbeeldingen en tekst te rangschikken. Het wordt samen met het element gebruikt om illustraties, diagrammen en foto's te markeren. Hieronder wordt een kort codefragment weergegeven dat beide elementen in actie bevat.
-
Nieuw en elementen
Dit zijn twee belangrijke toevoegingen aan de HTML5-standaard. Met de audiotag kunnen ontwikkelaars, net als de videotag, muziek en audio insluiten op hun website. In tegenstelling tot de vorige standaard, bent u niet beperkt tot het toevoegen van midi-muziek, hoewel er nog enkele beperkingen zijn aan het type bestanden dat wordt gebruikt. De meeste Webkit-gerelateerde browsers ondersteunen reguliere MP3-bestanden, maar anderen ondersteunen alleen het OGG-formaat. Het goede nieuws is dat er heel veel bestandsconverters zijn en dat u eenvoudig twee versies van het audiobestand kunt leveren; de juiste versie wordt automatisch opgehaald.
U kunt de audiotag gebruiken als elk ander element. Hier is een voorbeeldfragment:
De audiotag heeft ook een aantal attributen voor extra besturingselementen, waaronder gebeurtenisattributen, en de gebeurtenissen omvatten venstergebeurtenissen, vormgebeurtenissen, mediagebeurtenissen en muisgebeurtenissen. Het video-element heeft ook een aantal inhoudsattributen, waaronder SRC, globale attributen, loop, controle, preload en poster. De kenmerken SRC, loop, autoplay en besturingselementen spreken voor zich en zijn hetzelfde voor alle media-elementen, terwijl de algemene kenmerken voor alle elementen gelden. Ze omvatten dir, verborgen, contextmenu en meer.
Er zijn een paar andere multimedia-attributen en -elementen die bij HTML5 worden geleverd, zoals het track-element dat teksttracks biedt voor het video-element.
-
Nieuwe vormen
HTML5 wordt nu geleverd met vorm en elementen. Als u niet van plan bent veel tabellen op de pagina te gebruiken, kunt u het kenmerk ook verwijderen en de wijzigingen bekijken voordat u verder gaat.
-
Niet meer en elementen
Dit betekent dat alle kenmerken waarmee ontwikkelaars een perfect opgemaakte, getinte tabel kunnen maken, zoals de rand, bgcolor, uitlijnen, hoogte, regels en meer. Al deze attributen worden vervangen door CSS.
-
Niet meer en
Dit is geweldig voor ontwikkelaars die de vroege dagen van HTML hebben doorgewerkt. De attributen frameset, frame en noframes zijn volledig verwijderd, samen met andere zoals knipperen, basefont en meer. U moet beheren zonder tabellen te gebruiken voor de lay-out. Tabellen maken nog steeds deel uit van HTML5, maar zijn niet langer bedoeld voor pixels. Volgens de specificaties mogen tabellen niet worden gebruikt voor lay-outhulpmiddelen en voor het beheren van de paginalay-out.
Conclusie
Zoals u duidelijk kunt zien, zijn er veel wijzigingen in HTML5 en u moet het voorzichtig en voorzichtig gebruiken. U moet ook uw kennis over de taal bijwerken, aangezien deze in de loop van de tijd verandert en meer updates krijgt. Je moet stoppen met het gebruik van elementen die HTML5 uit zichzelf heeft verwijderd en de nieuwe HTML5-elementen gebruiken die zeker blijven, zoals de kop- of voetteksttags.
Wat je hierboven hebt gezien, is de vereenvoudigde versie van hoeveel HTML5-wijzigingen zijn aangebracht met de lancering. Maar laten we eerlijk zijn; er is niets eenvoudigs of langzaams in de manier waarop HTML5 wordt overgenomen, en de nieuwe standaard voegt veel mogelijkheden toe die cruciaal zijn voor een moderne gebruikerservaring. Je moet de nieuwe taal bijhouden en ook wat CSS leren, dat een grotere rol speelt dan voorheen.
Het mooie van deze veranderingen is dat ze, hoewel ze groot zijn, ten goede zijn en dit wordt begrepen door alle betrokken belanghebbenden. Browsers worden krachtiger naarmate ze zich in de richting van de cloud verplaatsen, met de mogelijkheid om meer zelf aan te kunnen. Met dingen zoals Ajax en met video- en audio-integratie enzovoort, wordt het veel eenvoudiger om op een eenvoudige manier te coderen en de browser de zware taak te laten uitvoeren. Nieuwe structuurelementen zoals figuur, voettekst, samenvatting en sectie verwijzen bijvoorbeeld allemaal naar de documentstructuur en de weergave wordt overgelaten aan de browser.
Gerelateerde artikelen:-
Hier zijn enkele artikelen die u zullen helpen om meer details over de HTML versus HTML5 te krijgen, dus ga gewoon door de link.
- HTML en XML
- HTML5 versus Flash Top 9 verschillen (met infographics)
- HTML versus XHTML
- HTML5 versus Flash
- Verbazingwekkende verschillen HTML5 versus JavaScript
- 10 geweldige handige tips voor het programmeren van Python (trucs)