Dit artikel, bijgewerkt in 2020, was oorspronkelijk gebaseerd op een hoofdstuk uit: HTML5 & CSS3 voor de echte wereld, door Alexis Goldstein, Louis Lazaris en Estelle Weyl.
Terwijl je HTML5 leert en nieuwe technieken aan je gereedschapskist toevoegt, wil je waarschijnlijk een standaardwerk voor jezelf bouwen van waaruit je al je op HTML5 gebaseerde projecten kunt beginnen. We moedigen dit aan en u kunt ook overwegen een van de vele online bronnen te gebruiken die een basis HTML5-startpunt voor u bieden.
In dit artikel bekijken we hoe je hiermee aan de slag kunt. Laten we eenvoudig beginnen, met een kale HTML5-pagina:
<!doctype html> <html lang="en">
<head> <meta charset="utf-8"> <title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/styles.css?v=1.0"> </head> <body> <script src="js/scripts.js"></script>
</body>
</html>
Laten we, nu dat basissjabloon aanwezig is, eens kijken naar enkele van de belangrijke delen van de opmaak en hoe deze kunnen verschillen van hoe HTML werd geschreven vóór HTML5.
Wat is HTML5?
- HTML5 is de huidige actieve specificatie voor HTML, of Hypertext Markup Language.
- HTML vormt de inhoudslaag van het web en biedt een manier om informatie te structureren op een manier die kan worden weergegeven door browsers en kan worden verwerkt door crawlers van zoekmachines.
- HTML5 werd oorspronkelijk uitgebracht in 2008 en heeft sindsdien extra functies toegevoegd. Het is een verbetering ten opzichte van eerdere versies door native multimedia-inhoud, ondersteuning voor SVG- en MathML-vectorafbeeldingen en nieuwe semantische documentelementen mogelijk te maken.
- HTML is op zichzelf nuttig, maar veel van zijn kracht wordt ontgrendeld door de andere lagen van het web. CSS is de stijllaag die bepaalt hoe deze inhoud wordt weergegeven. JavaScript is de gedragslaag die gebruikersinteractie en dynamische gegevensmanipulatie mogelijk maakt.
Het Doctype
Ten eerste hebben we de Document Type Declaration, of doctype. Dit is gewoon een manier om de browser - of een andere parser - te vertellen naar welk type document hij kijkt. In het geval van HTML-bestanden betekent dit de specifieke versie en smaak van HTML. Het doctype moet altijd het eerste item bovenaan een HTML-bestand zijn. Vele jaren geleden was de doctype-declaratie een lelijke en moeilijk te onthouden puinhoop. Voor XHTML 1.0 Strikt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
En voor HTML4 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Hoewel die lange reeks tekst bovenaan onze documenten ons niet echt pijn heeft gedaan (behalve dan de kijkers van onze sites te dwingen een paar extra bytes te downloaden), heeft HTML5 die onleesbare doorn in het oog gedaan. Nu heb je alleen nog dit nodig:
<!doctype html>
Simpel, en to the point. Het doctype kan worden geschreven in hoofdletters, kleine letters of gemengde letters. U zult merken dat de "5" opvallend ontbreekt in de aangifte. Hoewel de huidige iteratie van webopmaak bekend staat als 'HTML5', is het eigenlijk gewoon een evolutie van eerdere HTML-standaarden - en toekomstige specificaties zullen gewoon een ontwikkeling zijn van wat we vandaag hebben.
Omdat browsers gewoonlijk alle bestaande inhoud op het web moeten ondersteunen, is er geen afhankelijkheid van het doctype om hen te vertellen welke functies in een bepaald document moeten worden ondersteund. Met andere woorden, het doctype alleen zal uw pagina's niet HTML5-compatibel maken. Het is echt aan de browser om dit te doen. In feite kunt u een van die twee oudere doctypes gebruiken met nieuwe HTML5-elementen op de pagina en de pagina wordt hetzelfde weergegeven als wanneer u het nieuwe doctype zou gebruiken.
De html Element
De volgende in elk HTML-document is de html element, dat niet significant is veranderd met HTML5. In ons voorbeeld hebben we de lang attribuut met een waarde van en, die aangeeft dat het document in het Engels is. In op XHTML gebaseerde syntaxis moet u een xmlns attribuut. In HTML5 is dit niet langer nodig, en zelfs de lang attribuut is niet nodig om het document te valideren of correct te laten functioneren.
Dus dit is wat we tot nu toe hebben, inclusief de afsluiting </html> label:
<!doctype html>
<html lang="en"> </html>
De head Element
Het volgende deel van onze pagina is de <head> sectie. De eerste regel binnen de head is degene die de tekencodering voor het document definieert. Dit is een ander element dat is vereenvoudigd sinds XHTML en HTML4, en is een optionele functie, maar wordt aanbevolen. In het verleden heb je het misschien zo geschreven:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5 verbetert dit door de tekencodering te verminderen <meta> tag tot het absolute minimum:
<meta charset="utf-8">
In bijna alle gevallen is utf-8 is de waarde die u in uw documenten gaat gebruiken. Een volledige uitleg van karaktercodering valt buiten het bestek van dit artikel, en het zal waarschijnlijk ook niet zo interessant voor je zijn. Desalniettemin, als je wat dieper wilt graven, kun je het onderwerp lezen op W3C or WATWG.
Opmerking: om ervoor te zorgen dat alle browsers de tekencodering correct lezen, moet de volledige tekencoderingsdeclaratie ergens binnen de eerste 512 tekens van uw document worden opgenomen. Het zou ook moeten verschijnen voor op inhoud gebaseerde elementen (zoals de <title> element dat erop volgt in onze voorbeeldsite).
We zouden nog veel meer over dit onderwerp kunnen schrijven, maar we willen je wakker houden - dus die details besparen we je! Voor nu accepteren we deze vereenvoudigde aangifte en gaan we verder met het volgende deel van ons document:
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/styles.css?v=1.0">
In deze regels verschilt HTML5 nauwelijks van eerdere syntaxis. De paginatitel (het enige verplichte element in de head) wordt hetzelfde verklaard als altijd, en de metatags die we hebben toegevoegd zijn slechts optionele voorbeelden om aan te geven waar deze zouden worden geplaatst; je zou kunnen zetten zoveel geldig meta geeft je de mogelijkheid hier zoals je wilt.
Het belangrijkste onderdeel van dit stuk opmaak is de stylesheet, die is opgenomen met behulp van de gebruikelijke link element. Er zijn geen vereiste attributen voor link dan href en rel. De type attribuut (wat gebruikelijk was in oudere versies van HTML) is niet nodig, en het was ook nooit nodig om het inhoudstype van de stylesheet aan te geven.
Het speelveld nivelleren
Toen HTML5 werd geïntroduceerd, bevatte het een aantal nieuwe elementen, zoals: article en section. Je zou denken dat dit een groot probleem zou zijn voor oudere browserondersteuning voor niet-herkende elementen, maar je zou het mis hebben. Dit komt omdat de meeste browsers er niet om geven welke tags u gebruikt. Als u een HTML-document had met a recipe tag (of zelfs een ziggy tag) erin, en je CSS koppelde wat stijlen aan dat element, bijna elke browser zou doorgaan alsof dit volkomen normaal was, en je stijl toepassen zonder te klagen.
Natuurlijk zou zo'n hypothetisch document niet valideren en zou het toegankelijkheidsproblemen kunnen hebben, maar het zou correct worden weergegeven in bijna alle browsers - met uitzondering van oude versies van Internet Explorer (IE). Vóór versie 9 voorkwam IE dat niet-herkende elementen styling kregen. Deze mysterieuze elementen werden door de rendering-engine gezien als 'onbekende elementen', dus je kon de manier waarop ze eruitzagen of zich gedroegen niet veranderen. Dit omvat niet alleen onze ingebeelde elementen, maar ook alle elementen die nog moesten worden gedefinieerd op het moment dat die browserversies werden ontwikkeld. Dat betekent (je raadt het al) de nieuwe HTML5-elementen.
Het goede nieuws is dat het gebruik van IE tegenwoordig is afgenomen, waarbij IE11 is gedaald tot ongeveer 2.7% wereldwijd gebruik (vanaf 2018), en eerdere versies vrijwel van de kaart zijn verdwenen. (U kunt statistieken over browsergebruik en ondersteuning voor HTML5-functies in het algemeen bekijken op de Kan ik gebruiken website.)
als u werkelijk moet oude browsers ondersteunen, maar je kunt nog steeds de vertrouwde HTML5 Shiva, een heel eenvoudig stukje JavaScript dat oorspronkelijk is ontwikkeld door John Resig. Geïnspireerd door een idee van Sjoerd Visscher, maakte het de nieuwe HTML5-elementen stijlbaar in oudere versies van IE. Maar eigenlijk zou dit nu niet nodig moeten zijn. Zoals aangegeven door Kan ik gebruiken, HTML5-elementen worden ondersteund in alle moderne browsers en zelfs in hun meest recente oudere versies. (Klik op de optie "Alles weergeven" om alle browserversies te zien.) De enige uitzondering is dat sommige browsers de nieuwere main element. Voor die browsers kun je dit element echter nog steeds gebruiken, zolang je de juiste stijl toevoegt (zoals het instellen als een blokelement.)
De rest is geschiedenis
Als we naar de rest van onze startsjabloon kijken, hebben we de gebruikelijke body element samen met de afsluitende tag en de afsluitende html label. We hebben ook een verwijzing naar een JavaScript-bestand in a script element.
Net als de link tag eerder besproken, de <script> tag vereist niet dat u a . declareert type attribuut. Als je ooit XHTML hebt geschreven, herinner je je misschien je script tags zien er als volgt uit:
<script src="js/scripts.js" type="text/javascript"></script>
Aangezien JavaScript, voor alle praktische doeleinden, de enige echte scripttaal is die op het web wordt gebruikt, en aangezien alle browsers ervan uitgaan dat u JavaScript gebruikt, zelfs als u dat niet expliciet aangeeft, is de type attribuut is niet nodig in HTML5-documenten:
<script src="js/scripts.js"></script>
We hebben de script element onderaan onze pagina om te voldoen aan de best practices voor het insluiten van JavaScript. Dit heeft te maken met de laadsnelheid van de pagina; wanneer een browser een script tegenkomt, pauzeert het het downloaden en renderen van de rest van de pagina terwijl het het script ontleedt. Dit heeft tot gevolg dat de pagina veel langzamer lijkt te laden wanneer grote scripts bovenaan de pagina worden geplaatst vóór de inhoud. Daarom moeten de meeste scripts helemaal onderaan de pagina worden geplaatst, zodat ze pas worden geparseerd nadat de rest van de pagina is geladen.
In sommige gevallen (zoals bij de HTML5 shiv) kan het script echter genoodzaakt bent moet in de kop van uw document worden geplaatst, omdat u wilt dat het van kracht wordt voordat de browser de pagina begint weer te geven.
Volgende stappen
Een manier om uw HTML5 naar een hoger niveau te tillen, is door de HTML5-ketelplaat. Deze regelmatig bijgewerkte bron biedt een handig startpunt voor uw projecten, met de nieuwste best practices die zijn opgesteld door honderden van 's werelds beste programmeurs. Het is de moeite waard om te downloaden en te bekijken, zelfs als je gewoon de code wilt doorzoeken en wilt zien hoe bepaalde elementen tegenwoordig worden gebruikt, zoals de verschillende meta-elementen die in het hoofd van het document te vinden zijn.
Begin vertrouwd te raken met handgecodeerde HTML5 en CSS3 met onze hulpbron, HTML5 & CSS3 voor de echte wereld. Je leert alles, van de basis van semantische HTML-opmaak tot aansprekende stijltechnieken.
Een andere manier om de ontwikkeling van uw website of webapp naar een hoger niveau te tillen, is door een van de moderne frameworks te proberen die tegenwoordig veel worden gebruikt. Bekijk bijvoorbeeld de uitgebreide bronnen van SitePoint op: Reageren en Angular.
Bron: https://www.sitepoint.com/a-basic-html5-template/?utm_source=rss
