The Web Evolution: HTML

The mid 90's arrived, It is wonderful to remenber the early days of the Web and understand how it became part of our lives and how everything adapted to our needs. That's why I want to take you on a trip to the past for reviewing the main technologies that made all this beauty possible.

As we saw in the in our previus post the first 5 years of the Web a lot of things happened, but on 1995 something even greater take place. But before we reveal it, let's make a quick explore on which Web technologies existed in that moment in time.

HTML: HTML 1.0. A simple language to represent text documents on a computer display
HTTP: HTTP/0.9. A sigle line request protocol for reading remote HTML documents with no acknowledgement on transmit/receive.
Client Web Browser: WorldWideWeb, the first Web browser developed by Sir Tim Bernes Lee
Server: the HTTP daemon. A simple daemon that implements the HTTP protocol on the server side for sending HTML documents on requests from a client web browser.

Now it's time to reveal the event that moved the Web forward. On 1995, a singular turn of events caused the restrictions on using the Internet to carry commertial traffic to be removed.

👏 👏 👏 👏 👏

This lead a lot of companies to rise using the Web as a showcase for their products and services.

Why this was so important? 🤷. Because this started a commertial competition that push the research and development of these Web technologies forward.

Today we are going to focus on the HTML Language and It's evolution.

HTML: 20 Years Creating Documents over the Internet 📚

HTML stands for HYPERTEXT MARKUP LANGUAGE. It is a format to represent text documents on a display (e.g PC screens) with references to other text called HiperLinks.

As we seen in the introduction of this article, the first version of this Language was HTML 1.0. It's objective was to share academic information on a readable way throught web browsers. At this early stage there were almost none web developers so contribution to this language was very limited.

<HTML>
This is an Example HTML Document
</HTML>

HTML 2.0 The first standard comes to life

On 1995, The Internet Engineering Task Force (IETF) organizes a working group of HTML and this new version was published. Regardless of its version number, HTML 2.0 was the first official HTML standard.

Nothing more to say about this version. Let's check It's features:

Headings: H1 … H6 for managing titles and subtitles
Block Structuring Elements: For structuring text. Paragraph P, Preformatted Text: PRE, XMP and LISTING, ADDRESS, BLOCKQUOTE.
List Elements: Unordered List: UL/LI, Ordered List: OL/LI, Directory List DIR, Menu list MENU , Definition List DL,DT,DD
Phrase Markup: for render highlighted phrases distinctly from plain
Line Break: BR
Horizontal Rule: HR . divider between sections of text
Image: IMG, with atributes ALIGN, ALT, ISMAP, SRC
The HTML Document Character Set
Accessing Resources
Activation of Hyperlinks
Simultaneous Presentation of Image Resources
Fragment Identifiers
Queries and Indexes
Image Maps
Forms
Form Elements
Form Submission

HTML 3.X: Tables at last

HTML 3.0: This version was an interesting upgrade because it provided aditional features such tables, text flow around figures and rendering math elements. But there was a problem, this version had very little backward compatibility with 2.0 version. That's why this spec never saw the light of day.

Nevertheless, was an important event because it had a profund effect on current practices in Web Browsers, the concepts of this spec endured and were included on later versions, features like Tables, text flow around images, page alignment for block structuring elements as well as other character level formatting elements.

