Bootstrap and semantic CSS/HTML?

Bootstrap’s row and column paradigm sounds a bit “table like” to me… but avoids many pitfalls of HTML table mis-use for web design.

While preparing for an upcoming project that will give me a much (much!) deeper dive in to back-end and full-stack development, I’ve been reviewing/rehashing a lot of my front-end web skills: HTML, CSS, JavaScript, jQuery, AngularJS, etc. In the course of delving in to the well-established Bootstrap framework for websites and web applications I immediately bumped into the paradigm of rows and columns, and the use of divs with “row” and “column” classes, and had a moment of deja vu.

Didn’t we finally get rid of the scourge of tables, and their (mis-)use to format websites? I mean, I was still seeing HTML tables extensively used in law school and university websites within the past couple of years… That was one bad habit that took a really long time for a lot of folks to break. Is marking up, into rows and columns, generic (non-semantic) divs, using (positional, non-semantic) CSS classes some kind of sneaky zombie return of the dread tables?

A little quick searching revealed I wasn’t the only one to have this first reaction. This useful Stack Overflow thread disposes of the question well, I think. A poster asked why using Bootstrap columns and rows was better than using HTML table columns and rows, in terms of adhering to an orthodox separation of presentation and content. The best answers, I thought, clarified the question and made several significant points. At the very least, the Bootstrap-type approach reserves the table elements for actual tabular information. There is a difference between the non-semantic mark up that Bootstrap (but also many other real-world applications of CSS) does require (inserting HTML content into divs that have only a formatting or presentation purpose) and the incorrect use of semantically-defined HTML that happens when we mis-use tables. That last point, in particular, seems most important: mis-use of something that is “supposed to be” semantic is significantly more challenging for both later developers/designers who must work with the resource and potentially for machines that must interpret it.

I’m still not sure. Without extensive experience with Bootstrap it is hard for me to say whether the convenience, speed, and “portability” for developers of having a standardized class vocabulary for grid placement across many website front ends trumps styling websites according to elements and classes named in a more purely “semantic” way. I do, however, think that all or most well-designed sites or applications, especially those that have good site-level use of HTML (especially with the new HTML5 elements) should be perfectly capable of being flexibly styled using only elements and classes that contain real, meaningful, names related to their functional role or the informational content that they contain.

I also agree with the “at least it isn’t mis-use” position that no CSS-based approach, however badly-chosen or non-semantic the class names used, should recreate the problems of the table-derived layouts and the headaches that they could create for easy re-styling or re-purposing (not to mention responsiveness) of the content they included.

This entry was posted in Websites on by .

Leave a Reply

Your email address will not be published. Required fields are marked *