5 dingen die je niet wist dat je kon doen met HTML

Sep 15, 2025

Procedures

Laten we met het oog staan, webontwikkeling kan gemakkelijk een puinhoop worden. HTML, CSS en JavaScript Zijn allemaal geëvolueerd van nederige oorsprong in vele jaren, en zijn grotendeels gelijkwaardig in termen van hoe je ze zou moeten gebruiken. Als gevolg hiervan is het allemaal te gemakkelijk om een ontmoedigende puinhoop te bouwen. Hechten aan normen en het profiteren van de nieuwste verbeteringen in de specificaties garanderen geen goede code, maar het kan zeker helpen.

In elk type software-ontwikkeling is modulariteit koning als het gaat om gebouw onderhoudbare code. Als gevolg hiervan wil je webcomponenten in de gaten houden. Browser-ondersteuning is niet geweldig, maar als je jezelf een aantal pakt Polyfills , U kunt de curve voorsprong en profiteren van aangepaste elementen om uw code meteen te structureren. Deze ontwikkelingstijl is de toekomst, dus het is de moeite waard om er nu bekend mee te krijgen.

Keep code streamlined for clearer understanding — Houd code gestroomlijnd voor duidelijker begrip

HTML5 zelf introduceerde een aantal nieuwe elementen (en verouderde verschillende) om goede coderingspraktijken aan te moedigen. Mogelijk hebt u gehoord van Semantic Markup, die verwijst naar het gebruik van de beschrijvende elementen van HTML5 zoals & LT; Article & GT; en & lt; figuur & gt; om het type inhoud aan te geven dat ze bevatten.

Dit kan echt helpen met de netheid van uw code, omdat de HTML-elementen onmiddellijk zullen identificeren, bijvoorbeeld, welke onderdelen de menubalk, uw secties van inhoud, de voettekst enzovoorts weergeven.

Het zal ook helpen als u gebruik maakt van de nieuwste JavaScript-normen. JavaScript kan ook rommelig worden, maar het is in de afgelopen jaren veel eenvoudiger geworden. ESS6-syntaxis wordt op grote schaal ondersteund in browsers en functies zoals pijlfuncties en klassen kunnen uw leven veel gemakkelijker maken - maar veel ontwikkelaars zijn ofwel onbekend met of op hun hoede om ze te gebruiken.

Doorgaan met het thema van modulaire ontwikkeling, ondersteunt Javascript ook nu ondersteunt module-loading, wat u kan helpen uw afhankelijkheden schoon te maken.

01. Herken en synthetiseren van spraak

The sound of things to come — Het geluid van dingen om te komen (Afbeelding Credit: Foto door Jason Rosewell on Unsplash)

Deze zouden eens complexe functies zijn geweest die gespecialiseerde software vereisen, maar ze worden nu rechtstreeks in browsers gebouwd. De Web Speech API heeft componenten die tekst-to-spraak en spraak-tot-tekst ondersteunen. Deze laatste zal een online service gebruiken (Chrome gebruikt de Google Cloud Speech API) of de inheemse spraakherkenningsservice van het apparaat. Verwacht dit in de toekomst op grote schaal op mobiele apparaten wordt gebruikt.

02. Geef een kleurkiezer weer

Choosing the right colour — De juiste kleur kiezen (Afbeelding Credit: Foto door Scott Webb on Unsplash)

Triviaal als het misschien klinkt, is dit een goed voorbeeld van hoe HTML5 gemeenschappelijke taken vereenvoudigt die eerder aangepaste codering van een vrij complexe UI-component zouden vereisen. & lt; invoertype = "kleur" & GT; Zal een visuele kleurkiezer weergeven wanneer geklikt, met behulp van een kleurkiezer inheems in het apparaat. Dit kan met name nuttig zijn met HTML-canvas. Het wordt veel ondersteund met uitzondering van Safari op Mobile.

03. Recolour de browser ui

Colour themes for browsers — Kleurthema's voor browsers (Beeldkrediet: Foto van Marko Blažević op Unsplash)

Dit kan een mooie esthetische touch op mobiele platforms aanbieden. & LT; Meta Name = "Theme-color" -inhoud = "# ffffff" / gt; is ontworpen om de browser te instrueren om de werkbalk te recolreren bij het bekijken van uw site. Helaas is het een beetje niet-gestandaardiseerd, dus terwijl "Theme-color" Werkt met Chrome, Firefox en Opera, op iOS die je nodig hebt "Apple-Mobile-web-app-status-bar-stijl" (werkt alleen in de modus Fullscreen).

04. Verschillende afbeeldingen voor verschillende schermen

Specifying the image and the resolution — De afbeelding en de resolutie opgeven (Beeldkrediet: Foto door Tran Mau Tri Tam op UNSPLASH)

Hopelijk implementeert u al een responsief ontwerp, in welk geval uw afbeeldingen worden verwerkt om aan de viewport te passen. Dit is niet perfect, omdat u de gebruiker dwingt om de grootste versie van de afbeelding te downloaden, dan wordt u het afgezaagd. Voer de HTML5 in & LT; Picture & GT; Element, waarmee u verschillende afbeeldingen kunt opgeven, afhankelijk van de schermresolutie waarop de site wordt bekeken.

05. Vibreer je telefoon

Shakin' all over — Shakin 'overal (Afbeelding Credit: Foto van Gilles Lambert op Unsplash)

De ondubbelzinnige genoemde vibratie-API legt een enkele functie uit, trilt (), wat precies zal doen wat het zegt op apparaten die het ondersteunen. De functie neemt een lijst met een vibratiepatroon als het argument. Het zal werken aan Chrome, Firefox en Opera, hoewel je veel geluk hebt op rand of safari. Het wordt gemeld dat sommige advertenties dit gebruiken om de aandacht van de gebruiker aan te trekken, zodat de jury uit is of het eigenlijk een goed idee is.

Dit artikel verscheen oorspronkelijk in Webdesigner uitgave 266. Koop het hier

Gerelateerde artikelen:

De 10 beste HTML5-sjabloonontwerpen
20 HTML-sjablonen om uw webontwerpprojecten een headstart te geven
Nagel je HTML met dit cheat-blad

5 dingen die je niet wist dat je kon doen met HTML

01. Herken en synthetiseren van spraak

02. Geef een kleurkiezer weer

03. Recolour de browser ui

04. Verschillende afbeeldingen voor verschillende schermen

05. Vibreer je telefoon

Procedures - Meest populaire artikelen

Maak voertuiganimaties met ICLONE 7

Verf een ondeugende haas in aquarel

19 tips voor Great Poser Art

Leer om te animeren voor kinderen

Custom Rig Controls in Maya

Hoe een teken te maken in VR

Schilder een portret in oliën

Maak een geanimeerde gif in Photoshop

Categorieën