Stacie Farmer

Endlessly learning

Understanding HTML, CSS, and JavaScript - What they do and why they exist

March 6, 2020

Since the internet exploded across the globe, technology has grown and chanced immensely. But the foundations and the specific elements in the technology largely remains the same.

For web pages, those foundational technologies are HTML, CSS, and JavaScript. Why do we use all 3 and what is the intrinsic purpose of each?


HTML (HyperText Markup Language)

HTML is just the structure of a web page. It’s the bricks, the different pieces of wood, the windows, and everything else that goes into creating the structure of a house, but you know, for web pages.

HTML does nothing but tell a browser the purpose of an element (a piece of the web page). h1 means this is a top level heading while h2 is a second level heading. All the p elements are paragraphs while a caption says this is text to supplement something like an image.

HTML tells you what the element is for. It has no styling or any other functionality. This doesn’t mean it’s not vitally important.

When you accurately specify the elements on a web page, you let the browser and additional software (like accessibility programs) do something with that element. Headings are made larger according to importance. Forms can be read properly - and in order! - so everyone can fill them out correctly.

Even though it’s not flashy, HTML is the structure - the architecture if you will - of a web page. Everything else is built on top of it. People’s experience with a website can depend solely on how well the HTML is written (try using only the keyboard to navigate a website and you’ll know what I mean).

CSS (Cascading Style Sheets)

CSS does what its name suggests - it styles the web page.

It can do this MANY different ways, but its ultimate purpose is to add aesthetics and, hopefully, enhance the visual experience of a website.

Just because it’s adding style does not mean it’s simple - not in the least. CSS is a robust language on its own with tons of functionality. There are lots of ways to do something and it can be incredibly hard to make a web page look exactly how you want.

Getting really good at CSS takes rigorous time and effort and anyone who has those skills will be in high demand.

JavaScript (JS/ECMAScript)

JavaScript adds a whole new layer of interactivity to a website. It’s hard to believe not long ago you could surf the web with JavaScript disabled (for good security reasons). Now, it’s almost impossible. JavaScript adds so much functionality to a website that it’s used everywhere.

Out of the 3 here, JavaScript is the most like a modern programming language - both in how its written and what it can do.

It can evaluate what’s going on in the page and make something else happen.

For example, it can check to see if the body of the page has loaded and display a ‘Subscribe to my newsletter’ pop-up. Or it can see if the submit button was clicked and check the fields to make sure they’re valid then submit the form.

For better and worse, JavaScript can do a lot. Because of this, JavaScript is abused, a lot, to do malicious things. It’s powerful, and its power should never be underestimated. But if you can learn the ins and outs of JavaScript, you will also be in high demand.

In Conclusion

For almost as long as we’ve had the internet, we’ve had its 3 basic components:

  • HTML
  • CSS
  • JavaScript

HTML is still the foundation of every web page, but it is greatly enhanced by CSS for styling and JavaScript for interactivity.

All these languages have changed and evolved over the years, but their foundational purpose remains the same - and likely will for some time.