Have a look at the HTML at the example resource.
Using the power of regular expressions, I was able to re-write the HTML in a matter of minutes, to arrive at a more programmer-friendly, potentially more viewer-friendly; an over-all more user-friendly document.
Attached is an image of the resulting HTML, shown from within Annie DeBrowsa, my static content-management-system. Most clearly visible– to me, at least– are the replacement of simple <b>
(formerly used to address Bold typeface font transformations, improved with semantic markup, as <strong>
), using instead, a semantically-relevant structure using HTML Header or heading elements, to arrive at a document which can be viewed topologically from a Headings-Map, or Heading-Structured, topological perspective.
Note, where the Headings reach level 4 (Eg. <h4>
), my existing CSS (cascading style sheet) takes over. In particular, my style sheet uses a CSS Generated Content declaration for all <h4>
-level elements, inserting a star symbol to make those elements better pop, or stand-out from the page.
As this is a first-draft, i’m going to provide a screen-shot only to illustrate my results. I intend to publish both before and after versions of the HTML for the purposes of education, so the reader might more easily realize, first-hand in action, what I’ve merely attempted to describe.
This is a most excellent example of the benefits of transcoding from non-semantic; relatively dated, IDE-generated (Eg. Dreamweaver Integrated Development Environemnt), or simply to put it rather bluntly, poorly-written HTML markup, to arrive at HTML which is well-structured using the proper elements (Eg. using Headings, where headings are meant to be used, and omitting all deprecated elements, such as “B” for bold text); a semantically logical markup, ready to be styled indiscriminately using CSS, as the W3C Web Standards model, and users across the internet have recommended, and put into good practice.
Leave a Reply