Getting to the Meat of HTML

June 27, 2019 Posted by Programming 0 thoughts on “Getting to the Meat of HTML”

Pete Lambert, a UI engineer, recently published a well-written rant about the importance of semantic HTML. His post, titled, HTML is the Web brings HTML back into its proper perspective.  This made me start to wonder why HTML isn’t written with the same rigor as one would write JavaScript code.

There’s an obvious answer, of course. That is that poorly written JavaScript makes itself known to all involved in the form of jank and unreadability. On the other hand, markup is so forgiving that forgetting to close a tag won’t completely break everything; you don’t need to be a wizard to write functioning HTML. But that’s not enough to explain why markup is loosely implemented across a range of skill levels–from hobbyists to professional developers. Company style guides would include an indentation rule just to squash the single space vs. double space debate. Yet not a lot of thought seems to go into making sure crawlers can efficiently read markup. The problem may lie in HTML’s shallow learning curve. When you were first learning HTML, perhaps the only difficulty you might have faced was getting your Hello World to show up in a browser. From then on, you might have quickly experimented with a few tags, and then jumped straight into the cool parts of front end: CSS and JavaScript.

From then on, your experience with HTML may have been something you sort of learned by osmosis. Whenever you wanted to practise styling a button, you might have felt that a div appeared to give you a clean slate from which you could pour your CSS talents on to.  Actually, you might have begun to feel that divs rule HTML. If you needed a new element, slapping some divs down seemed to work alright. What really mattered, you felt, were the ids and classes. Rather than using semantic elements, you would let ids do the heavy lifting from a readability standpoint.

All of the above in some ways describes me; though, starting out I did invest in the Visual Quickstarter Guide for HTML5 and CSS(notice how HTML usually doesn’t stand alone).  I still remember being fascinated by how specific HTML can get in its layout. The book teaches readers what elements like article and section can be used for. Rather than using a boring div, use an article tag for content-rich pages. Use an aside for your sidebar rather than floating a div.

For some time after reading the book, I did write semantic HTML. However, once I fully dove into CSS, and then JavaScript years later, I began copying coding styles that I’d see on the internet; divs with a button class, divs with a sidebar class–divs everywhere; it was all about styling and scripting, anyway.

The prevalence of bad examples on the web reinforces bad habits. Some of us have never considered it necessary to dive into the deep end of HTML. We explore the hard parts of JavaScript and the hacky parts of CSS, but we manufacture HTML like it’s an afterthought. I’ll finish my point off with an anecdote.

I was working on front end UI with a friend who was just learning the front end. I quickly slapped together some markup for him to style; though, knowing that he was slightly new to HTML, I decided to do the responsible thing and write semantic HTML. When we met up on Google Hangouts to discuss the code, he acted as if I’d written Greek.

His confusion can be summed up in one question: “Why didn’t you use divs?”

That gave me the opportunity to explain that part of writing good HTML is writing semantic HTML and that writing semantic HTML not only makes it easier for us to read HTML, but it also makes it easy on web crawlers.

Of course, there are a bevy of other benefits that actual HTML experts can elaborate on. But you can see how it’s easy to feel that you know enough HTML to be dangerous. That thinking is what prevents one from getting to the meat of HTML. So, Lambert  concludes his post by outlining ways in which one can learn the nuances of HTML. The resources he listed are worth checking out.

 

Pankaj Patel

Please follow and like us:
0
Tags: