HTML est le web

Quoi de neuf avec HTML dans le frontend? Récemment, j'ai parlé avec de nombreux développeurs. Il semble que certains ne comprennent même pas le HTML. Je veux dire, ils comprennent quelque chose. Ils comprennent ce qu'est un div et ce qu'est un span , et quand tout semble bon et fonctionne sur un clic, cela leur suffit. À tel point que beaucoup de gens répondent à la question sur HTML: "Oh, oui, je fais tout dans React ou Vue maintenant." Mais peu importe que vous n'écriviez que du Javascript. Si vous développez des sites Web, le HTML est la chose la plus importante pour vous. C'est le web.

Il s'agit de ce qui est consommé par l'utilisateur. Ce sont UI et UX. Voici le package complet. Par ordre décroissant d'importance: HTML, CSS et comportement (qui peuvent être fournis par Javascript - ou peut-être pas).

Je vois un problème au bas de cette pyramide technologique. Le plus petit dénominateur commun du Web. La base. Groupe rythmique. Savoyards de tous les desserts du web. C'est du HTML. Et il me semble de plus en plus qu'une couche entière d'ingénieurs front-end ne connaît pas ou ne comprend pas la technologie principale du front-end.

Une page Web est un document. Tout composant, qu'il s'agisse d'un modèle de blog, d'un site d'actualités, d'un panneau de statistiques marketing ou d'un formulaire d'inscription, fait partie du document. Les documents ont une structure. Sur Internet, il ne s'agit pas seulement des éléments visuels ou de l'architecture fournis par votre plateforme. Il s'agit de choisir les éléments sémantiquement corrects afin que votre page Web, composant, quel qu'il soit, soit correctement formaté structurellement. Les titres doivent être des titres, les listes doivent être des listes, les boutons doivent être des boutons et les tableaux doivent être des tableaux. Vous pouvez les styliser (à peu près) comme vous le souhaitez - le titre n'a pas besoin d'être grand et gras avec une indentation ci-dessous. Cela dépend de vous, mais cela devrait certainement être un titre, et je peux vous battre si vous le faites comme un div .

Le HTML n'est pas si difficile à apprendre, surtout si vous connaissez déjà les frameworks JavaScript. Je n'y ai pas pensé, mais je suis sûr qu'il n'y a qu'environ 116 éléments là-bas, et la plupart d'entre vous ne seront jamais nécessaires. Pourquoi ne pas les apprendre?

Je fais partie de ces gars qui travaillent tout au bord du front end. Je fais du HTML et du CSS, il est donc facile pour moi d'encourager tout le monde à apprendre ce que je sais déjà (pour mémoire, je ne sais pas tout - nous avons encore beaucoup de débats dans notre bureau sur la meilleure façon de marquer un composant particulier). Ce n'est pas que mon travail soit plus important que le vôtre. Si vous écrivez du code qui affiche quelque chose dans le navigateur, c'est certainement votre travail.

Il s'agit de convivialité et d'accessibilité. Si vous ne considérez pas la structure sémantique de votre page Web ou application comme importante, vous dites en substance: "Eh bien, tout fonctionne pour moi, vous pouvez le publier." Je ne pense pas que Javascript soit suffisant ici, tout comme CSS. Les moteurs de recherche doivent lire votre contenu, ne pas profiter d'animations rapides ou de dégradés fantaisistes. Le lecteur d'écran doit lire votre contenu. Les utilisateurs sans souris doivent travailler avec votre site. Qui sait quelle technologie sera la prochaine et comment elle percevra votre application, mais je parie sur le dernier bitcoin, qui sera probablement aidé par la capacité de lire, d'analyser et de naviguer facilement dans le contenu. Toutes ces technologies devraient percevoir le contenu comme un contenu intégral, et pas seulement des lignes de texte enveloppées dans des balises dénuées de sens. Ils devraient voir ce qu'est un tableau et comment le présenter, ce qu'est une liste et comment le présenter, ce qu'est un bouton et ce qu'est un drapeau. Faites tout div, et ils doivent faire beaucoup de travail pour reconnaître de telles choses.

«Mais mon framework s'occupe de tout. J'écris juste des modèles .jsx »

Non. Écrivez le code HTML correct dans votre JSX. Tu peux le faire. Juste parce que vous utilisez React ou Vue ou quelque chose d'autre, vous n'avez pas à tout écrire avec des divs. Pas obligatoire.

"Cette bibliothèque ajoute partout des attributs WAI-Aria, donc tout va bien avec l'accessibilité."

Super. Si vous avez écrit le code HTML correct, la plupart de ces attributs ne seraient pas nécessaires du tout. Vous obtenez gratuitement tout un tas de fonctions d'accessibilité, en utilisant simplement un vrai button au lieu d'un div avec un onClick événements onClick . GRATUITEMENT. C'est l'accessibilité, la performance et la convivialité, gratuitement. GRATUIT!

Ce sont des choses vraiment importantes. S'il n'est pas suivi, il brise lentement (en fait pas si lentement) le Web. À tout le moins, le rend moins accessible aux personnes qui utiliseront votre produit. Si vous vous appelez ingénieur front-end, votre responsabilité consiste à apprendre et à utiliser les bases du Web, communes à tous les navigateurs, plates-formes, appareils ou appareils électroménagers pouvant accéder à Internet.

Veuillez le faire. Améliorer Internet et aborder le développement de manière responsable. Il existe suffisamment de ressources sur le Web qui peuvent vous aider, en voici quelques-unes pour vous aider à démarrer:

• Apprenez à mettre en page un document en HTML. Essayez des exercices mentaux simples lorsque vous regardez une affiche de concert ou une page de journal - et imaginez comment elle sera structurée en HTML. Si vous avez le temps, écrivez ce HTML. Utilisez ces connaissances dans le travail quotidien.
  
• MDN est une excellente ressource avec des blogs, des tutoriels et des liens utiles.
  
• Tendez la main aux gens de la communauté. Lisez les blogs (par exemple, le récent article d' Andy Bell sur l'utilisation du HTML sémantique) et regardez la vidéo .
  
• Quand j'étudiais, regarder la source était toujours utile. Nous avons collectivement rompu cela pour les générations actuelles et futures, mais je peux vous impressionner avec la puissance des «Developer Tools» dans le navigateur
  
• Découvrez comment fonctionne la technologie d'assistance sur le Web
  
• Regardez les spécifications HTML ou même juste une liste d' éléments HTML et des exemples de leur utilisation.
  
• Si vous travaillez en équipe, discutez du balisage. Discutez vraiment, il sera correct d'insérer un élément sous la forme d'un table ou dl ( Description List Element , MDN). Ce sera très amusant, je le promets.
  
• Découvrez qui est le meilleur expert HTML de votre équipe et demandez-lui de revoir votre code. Si c'est moi, toujours heureux de parler.