The Power Of HTML And CSS Evolution

The HTML evolution from HTML 2 to HTML 5 has seen an enormous shift of things which has empowered web developers in tremendous ways. Committed web engineers that have been in this space long enough will tell you that these changes have made web development much easier. A release of an HTML version means a better and easier way of doing things and for those that have not been writing HTML for some time, catching up with the rest without taking a course is next to impossible. With HTML 2 that was launched in 1995 all the styling and how the page looked was a responsibility of HTML.

As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. This evolution gave the designer more control over site appearance, at the cost of more complex HTML. Variations in web browser implementations, such as ViolaWWW and WorldWideWeb, made consistent site appearance difficult, and users had less control over how web content was displayed.

This saw the introduction of presentation capabilities and nine different style sheet languages were proposed. Out of these, only two made their way to the final stage, which are CSS: Cascading HTML Style Sheets and Stream-based Style Sheet Proposal (SSP), and W3C picked interest in CSS and further work was done on it to make it better.

The introduction of HTML 3.2. This was the formally approved industry-wide HTML and alongside it came the very first release of CSS (CSS level 1). This meant that the designer was being given more site appearance control instead of complex HTML which is known for the structure and not the display.

At the same time in 1996, Internet Explorer 3 was released and later on 4 with limited support for CSS and with many bugs. This did not allow CSS to thrive as expected. The value that CSS added to the HTML world was a few properties like font properties such typeface and emphasis, the color of text, backgrounds, and other elements, text attributes such as spacing between words, letters, and lines of text, alignment of text, images, tables and other elements, margin (border, padding, and positioning for most elements) unique identification and generic classification of groups of attributes.

The introduction of HTML 4 code-named Cougar, came with 3 variations. (i). Strict: that meant deprecated elements are forbidden, (ii). transitional which allowed deprecated elements (iii). frameset which saw only framesets being allowed. This adopted many browser-specific element types and discouraged the use of Netscape's visual markup features in favor of style sheets.

This was used by users for a long period of time since there was no release of a new HTML version but rather works around XML-based language. CSS then breathed to life CSS 2 which enabled the HTML 4 user to enjoy capabilities like absolute, relative, and fixed positioning of elements and z-index, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows.

There were a number of changes to this release and was finally released in 2011 as CSS 2.1 as it is commonly known. CSS 2.1 fixes errors in CSS 2, removes poorly supported or not fully interoperable features and adds already implemented browser extensions to the specification. Versions | DOCTYPES Ahoy | The New Elements in HTML 4 · <abbr> · <acronym> · <bdo> · <button> · <colgroup> · <del> · <fieldset> · <frame> · <frameset> · <iframe> · <ins> · <label> · <legend> · <noframes> · <noscript> · <object> · <optgroup> · <param> · <span> · <tbody> · <tfoot> · <thead> · <q> | The new Attributes · class · dir · id · lang · title | Deprecated Elements | Dead Elements

HTML 5 grand entrance came after a very long time HTML not seeing any change. It was released with the purpose of improving the language with support for the latest multimedia and other new features, to keep the language both easily readable by humans and consistently understood by computers and devices such as web browsers, parsers, and others without XHTML's rigidity and to remain backward-compatible with older software.

We see a beauty in replacing <div> tags with semantic HTML. HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML. It came with tremendous new features to handle multimedia and graphical content the awesome <video>, <audio>, <canvas> elements, Scalable Vector Graphics (SVG), MathML. New elements in the area of semantic meaningful structures were added like <main>, <section>, <article>, <header>, <aside>, <nav-bar> <figure>.

The APIs and Document Object Model (DOM) are now fundamental parts of the HTML5 specification. We see a whole new and powerful HTML coming through that needs less class and ID attributes and yet improves the underlying quality and meaningfulness of the web. The combination of CSS3 and HTML 5 gives the designer tremendous power to turn around the page. HTML 5 gives us significant power over the structure and CSS 3 more power over the presentation.

CSS 3 came with properties like the grid layout, flex-box, new animation, new font properties, transition and transform, multi-column, borders, color/image effects, text-decoration, new background properties, keyboard control, and so many others. CSS 3 consists of many different modules, each at varying levels of completion. I will be talking about these levels in my next article.

In conclusion, few web developers or even HTML engineers know how HTML/CSS has moved from one stage to another and how this has impacted the different generations. This has then led to many struggles of the same.