HTML 3.2: On 1996 at the World Wide Web conference in Paris, The W3C review board annouced HTML3.2, this was a mix between HTML2.0 features, HTML3.0 features and propietary tags implemented by browsers vendor at the time (Most of Netscape's visual markup tags).

Not Having

Style Sheets, Frames, Scripting, Math and Internationalization

New

tables, applets, text flow around images, subscripts and superscripts

To check a full list of the features go here.

HTML 4.X: CSS and Accessibility are born

In July, 1997 the W3C released the first public draft of HTML 4.0. Improvements such as recognition of the syntax for frames that is in common use, and an emphasis on making the language accessible to people with disabilities ❤️. HTML 4.0 is also the first version to use Unicode as the base character set, allowing millions of characters to be displayed instead of just a few hundred.

On 1999 a minor upgrade take place and HTML4.01 was released including cascading style sheets (CSS) which allowed aspects such as text, colour, font and backgrounds to be easily altered.

HTML5: Last but not Least

HTML5 was first released in 2008, with a major update and "W3C Recommendation" status in 2014.

This HTML5 thing start as a movement, major browsers companies like Apple, Google, Mozilla and Microsoft started their onw working group to adapt HTML to the market needs, meanwhile W3C was focus on the development of the XHTML spec.

This new version improve to match the latest multimedia support, redability and mantaining backward compatibility. Also, It introduces new markup and APIs for advance web applications, the ability to build cross platform mobile apps, include native support for multimedia and graphical content and much more.

Semantics

This allow you to describe better what your content is

<section> Defines a section of a document with semantic meaning providing extra context from the parent element "point of view".

<header> On a page can contain the Logo, Navigation and Title, but in general, defines an initial piece of info. Can be inside section or article indicating the author, title and date even inside a nav or aside.

<footer> Tipically defines a piece of info at the end of a page (contact, copyright , links). Similarly to the header tag, can be use inside article, section, aside, etc.

<nav> Defines the navigation on a page. Contains Navigation Links, it allow primary and secondary menus but no nesting nav inside nav.

<article> Defines self-contained content. They are stand-alone units of info than can be distributed with no need to add more content, so are a perfect choice for blog posts, news articles, and similar content.

<aside> Defines extra content that is related to the main one but has it own outline, like an explanation box. It usually contains ads.

There are numerous new elements, like <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, or <meter> and <main>, increasing the number of valid HTML5 elements.

The <video> element: Allows embed videos easily.

<video src="Hello.webm" controls><video/>

Like the <video> tag, the <audio> tag is used to embed sound content in documents. It can be use for streamed media destination.

<audio
        controls
        src="/media/examples/t-rex-roar.mp3">
</audio>

Form improvements like the Constraint Validation API, new attributes and new values for the <input> type attibute and a new <output> element.

Performance and Integration

Web Workers: JavaScript code running on background threads, so these activities prevent slowing down user interactions events.

XMLHttpRequest level 2: You can fetch asynchronously sections of the page for display dynamic content. This is the technology behind Ajax.

Just In Time compiling JavaScript engines: Interpreter Vs Compiler, JIT Complitation is a combination of both worlds that improve performance.

History API: Mainipulation of browser history at hand.

The contentEditable Attribute: Setting an HTML element contenteditable attribute to true lets you run commands to manipulate its content.

Drag and drop: Yhis HTML5 API support dragging and dropping items inside and between web sites.

Focus management in HTML: Support for activeElement and hasFocus attributes

Web-based protocol handlers: Registering web applications as protocol handlers using the navigator.registerProtocolHandler() method is now available.

Animation Optimal performance: Presenting requestAnimationFrame, it allows control of animations rendering.

Fullscreen API: Allows a Web page or application to run fullScreen, without the browser UI displayed.

Pointer Lock API: Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.

Online and offline events: Events triggered when online state changes.

Connectivity

Web Sockets: Allows creating a permanent connection between the client and server for exchange data through.

Server-sent events: Now a server can push events to a client.

WebRTC: Support for Real-Time Communications Apps to run directly in the browser, allows connecting and controlling videoconferencing.

Device Access

The Camera API: Add support for manipulating the computer's camera.

Touch events handlers.

Geolocation: For locating a user using geolocation.

Detect Device Orientation: DeviceOrientationEvent detects orientation and DeviceMotionEvent detects acceleration NOTE: This is an experimental technology.

Offline and Storage

Client-side session and persistent storage: Allows web applications to store structured data on the client side. SessionStorage key/value pair storage during session and LocalStorage persistent key/value pair storage.

IndexedDB: A web standard for the storage of significant amounts of structured data in the browser. Its provide high performance searches using indexes.

File Api: Now it is possible for web applications to access local files selected by the user

Styling

New background style: Shadows on elements using box-shadow, multiple backgrounds, and CSS filters.

Fancy borders: Now is possible to use images to style borders with border-image and rounded borders via the border-radius property.

Animating your style: CSS Transitions and CSS Animations to add movement to your apps.

Typography improvement: Better control over typography. You can control text-overflow and hyphenation, add a shadows or control its decorations. Custom typefaces using @font-face at-rule.

New presentational layouts: Two new layouts have been added, the CSS multi-column layouts and CSS flexible box layout.

2D/3D Graphics and Effects

Canvas: Allow drawing 2D/3D graph.

WebGL: Brings 3D graphics to the Web using <canvas> element, with an API that conforms to OpenGL ES 2.0.

SVG: Scalable Vector Graphics; vectorial images that can scale without losing quality.

Last Words

For me was a total pleasure to be your host on this travel through time in which we could review the HTML Language and its evolution. As we could see the last version of it has a lot of improvements that helps developers to build amazing websites, and web, mobile and desktop apps. For more details on this spec you can visit this guide.

Now, tell me in the comments what HTML5 feature or features do you like the most and why? I'll be reading and replying you. See ya later!!!.

Fullstack Web & Mobile App Developers & UI/UX Designers Online Community. Join Us and...

Let Your SwordVoice be Heard!!!