5 choses que vous ne saviez pas que vous pouviez faire avec HTML

Sep 17, 2025

Comment

[dix] [dix] [dix]

[dix]

Voyons en face, le développement Web peut facilement devenir désordre. HTML, CSS et Javascript ont tous évolué à partir d'origines humbles sur de nombreuses années et sont largement équivoques en termes de la manière dont vous devriez les utiliser. En conséquence, il est trop facile de construire un gâchis non négligeable. Adhérant aux normes et tirer parti des dernières améliorations dans les spécifications ne garantit pas de bon code, mais cela peut certainement aider.

[dix]

Dans tout type de développement de logiciels, la modularité est roi en matière de construction de code maintenable. En conséquence, vous voudrez garder un œil étroit sur les composants Web. Le support du navigateur n'est pas génial, mais si vous vous saisissez certains polyfills Vous pouvez obtenir de l'avance sur la courbe et commencer à tirer parti des éléments personnalisés pour structurer votre code immédiatement. Ce style de développement est l'avenir, il vaut donc la peine de le familier avec cela.

Keep code streamlined for clearer understanding — Gardez le code rationalisé pour une compréhension plus claire

HTML5 lui-même a introduit un certain nombre de nouveaux éléments (et déprécis plusieurs) pour aider à encourager de bonnes pratiques de codage. Vous avez peut-être entendu parler de balises sémantiques, qui fait référence à l'utilisation des éléments descriptifs de HTML5 tels que & lt; article & gt; et & lt; figure & gt; pour indiquer le type de contenu qu'ils contiennent.

Cela peut vraiment aider avec la propreté de votre code, car les éléments HTML identifient immédiatement, par exemple, quelles parties représentent la barre de menus, vos sections de contenu, le pied de page, etc.

Cela vous aidera également si vous tirez parti des derniers standards JavaScript. Javascript peut également devenir désordonné, mais il est devenu beaucoup plus facile de travailler avec ces dernières années. L'ES6 Syntaxe est largement supportée dans les navigateurs et les fonctions telles que les fonctions de flèche et les classes peuvent rendre votre vie beaucoup plus facilement - mais de nombreux développeurs sont inconnus ou méfiants de les utiliser.

[dix]

Poursuivre le thème du développement modulaire, JavaScript prend également en charge le chargement du module, ce qui peut vous aider à gérer vos dépendances proprement.

01. Reconnaître et synthétiser la parole

The sound of things to come — Le son des choses à venir (Crédit d'image: Photo de Jason Rosewell sur les morbastes)

Celles-ci auraient déjà été des fonctions complexes nécessitant des logiciels spécialisés, mais ils sont maintenant construits directement dans des navigateurs. L'API de la parole Web comporte des composants qui soutiennent le texte à la parole et la parole à texte. Ces derniers de ceux-ci utiliseront un service en ligne (Chrome utilise l'API Google Cloud Discours) ou le service de reconnaissance vocale de l'appareil. Attendez-vous à ce que cela soit utilisé largement sur des appareils mobiles à l'avenir.

02. Afficher un sélecteur de couleur

Choosing the right colour — Choisir la bonne couleur (Crédit d'image: Photo de Scott Webb sur les obscités)

Trivial tel qu'il peut sembler, il s'agit d'un excellent exemple de la simplification HTML5 qui simplifie les tâches communes qui auraient auparavant besoin de codage personnalisé d'un composant UI assez complexe. & lt; type d'entrée = "couleur" & gt; Affichera un sélecteur de couleurs visuelle lorsque vous avez cliqué sur, à l'aide d'un sélecteur de couleur natif sur l'appareil. Cela pourrait être particulièrement utile avec la toile HTML. Il est largement soutenu avec l'exception de Safari sur mobile.

[dix]

03. Recolourez l'interface utilisateur du navigateur

Colour themes for browsers — Thèmes de couleur pour navigateurs (Crédit d'image: photo de marko blažević sur des morbastes)

Cela peut offrir une belle touche esthétique sur des plates-formes mobiles. & lt; méta nom = "Thème-Color" Content = "# FFFFFFF" / & GT; est conçu pour instruire le navigateur de recoller la barre d'outils lors de la visualisation de votre site. Malheureusement, c'est un peu non normalisé, alors alors que "Thème-Color" Fonctionne avec Chrome, Firefox et Opera, sur iOS aurez besoin "Apple-Mobile-Web-App-Status-Bar-Style" (fonctionne uniquement en mode plein écran).

04. Différentes images pour différents écrans

Specifying the image and the resolution — Spécifier l'image et la résolution (Crédit d'image: Photo de Tran Mau Tri Tam sur Desclash)

J'espère que vous mettez déjà en œuvre une conception réactive, auquel cas vos images résoudront pour convenir à la fenêtre. Ce n'est pas parfait, car vous forcerez l'utilisateur à télécharger la version la plus grande de l'image, puis la descendante. Entrez le HTML5 & lt; image & gt; Element, qui vous permet de spécifier différentes images à afficher en fonction de la résolution de l'écran que le site est vu sur.

05. Vibrez votre téléphone

Shakin' all over — Shakin 'partout (Crédit d'image: Photo de Gilles Lambert sur les obscurités)

L'API de vibration sans ambiguïté expose une seule fonction, vibrate (), qui fera exactement ce qu'il indique sur les appareils qui le supportent. La fonction prend une liste décrivant un modèle de vibration comme argument. Cela fonctionnera sur Chrome, Firefox et Opera, bien que vous n'ayez pas de chance sur Edge ou Safari. Il a été signalé que certaines annonces utilisent cela pour attirer l'attention de l'utilisateur, de sorte que le jury soit sur le point de savoir si c'est une bonne idée.

Cet article est apparu à l'origine dans Concepteur web numéro 266. Achetez-le ici .

Articles Liés:

Les 10 meilleurs modèles de modèle HTML5
20 modèles HTML pour donner à vos projets de conception Web un headstart
Clouer votre HTML avec cette feuille de triche

[dix] [dix]

[dix]

5 choses que vous ne saviez pas que vous pouviez faire avec HTML

01. Reconnaître et synthétiser la parole

02. Afficher un sélecteur de couleur

03. Recolourez l'interface utilisateur du navigateur

04. Différentes images pour différents écrans

05. Vibrez votre téléphone

Comment - Most Popular Articles

Comment dessiner une perspective

Facebook Confidentialité Paramètres: Comment garder votre profil privé

Cache dans le booster de performance de la BBC

Aiguisez votre modélisation de surface rigide dans 3DS Max

Construisez votre propre jeu de physique WebLL

Texture un droid K-2SO porté authentique

5 façons de créer des expériences VR plus immersives

Créer une brosse à autocollants personnalisée dans Artrage

Catégories