HYPER TEXT MARKUP LANGUAGE — A brief history

HTML is a language that web browsers use to understand and compose text, images, or other multimedia assets. It was originally prototyped and pioneered in the 80s by physicist and inventor of the world wide web, Tim Berners-Lee. He wanted a way for scientists to share documents through networks regardless of platform, operating system, etc.

By 1991, he released the first public description of HTML and the initial 18 elements of an html document. In 1993, the Internet Engineering Task Force defined HTML as an application of Standard Generalized Markup Language based on the publication “Hypertext Markup Language(HTML)” by Berners-Lee and Dan Connolly.

It wasn’t until later in 1995, that the IETF created an HTML Working Group with the aim of developing a standard for all future implementations of HTML. That year they published “HTML 2.0”, beginning the formal maintenance and defining grammar of HTML.

Image for post

A key takeaway about the relationship between CSS and HTML in that CSS does not fundamentally change HTML — only the way it’s presented.

HTML & CSS ARE NOT PROGRAMMING LANGUAGES

HTML and CSS are not considered programming languages specifically because you cannot do things like write functions or make API calls (push or pull data) without programming languages like Javascript or Python.

Today in 2020, a whopping 95% of the web uses Javascript! And yet still, HTML (and XML) remain a fundamental core part of web development.

There are many complex frameworks that still rely fundamentally on HTML files. React.js for example, uses a component class system that allows you to create modular components that render HTML-like elements to the DOM (Document Object Model). And yet, a react app still uses the base fundamental html file, index.html.

Image for post

So what was the original use and purpose for HTML and CSS if you can’t do complex things with them on their own?

BECOMING A FRONTEND DEVELOPER REQUIRES UNDERSTANDING THE DOM (DOCUMENT OBJECT MODEL)

It’s easier to understand the Document Object Model by remembering the base intention of HTML is to share a document in a way that is platform independent. This is one reason why HTML remains the root of the web, regardless of the dizzying amount of new platforms.

The document object model is a cross-platform and language-independent interface that treats XML or HTML documents like a tree structure. Each node of the logical tree is a data object, representing a part of the document. By ‘mapping out’ the HTML document as a logical tree, we are able to pin point these data objects of the document and run programming logic on them without actually changing the document (hence the model part). Every browser must use a DOM to display web pages with Javascript, though not all browsers use the same sort of DOM. This is one among many reasons why the exact same website will display different for users of varying browsers. You can read more about it on mozilla.org.

Image for post

HTTPS VS HTTP

Ever wondered about that http at the beginning of web addresses? It stands for Hyper Text Transfer Protocol and tell your browser how to transfer the html document. Maybe you’ve also noticed a lock or unlocked symbol in the address bar of a website. This is related to SSL (Secure Socket Layers) certificates and how the DNS records are configured for the site.

Without going too much into SSL, just know that if a site has an SSL cert and is configured properly, all traffic should be forced to use the https:// preffix and thus must undergo a check of the certificate to verify that the page you are being shown is actually coming from that address. Typical attacks on insecure http:// connections are known as man-in-the-middle attacks, because they attempt to grab information you are trying to send to a website. When you enter credit card info on a payment page and hit purchase, it sends out an http(s) request basically saying “hey I’ve got some credit card info, how do I charge it?”. Without an SSL cert and https configured, there’s no way to ensure that you are actually sending or receiving this info from the intended address.

CSS (CASCADING STYLE SHEETS)

CSS is a stylesheet language used in the presentation of the HTML document. This allows for styling, color enhancements, animation, image modification and more.

By assigning classes or IDs to the HTML elements in our HTML document, we can select these elements from the DOM and add styles. As the name implies, these stylings ‘Cascade’ down the CSS file — meaning that a styling written at the top of the CSS file will be overwritten by later stylings that select the same DOM element.

We can’t use it to create or remove anything from the HTML document, though we can do somewhat fun tricks with CSS like animations or hiding/showing particular HTML elements. Before the robust extension and development of Javascript, much of the interactive feel to websites came from CSS.

Thinking of CSS as a presentation of the document is key in understanding its relationship to html files. It does not fundamentally change the HTML or DOM. This becomes increasingly important as you begin to work with complex projects and relatively “new” uses of html such as with React.js