Inleiding tot HTML5-tags

We kennen allemaal de standaardafkorting van HTML; dat is HyperText Markup Language. HTML5 is dus de nieuwste en de nieuwe versie van HTML. Als een product eenmaal is ontwikkeld, zouden er natuurlijk veel HTML-versies zijn met veel nieuwe ontwikkelingen onderweg. HTML5 heeft dus nieuwe attributen en gedragingen. Deze HTML5-tag is geen programmeertaal meer, maar het is een mark-uptaal. Wat is een opmaaktaal? Elementattributen definiëren met behulp van tags in een document is een opmaaktaal. Laten we nu in detail ingaan op hoe we tags kunnen definiëren en een webpagina kunnen maken.

Tags van HTML5

Een tag is een specificatie voor het weergeven van inhoud. Over het algemeen zou er een begin- en eindtag zijn. En er zijn ook enkele tags waarvoor geen eindtag nodig is; Leuk vinden
wat betekent dat de regel wordt verbroken, waarbij de gegevens naast die tag van de volgende regel worden weergegeven. Laten we hier enkele nieuwe elementen in HTML5 bekijken.

In HTML5 kunnen we de tags over het algemeen in twee categorieën verdelen.

  • Semantische elementen: Enkele voorbeelden voor deze elementen zijn;, , enz.
  • Niet-semantische elementen: voorbeelden hiervan zijn;, enz.

De tags die hieronder worden besproken, zijn tags die exclusief zijn geïntroduceerd in HTML5-versies. Het zijn verschillende soorten tags die allemaal kunnen worden gecategoriseerd.

1. Structurele tags

Hieronder staan ​​de typen structurele tags met voorbeelden:

een. Artikel: dit is een tag die meestal wordt gebruikt vergelijkbaar met een head-tag. Vooral gebruikt in formulieren, blogs, nieuwsberichten en allemaal als voorbeelden.

Code:

De eerste


Welkom terug

Output:

b. Terzijde: iets vergelijkbaars met onze normale tags, die de inhoud zou relateren aan de omringende inhoud, zoals een zijbalk in het artikel. En deze tag zou alleen zin hebben bij het gebruik van een IE-versie boven 8.

c. Details: deze tag wordt gebruikt om de gebruiker aanvullende gegevens te verstrekken. Dit kan een interactief platform zijn dat de details kan verbergen of weergeven. We kunnen het gebruik van dit tabblad onder de samenvattingstag zien.

d. Koptekst: deze tag is gerelateerd aan het koptekstgedeelte en bevat titelinformatie. Het moet zowel de start- als de eindcode hebben.

Code:

Happy Hours


Ochtend | Middag | Avond

output:

e. hgroup: deze tag wordt gebruikt bij het beschrijven van een groep headers. Laten we in het voorbeeld kijken.

Code:

Laten we de grootte van deze h1 controleren


Laten we de grootte van deze H2 controleren


Laten we de grootte van deze h3 controleren


Laten we de grootte van deze h4 controleren


Laten we de grootte van deze h5 controleren

Output:

f. Voettekst: deze tag is die aan het einde van de pagina. Het gaat over iets als auteursrechten, geschiedenisgerelateerde informatie of gegevens. Laten we hieronder een klein voorbeeld bekijken.

Code:

Copyrechten | Kom snel terug


Abonneer u voor meer leerinhoud

Output:

g. nav: deze tag dient om een ​​gedeelte van alle koppelingen voor navigatie te bieden.

Code:

  • EDUCBA Home
  • Over EDUCBA
  • Cursussen in EDUCBA

Output:

Controleer dit door op de koppelingen te klikken nadat u tijdens het oefenen uw code hebt geschreven.

h. Sectie: Zoals de naam al aangeeft, definieert deze tag het deel van de code zoals de body, koptekst, voettekst, enz. Hier zijn zowel de start- als de eindtags nodig. Laten we hieronder een klein voorbeeld bekijken:

Code:

Welkom


Tot ziens


Dank je.

Output:

ik. Samenvatting: deze tag wordt parallel met het tabblad Details gebruikt. Onder de details-tag hebben we deze samenvattingstag om de concepten samen te vatten. Voorbeeld hieronder:

Code:



How is this Summary tag defined?

Door op de pijl naast de overzichtsvraag te klikken, werd ik weergegeven

De gegevens achter de display-tag worden als volgt weergegeven.

Output:

Nu we de samenvattingstaggegevens uitbreiden, krijgen we het onderstaande.

