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.
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
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.
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.
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.
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