Advertentie

HTML5 is de nieuwste en beste Wat is HTML5 en hoe verandert het de manier waarop ik blader? [MakeUseOf Explains]In de afgelopen paar jaar heb je de term HTML5 misschien af ​​en toe gehoord. Of je nu iets weet over webontwikkeling of niet, het concept kan enigszins vaag en verwarrend zijn. Duidelijk,... Lees verder versie van de meest gebruikte opmaaktaal op internet. Er zijn enkele grote veranderingen ten opzichte van de laatste versie van de taal, en als je ze niet gebruikt, mis je een aantal hele gave functies.

We hebben niet de ruimte om elk nieuw element in de vijfde versie van HTML te behandelen, maar deze negen zijn enkele van de belangrijkste. Voor meer informatie over de nieuwe elementen en API's in HTML5, zorg ervoor dat bekijk W3Schools.

Een inleiding tot semantische elementen

Net als veel van het internet is HTML5 verschoven om zich te concentreren op semantiek. In plaats van dat tags gewoon worden gebruikt voor opmaak, worden ze nu ook gebruikt om browsers te vertellen

en zoekmachines Top 7 semantische zoekmachines als alternatief voor Google Lees verder de betekenis van wat ze omringen.

Bijvoorbeeld,

vertelt een browser gewoon dat het een alinea bevat.

, die we kort zullen bespreken, vertelt een browser dat deze de hoofdinhoud van de pagina bevat.

Het semantische web is nog volop in ontwikkeling en we zijn nog maar net begonnen aan het oppervlak van wat het kan doen. HTML5 helpt mee te brengen semantische opmaak Wat semantische opmaak is en hoe het internet voor altijd zal veranderen [Technologie verklaard] Lees verder naar een veel groter deel van het internet, en dat kan alleen maar goed zijn voor de toekomst van semantische verwerking.

1.

De

tag definieert "onafhankelijke, op zichzelf staande inhoud." Het makkelijkste voorbeeld is natuurlijk een artikel. Voor dit specifieke artikel openen we de tag vóór de introductie en sluiten we deze na de conclusie.

 Alle tekst in uw op zichzelf staande sectie. 

Maar er zijn ook andere manieren om het te gebruiken. Veel kookblogs bevatten bijvoorbeeld persoonlijke verhalen over hoe een recept tot stand is gekomen of waarom het belangrijk is voor de schrijver. Daarna volgt het recept zelf. Je zou kunnen stellen dat elk van deze elementen op zichzelf zou kunnen staan.

In een forum kan elke post of thread als op zichzelf staand worden beschouwd en elk kan met een eigen worden gemarkeerd

label. Het zal voor het grootste deel worden gebruikt in de hoofdinhoud van een pagina. Maar houd er rekening mee dat u het ook creatiever kunt gebruiken.

2.

Nauw verwant aan

is

. Dit definieert een 'thematische groepering van inhoud, meestal met een kop'. Zo

zal binnen zijn

… Rechtsaf?

Niet noodzakelijk. W3 wijst erop dat het afhangt van de structuur van uw site. Mogelijk hebt u op zichzelf staande inhoud in verschillende secties van uw pagina (denk bijvoorbeeld aan de voorpagina van een nieuwssite). Mogelijk hebt u dan secties in dat artikel.

Waarom u een DAC nodig heeft
Alles klinkt beter.
Hoe een DAC in te stellen
Dit is wat je moet doen.. .

U kunt zelfs secties in secties plaatsen als deze op uw pagina passen. Onthoud dat een sectie eenvoudigweg een 'thematische groepering van inhoud' is, en u zult veel plaatsen vinden om deze te gebruiken.

3.

Dit element 'moet worden gebruikt als een container voor inleidende inhoud'. Kortom, het is het deel van uw pagina dat mensen helpt te begrijpen wat ze gaan lezen.

Maar laat u niet misleiden - u kunt deze container meerdere keren gebruiken. U kunt het bijvoorbeeld gebruiken om de paginatitel en de inleidende alinea van uw blogbericht te identificeren. Maar u kunt het ook gebruiken om de inleidende inhoud voor elke sectie te markeren.

Alles wat u moet weten over DAC's
Hier is een handige introductie tot DAC's ...
 De rest van je artikel komt hier.

Koptekstsecties bevatten meestal ten minste één koptag-tag - H1, H2, enzovoort. Ze hoeven niet, maar in het algemeen, als u een koptag gebruikt, is het een goede gok dat u koptekstinhoud opneemt.

4.

