The idea of the Semantic Web has been present since 2001. Back at 2006, Tim Berners Lee, widely recognized as the inventor of the World Wide Web came publicly with an initiative that was supposed to make the web a better place. The goal was to form a web of data which would contain elements linked by ontologies. The ontologies are actually a formal way to represent naming, types, and relations between elements.

Some tools for this purpose were built, such as RDF (Resouce Description Framework) who’s purpose is to describe internet resources,

The benefits of this approach are obvious, it would make the web more searchable and accessible.

Even though that exact idea didn’t get much further, the goal of standardizing the web remains.

HTML 5

One of the efforts in this regard was the adoption of HTML5, which is an HTML specification that has semantics as one of its core ideas. For example, anyone can notice that recently <b> and <i> tags in HTML are replaced with <strong> and <em> tags. This is because bold and italic are too much presentation related, and don’t speak much of the content. Bold and italic wouldn’t matter much on a browser for blind people, for example.

Separation of concerns

This leads us to the next point which is – the separation of concerns. To be more precise, one of the key Semantic Web concepts is the separation of content and presentation. It’s a philosophy that says that the meaning of any document should be contained in one place, while that the logic for presenting it should be in another.

In the usual setup, it would mean that the content should be covered within the markup language – HTML, while styling should be done with a tool that is intended for such a purpose, such as CSS. I think that this makes sense in practice too, as by structuring HTML around what content actually means, rather than how it looks, you can later change the way it looks without having to edit both the HTML and the CSS.

The Problem

My intention was to talk generally about the idea in this article. I don’t do much frontend stuff, so I am not going to discuss the actual development of Angular or Bootstrap apps, but rather the consequences it creates.

The most problematic thing to me is that frameworks such as Angular, Ember or Bootstrap clutter your HTML with needless elements, attributes and attribute values which make your HTML not conform to the original specification.

Personally, I don’t see how Angular’s ng-click is better than onclick, as these new attributes are not part of the original HTML specification. Yes, there are workarounds for this, if we are talking about Angular, but unfortunately most people don’t use them.

Bootstrap also has a bad practice of giving non semantic class names and if you thought that class names don’t matter, check this . Class names like “big” and “small” are diminishing the efforts to achieve separation of concerns.

The Result

You will usually judge a product by it’s quality, and not by the technology used to create it. Although modern Javascript frameworks probably make programming Javascript a lot easier, decoupled and with greater implementation of good programming practices, they are actually making the final product worse. The HTML that comes as a result, usually has little to do with the original HTML5 specification from W3 and that puts us further from standardization.

It just doesn’t contribute much to bringing order to something that matters so much to everyone, don’t you think?

Would you like to recommend this article to your friends or colleagues?
Feel free to share.