2. Vormtags

Hier zijn de verschillende soorten formulier-tags die hieronder worden uitgelegd met voorbeelden:

een. Gegevenslijst: deze tag wordt gebruikt als een vervolgkeuzelijst met vooraf gedefinieerde waarden die een gebruiker kan kiezen. Laten we het kleine voorbeeld hieronder bekijken:

Code:

Voer uw favoriete browsernaam in:

Output:

De vervolgkeuzelijst verschijnt wanneer de muis over de muis wordt gehouden.

b. Keygen: dit is voor de codering. Het is voor het genereren van een gecodeerde sleutel voor het doorgeven van de gegevens in een gecodeerd formaat. Voor dit element is alleen de starttag voldoende / vereist en de eindtag is niet verplicht.

c. Meter: deze tag geeft ons de meting van de gegevens die in een bepaald bereik aanwezig zijn.

Code:


25 out of 100

Dit is 25 van de 100

70%

Dit is het bereik voor 70%

Output:

3. Tags opmaken

Hieronder staan ​​de typen opmaaktags met voorbeelden:

een. BDI: Dit is bidirectionele isolatie. Zoals de naam al suggereert, kan deze tag worden gebruikt om een ​​deel van de tekst te isoleren en het een andere stijl te geven dan die van andere tekst.

b. Markeren: deze tag kan ons helpen een specifieke tekst te markeren.

Code:

Dit is hoe je een tekst kunt markeren of markeren.

Output:

c. Uitvoer: Zoals de naam ons al laat zien, geeft deze het resultaat van elke berekening.

Code:



+
=

Output:

Zorg ervoor dat u het formulierkenmerk van oninput opmerkt. Nadat u het kenmerk 'x' hebt ingevoerd, wordt de uitvoer weergegeven.

d. Voortgang: deze tag geeft ons de voortgang van een bepaalde taak.

Code:

Deze voortgangsbalk is voor 80% voltooid

Output:

e. Rp: dit wordt gebruikt wanneer de ruby-tags niet worden ondersteund.

f. Rt: het wordt gebruikt met de tag robijn. Meestal wordt dit gebruikt in de uitspraak in zowel Japanse als Chinese talen.

g. Ruby: deze tag wordt gebruikt met de tags rt en rp waar de annotaties met betrekking tot de twee talen Chinees en Japans worden uitgesproken.

h. Wbr: Deze tag is voor het woord break. Het wordt voornamelijk gebruikt om te controleren hoe een woord breekt wanneer het formaat van het venster wordt gewijzigd.

4. Ingesloten inhoudstags

Dit zijn de typen ingesloten inhoudstags die hieronder worden uitgelegd met voorbeelden:

een. Audio: zoals de naam al suggereert, zou deze tag ons helpen audiobestanden in het HTML-document op te nemen.

b. Canvas: definieert een plaats op de webpagina waar afbeeldingen of vormen of grafieken aanwezig zijn of kunnen worden gedefinieerd. Hier is een voorbeeld.

Code:



window.onload = function()(
var can = document.getElementById("run");
var context = can.getContext("2d");
context.moveTo(30, 60);
context.lineTo(150, 30);
context.stroke();
);

Output:

c. Dialoogvenster: deze tag geeft ons een standaardvakje, vooral als we gegevens in een vakje wilden hebben.

Code:

Dialoogvenster hier proberen Hoe verschijnt het dialoogvenster?

Output:

d. Insluiten: deze tag kan worden gebruikt om elk extern bestand in het HTML-bestand te krijgen. We kunnen alleen de start-tag hebben en de eind-tag is hier niet verplicht. Er zijn verschillende attributen die kunnen worden gebruikt met deze tag namelijk; breedte, hoogte, src en type.

e. Figuur en Figcaption: Dit zoals al in zijn naam kan de afbeeldingen opnemen en kan een bijschrift geven aan die afbeelding.

f. Bron: deze tag kan meerdere audio- en videobestanden implementeren door de locatie van de bestanden op te geven met behulp van deze brontag.

g. Tijd: deze tag, zoals de naam al aangeeft, is een tag voor het weergeven van de tijd. En merk op dat deze tag niet functioneert in het geval van internet explorer versie 8 en lager.

h. Video: Met de naam van de tag kunnen we duidelijk te weten komen waar deze tag wordt gebruikt. Voor het specificeren van de videobestanden hebben we deze tag. Binnen deze Audio / Video-tags definiëren we de brontags bij het specificeren van de bestanden en hun locaties.

