Overzicht van HTML5 nieuwe elementen
Sinds 1999, toen HTML 4.01 een standaard werd, is het web en het gebruik van het web aanzienlijk veranderd. De W3C heeft besloten de fundamentele HTML-syntaxis te wijzigen van Standard Generalized Markup Language (SGML) in XML, en ook volledig verschillende markup-talen zoals Scalable Vector Graphics (SVG), XForms en MathML. Momenteel zijn sommige HTML 4.01-componenten verouderd, nooit gebruikt of niet gebruikt zoals verwacht. Elk deel van de componenten in HTML5 wordt verplaatst of opnieuw samengesteld. HTML5 bevat nieuwe elementen voor het illustreren van de weergave, het weergeven van digitale inhoud, een verbeterde pagina-indeling en algemene functionaliteit, en verschillende nieuwe interfaces om de internetvereisten van vandaag correct aan te pakken.
Er zijn verschillende nieuwe elementen geïntroduceerd in HTML5, die bepaalde extra functies bieden om een gewenste en interactieve site te ontwikkelen. We kunnen uw code snel en efficiënt maken met behulp van dergelijke componenten. Vanwege het gebrek aan structuur zijn veel goed gevormde HTML-documenten moeilijker te hanteren dan nodig is. Door het evalueren van koptekstschalen moeten we weten waar de segmentafbrekingen naartoe gaan. Het div-element identificeert zijbalken, voetteksten, kopteksten, navigatiemenu's en belangrijke inhoudsonderdelen.
Top 10 HTML5 nieuwe elementen
HTML5 biedt nieuwe elementen om de lay-out van het document te verbeteren.
1.
Het element geeft een gedeelte van een pagina aan dat een afzonderlijke structuur in een document, sectie of website bevat en dat wordt aanbevolen om breed te worden verspreid of bruikbaar. Dit kan een groep zijn die een dagboek publiceert of een dagblad, een inzending voor een online nieuwsbrief, een opmerking van een klant of een ander stofvrij object.
Voorbeeld:
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Output:
- Sla de bovenstaande code op in een bestand met de extensie .html.
- Voer het html-bestand in een browser uit en u krijgt de uitvoer zoals weergegeven in de onderstaande afbeelding.
2.
Het element geeft op veel manieren individuele inhoud aan, zoals categorisaties, kaarten, afbeeldingen, code-artikelen en nog veel meer.
Voorbeeld:
Figure Element
EDUCBA is een toonaangevende wereldwijde aanbieder van op vaardigheden gebaseerd onderwijs dat voorziet in de behoeften van meer dan 500.000 leden in meer dan 40 landen.
Output:
De bovenstaande code produceert de uitvoer zoals weergegeven in de onderstaande afbeelding,
3.
Het element wordt gebruikt om een beschrijving voor de afbeelding toe te voegen.
Voorbeeld:
Figure Caption Element
EDUCBA is een toonaangevende wereldwijde aanbieder van op vaardigheden gebaseerd onderwijs dat voorziet in de behoeften van meer dan 500.000 leden in meer dan 40 landen.
EDUCBA (Corporate Bridge Consultancy Pvt Ltd)
Output:
De bovenstaande code geeft het resultaat weer zoals weergegeven in de onderstaande afbeelding,
4.
Het element wordt gebruikt voor het opgeven van de koptekst voor een document of een sectie op de pagina. U kunt meer dan één koptekst in een enkel document definiëren.
Voorbeeld:
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
De inhoud van het document komt hier …
Output:
De bovenstaande code geeft het resultaat weer zoals weergegeven in de onderstaande afbeelding,
5.
Het element wordt gebruikt voor het specificeren van de informatie zoals auteursinformatie, auteursrechtinformatie, contact, links naar gerelateerde documenten, sitemap en nog veel meer.
Voorbeeld:
Footer Element
Copyright © 2019 www.educba.com
Contact:
Output:
De bovenstaande code geeft het resultaat weer zoals weergegeven in de onderstaande afbeelding,
6.
Het element wordt gebruikt voor het weergeven van de belangrijkste ie belangrijke informatie van een document.
Voorbeeld:
Main Element
Informatie koptekst
Hoofd informatie
EDUCBA
EDUCBA is een toonaangevende wereldwijde aanbieder van op vaardigheden gebaseerd onderwijs …
Voettekst informatie
Output:
De bovenstaande code produceert de uitvoer zoals weergegeven in de onderstaande afbeelding,
7.
Het element wordt gebruikt om de tekst te markeren of markeren met de achtergrondkleur die de gebruiker aantrekt voor een bepaalde tekst in het document.
Voorbeeld:
Mark Element
EDUCBA is een toonaangevende wereldwijde aanbieder van op vaardigheden gebaseerd onderwijs dat voorziet in de behoeften van meer dan 500.000 leden in meer dan 40 landen.
Output:
De bovenstaande code geeft het resultaat weer zoals weergegeven in de onderstaande afbeelding,
8.
Het element wordt gebruikt om de navigatielinks op de pagina op te geven. Deze koppelingen bieden verbindingen met andere pagina's in een document.
Voorbeeld:
Nav Element
HTML |
CSS |
JAVA |
PHP |
PYTHON
Output:
De bovenstaande code produceert de uitvoer zoals weergegeven in de onderstaande afbeelding,
9.
Het element wordt gebruikt om de zelfstandige sectie of het specifieke gebied in het document te definiëren.
Voorbeeld:
Section Element
Main Article
Section Element
Main Article
Section Element
Main Article
De inhoud van de hoofdkop wordt hier weergegeven …
Sectie een
De inhoud van het eerste gedeelte wordt weergegeven …
Sectie Twee
De inhoud van het tweede gedeelte wordt weergegeven …
Output:
De bovenstaande code geeft het resultaat weer zoals weergegeven in de onderstaande afbeelding,
10.
De tag is een subdeel van de tag dat de tekst bevat die kan worden weergegeven of verborgen wanneer de gebruiker op de kop klikt.
Voorbeeld:
Summary Element
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
Het is een toonaangevende wereldwijde aanbieder van op vaardigheden gebaseerd onderwijs dat voorziet in de behoeften van meer dan 500.000 leden in meer dan 40 landen.
Output:
Wanneer u de bovenstaande code uitvoert, wordt het resultaat weergegeven zoals hieronder wordt weergegeven,
Zoals getoond in de afbeelding, klik op de kop, het zal de verborgen tekst weergeven zoals getoond in de onderstaande afbeelding,
Conclusie
Tot nu toe hebben we gezien hoe nieuwe HTML5-elementen nuttig zijn voor verschillende taken bij het maken van de website. Deze nieuwe elementen lezen het document op een meer accurate en standaard manier en ontwikkelen complexere en efficiëntere web-apps. De nieuwe HTML5-elementen geven enkele extra extra functies om interactieve websites te genereren.
Aanbevolen artikelen
Dit is een gids voor HTML5 nieuwe elementen. Hier bespreken we de top 10 nieuwe elementen van HTML5 om de lay-out van het document te verbeteren. U kunt ook de volgende artikelen bekijken voor meer informatie -
- Kleurcorrectie in After Effects
- Top 6 versies van HTML
- Html5 versus Html4
- XHTML versus HTML5
- Wat is Bridge?
- HTML5-tags | Top 4 tags van HTML5