In the original table, elements are arranged in rows, columns and colors using their specific properties, which actually are not at all present in these html elements.
In this table I see only the meaning for the colors, but why not to use the two dimensions of the table to convey something different (losing, of course, the familiar shape)?
One request: please switch from W3Schools to the official W3C spec for the "more-info" link.
Not to be pedantic (I hate that word), but in the spirit of improvement, you may want to spell check your popups.
(example: "<bdi> Text that is seperated from directional formatting of its surroundings."
... should be separated)
At first, I looked at this chart, and thought "cute, but what good is it." Then I started clicking on it, and eventually found myself printing it and hanging it in my office! Good work.
With html5 there's lots of new tagnames to remember.