Invoerelementen van HTML5-tags

Hier zijn enkele invoerelementen die we gebruiken in HTML5-tags:

1. E-mail: dit is een van de invoerelementen in HTML5. Dit element neemt alleen e-mailadressen als invoer op.

2. Nummer: dit invoerelement accepteert alleen het nummer.

3. Bereik: Zoals de naam al verklaart, bevat deze tag een reeks getallen.

4. URL: deze invoertag accepteert het invoerveld voor het URL-adres. In dit invoertype kunnen we alleen de URL invoeren.

5. Plaatshouder: dit is een van de attributen voor het invoertype als tekst of tekstgebied of een willekeurig nummer. Deze plaatshouderwaarde toont de waarde die moet worden gegeven als invoer.

Code:


Enter Date of birth : placeholder = "dd/mm/yyyy"/>

Output:

6. Autofocus: dit kenmerk focust automatisch op een bepaald veld waar dit element binnen de invoertag is gedeclareerd. Dit kenmerk wordt alleen ondersteund door de nieuwste versies van Chrome, Safari en Mozilla. Syntaxis is als:


Tag : This tag represents a description of a definition.
Tag : This tag deletes a specified text.
Tag : This tag helps to display data in a scrolling manner.

This texxt is in a scrolling manner


Tag : This tag represents a description of a definition.
Tag : This tag deletes a specified text.
Tag : This tag helps to display data in a scrolling manner.

This texxt is in a scrolling manner

Output:

7.: Dit is een van de basistags die de browser zou helpen de versie van de HTML te begrijpen waarin het programma wordt geschreven. De verklaring van deze tag moet vóór de HTML-tag worden geschreven.

8.: Deze metatag beschrijft de beschrijving van het HTML-document. Het bevat de naam van de auteur, de datum en wijzigingen, enz.

In deze HTML5 hebben we zelfs de mogelijkheid om de GeoLocation van een apparaat te krijgen. Er zijn verschillende methoden die nuttig kunnen zijn om het taggen van deze locatie eenvoudig te maken. Er zijn ook verschillende lettertypen en kleuren beschikbaar in HTML5. Hieronder staan ​​enkele tags die uit het HTML-gebruik van deze HTML5-versie zijn verwijderd.

Acroniem, Applet, groot, dir, lettertype, frameset, center, tt (TeleType-tekst), basefont, center, strike, frame, u (onderstreepte tekst), isindex, noframes, enz. Enkele attributen die zijn verwijderd zijn hieronder:

Uitlijnen, bgcolor, cellpadding, cellspacing, border, link, shape, charset, archive, codebase, scope, alink, vlink, link, background, border, clear, scrolling, size, width, etc.

9.: Deze tag wordt gebruikt om de inhoud weer te geven waarbij het gebruik van JavaScript is uitgeschakeld. Alle inhoud die in deze tag is geschreven, kan worden gebruikt in plaats van de inhoud waar JavaScript wordt gebruikt. Als oefening kunt u proberen de verschillende tags uit te voeren waarvoor geen voorbeelden worden gegeven.

Conclusie

Dus ja, er zijn de basistags en referenties voor HTML5. De eerste versie van HTML5 werd uitgebracht op 28 oktober 2014. We hebben verschillende nieuwe tags gezien die werden geïntroduceerd en een paar kenmerken in HTML5 hadden doorlopen. Uiteindelijk hadden we zelfs gezegd dat niet alleen de introductie van nieuwe elementen werd gedaan, maar dat sommige aanwezige elementen en attributen door deze nieuwe versie van HTML5 niet meer konden worden gebruikt.

Er waren veel attributen die met voorbeelden werden gegeven en sommige met alleen de gegevens en het doel van het attribuut of de elementen. Probeer al die verschillende elementen en attributen te oefenen en blijf leren.

Aanbevolen artikelen

Dit is een handleiding voor HTML5-tags. Hier bespreken we de top 4 HTML5-tags en de invoerelementen in detail samen met voorbeelden en code-implementatie. U kunt ook de volgende artikelen bekijken voor meer informatie-

  1. HTML-evenementen
  2. HTML-indeling
  3. HTML-frames
  4. HTML-tabeltags
  5. JavaScript-evenementen | Verschillende JavaScript-gebeurtenissen implementeren
  6. Verschillende soorten metatags in HTML
  7. Hoe opmaak van tekst in HTML werkt?
  8. Verschillende semantische elementen in HTML5

Categorie:

Web ontwikkelingstools