, , , ,

HTML Improved Using Simple CSS and Proper Elements

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.

HTML Improved

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.

Whatchu do

Leave a Reply

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