W3 zegt dat footer-tags meestal de "auteur van het document, copyrightinformatie, links naar gebruiksvoorwaarden, contactgegevens, etc." bevatten. Je kunt het zien als het "huishoudelijk" spul.

In de documentatie staat ook dat u meer dan één voettekstgedeelte op uw pagina kunt hebben. Het is echter waarschijnlijk een goed idee om al deze informatie op één locatie te bewaren.

5.

Deze tag bevat de navigatielinks voor een bepaalde pagina. Merk op dat alleen het navigatiegedeelte deze tag krijgt, niet alle links op uw pagina. Het is voor navigatiebalken en vergelijkbare tools.

Dit is een heel eenvoudige tag - dat is alles. Gebruik het om het navigatiegedeelte te definiëren en gebruik het niet opnieuw op uw pagina.

6.

Een van de meest interessante nieuwe elementen in HTML5 is het terzijde. W3 geeft het de ietwat nutteloze definitie van "sommige inhoud naast de inhoud waarin het is geplaatst."

Kortom, een kanttekening is alles dat verband houdt met (maar los staat van) de omringende informatie. Het kan een zijbalk zijn die details aan uw inhoud toevoegt. Wanneer het wordt gebruikt binnen een set van

tags, biedt het aanvullende informatie die niet nodig is om de hoofdinhoud te begrijpen.

Als we bijvoorbeeld een zijbalk in dit artikel hadden opgenomen met informatie over de geschiedenis van HTML5, zou dat een terzijde zijn.

Maar de

 Het hoofdartikel komt hier.  Het artikel gaat hier verder.

Omdat deze tag meerdere keren kan worden gebruikt, kan dit verwarrend zijn. Als je bedenkt dat het 'secundaire inhoud' is en dat het niet altijd een zijbalk hoeft te zijn, heb je een beter idee van hoe je het kunt gebruiken.

7.

Veel websites hebben informatie die moet worden weergegeven, maar niet opvallend. Misschien is het de copyrightinformatie voor een foto. Of de kleine lettertjes op een wedstrijd. Dit soort informatie is precies waar de details-tag voor is.

Wanneer u de detailtag gebruikt, creëert u verborgen tekst die gemakkelijk kan worden weergegeven. Hier is een voorbeeld:

Klik hier om informatie te zien.

Hier is meer gedetailleerde informatie die u niet meteen nodig heeft.

Klik gewoon op de pijl om de details te krijgen. Gemakkelijk. Het creëren is net zo eenvoudig. Dit is de code die wordt gebruikt voor het bovenstaande voorbeeld:

 Klik hier om informatie te zien. 
 Hier is meer gedetailleerde informatie die u niet meteen nodig heeft. 

De

tag definieert de zin die zal worden getoond, terwijl de andere inhoud verborgen is. Merk op dat u andere tags kunt gebruiken in het detailgedeelte: koppen, secties, enzovoort.

Er zijn andere coole dingen die je kunt doen met HTML 8 coole HTML-effecten die iedereen aan zijn website kan toevoegenJe hoeft CSS of PHP niet te kennen om een ​​mooie site te bouwen. Gebruik deze coole HTML-trucs om geweldige effecten te genereren. Lees verder ook, zelfs als u niet veel CSS of JSON kent.

8-9.

en

Maak je geen zorgen, de tag die je al jaren gebruikt, gaat niet weg.

gaat om de afbeeldingstag heen en laat de browser weten dat het een op zichzelf staande afbeelding, diagram, codelijst of een andere afbeelding is.

Als een figuur van de pagina wordt verwijderd, heeft dit geen invloed op de stroom van de inhoud.

Dit geeft je een ingebouwde manier om een ​​bijschrift aan je afbeeldingen toe te voegen. U hoeft uw CMS niet meer te doorlopen.

Profiteer van de kracht van HTML5

De nieuwe elementen in HTML5 voegen veel kracht toe, vooral voor semantische doeleinden. Er zijn extra elementen voor opmaak, scalaire metingen, voortgang van taken en meer. Je kan zien alle nieuwe elementen bij W3Schools.

Maar als je deze negen onder de knie hebt, ben je goed op weg om HTML5 goed te gebruiken. En als u nieuw bent bij HTML, moet u zeker uitchecken deze codevoorbeelden 17 eenvoudige HTML-codevoorbeelden die u in 10 minuten kunt lerenWilt u een eenvoudige webpagina maken? Leer deze HTML-voorbeelden en probeer ze uit in een teksteditor om te zien hoe ze eruitzien in uw browser. Lees verder !

Ben je begonnen met het gebruik van HTML5? Welke nieuwe elementen vind je het nuttigst? Deel uw mening in de onderstaande opmerkingen!