HTML is the web

What is now with HTML in the frontend? Recently, I talked to many developers. It seems that some do not even understand HTML. In a sense, they understand something. They understand what a div and what a span , and when everything looks good and works on a click, it suffices. To such an extent that many people on the question of HTML answer: "Oh, yes, I now do everything in React or Vue." But it really doesn't matter that you only write Javascript. If you are developing websites, then HTML is the most important thing for you. This is the web.

It's about what the user consumes. This is UI and UX. Here is the whole package. In descending order of importance: HTML, CSS and behavior (which can be provided by Javascript - or maybe not).

I see a problem at the bottom of this technological pyramid. The lowest common denominator of the web. The foundation. Rhythm group. Savoyardi all web desserts. This is HTML. And it seems to me more and more that the whole layer of front-end engineers do not know or do not understand the main technology of the frontend.

A web page is a document. Any component, be it a blog template, a news site, a marketing statistics panel or a registration form, is part of the document. Documents have a structure. On the Internet, it’s not just the visual elements or the architecture that your platform provides. We are talking about the choice of semantically correct elements so that your web page, component, whatever, is properly structured. Headings should be headings, lists should be lists, buttons should be buttons, and tables should be tables. You can style them (pretty much) as you like — the title doesn't have to be large and bold with indentation below. It depends on you, but it definitely should be a headline, and I can fight with you if you make it as a div .
')
HTML is not so difficult to learn, especially if you already know JavaScript frameworks. I did not count, but I’m pretty sure that there are only about 116 elements, and you will never need most of them. Why not learn them?

I am one of those guys who work on the very edge of the front end. I do HTML and CSS, so it’s easy for me to encourage everyone to learn what I already know (for the record, I don’t know everything — we still have a heated debate in the office on how best to mark a particular component). The point is not that my work is more important than yours. If you write code that displays something in a browser, then this is definitely your work.

It's about usability and accessibility. If you do not consider the semantic structure of your web page or application important, in fact, you say: "Well, everything works for me, you can release it." I don't think Javascript is enough here, just like CSS. Search engines should read your content, not enjoy fast-paced animations or fancy gradients. A screen reader should read your content. Users without a mouse should work with your site. Who knows what technology will be next and how it will perceive your application, but I’m willing to bet on the last bitcoin, which will certainly help it to be able to easily read, analyze and navigate through the content. All of these technologies should treat content as whole content, not just text strings wrapped in meaningless tags. They should see what the table is and how to present it, what the list is and how to present it, what the button is and what the check box is. Make everything div'ami - and they have to work devilishly to recognize such things.

“But my framework takes care of everything. I just write .jsx templates

Not. Write the correct HTML in your jsx. Can you do it. Just because you use React or Vue or something else, you don't have to write everything in divs. Not required.

“This library adds WAI-Aria attributes everywhere, so accessibility is fine.”

Fine. If you wrote the correct HTML, most of these attributes would not be needed at all. You get a whole bunch of accessibility functions for free by simply using a real button instead of a div with an onClick event onClick . IS FREE. This accessibility, performance and user friendliness are free. IS FREE!

These are really important things. If you do not follow them, it slowly (actually not so slowly) breaks the web. At the very least, makes it less affordable for people who will use your product. If you call yourself a frontend engineer, then your responsibility is to learn and use the basics of the web, common to all browsers, platforms, devices, or home appliances that can access the Internet.

Please do it. Make the Internet better, responsibly approach the development. There are enough resources on the Web that can help, here are a few to get you started:

• Learn how to lay out a document in HTML. Try simple mental exercises when looking at a concert poster or newspaper page - and imagine how it will be structured into HTML. If you have time, write this HTML. Use this knowledge in your daily work.
  
• MDN is a great resource with blogs, tutorials and useful links.
  
• Talk to people in the community. Read blogs (for example, Andy Bell's recent post about using semantic HTML) and watch the video .
  
• When I studied, viewing the source was still useful. We collectively broke it for present and future generations, but I can impress you with the power of “Developer Tools” in the browser.
  
• Learn how assistive technologies work on the web.
  
• Look at the HTML specifications or even just the list of HTML elements and examples of their use.
  
• If you work in a team, discuss the markup. Actually argue, it will be correct to insert some element in the form of a table or dl ( Description List Element , MDN). It will be very fun, I promise.
  
• Find out who is the best HTML expert on your team and ask him to review your code. If it's me, always happy to talk.