This post will help you do just that.
Have you ever read something online? I’m willing to bet you have. Was it a news article or a long-form travel story? A Wikipedia article or maybe a serialized choose your own adventure Harry Potter fan fiction? Perhaps it was this very blog post?
Regardless, do you remember when it was written and what it was about? Do you remember how it looked and who wrote it? Or, better yet, can you tell me what wrote it?
That’s right, what.
Not sure? Here’s a hint: when you look at a blog post, news article, or any written content on your browser you are looking at the end result of a set of precisely followed instructions. These instructions tell your browser how to build, present and interact with the content on your screen. So, in answer to the question, your browser is the what. The who, I’ll leave to you.
The how? The precisely followed instructions!
Let’s take this one step further by using an analogy.
HTML (hypertext markup language)
This is the architecture of your house — it tells your browser how to organize the content on the page and what that content is.
HTML tells your browser the semantic meaning of the content on your website. This is similar to a legend on a map. Without this legend, your browser would not be able to distinguish the difference between content types on your web page (paragraphs, lists, titles, etc.). Consequentially, without this legend, your brows would not be able to correctly assign the styles and behaviours that distinguish one content type from another. You don’t want your lists displaying as paragraphs, do you?
In other words, HTML provides a reference so the browser can understand what the content is:
That content is a paragraph.
- This content over here?
- It’s different from the paragraph!
- It’s a list!
HTML provides the distin level of detail so your browser can distinguish the content types.
For these reasons, I like to think of HTML as the architectural blueprint of your house.
CSS (Cascading Style Sheets)
This is the style of your house — from the carpet to the curtains, wallpaper to shingles, CSS is responsible for telling the browser how your web page should look and, if you desire, how it should transform.
CSS builds upon the architecture which HTML provides and references it to know which items it needs to apply styles to. Things like colours, spacing, animation and layout are controlled by CSS — without it, your webpage is boring.
Progressively, after the HTML is loaded, your browser then consults with CSS to understand how it should style all of the architecture laid out by HTML. Specifically, your browser references CSS to determine what the content defined in HTML should look like.
Everything from how the page should look on a phone, tablet or laptop to the colour of text, the spacing between lines and, as mentioned, the animation is provided by CSS.
For these reasons, I like to think of CSS as the style blueprint for your house.
This is the interactivity of your house — from when the lights should turn on to when the thermostat should lower, what time your alarm clock goes off to what temperature your oven should pre-heat to.
An output is the action that happens after the trigger is activated. For example, let’s say someone pressed the doorbell at your house (event trigger) the output would be the specific sound that plays. Another example: you turn your stove on. The temperature which it rises to before turning off is the output.
- HTML is the architecture
- CSS is the style
- Each of these technologies makes up the front end of your website and each is essential to what most users expect from a modern website.
- Someone who specializes in these technologies is called a web developer or front end developer.
So, hopefully after reading this post you now feel more familiar with how your browser constructs a web page.
Next, it’s time to learn about HTML, the most important part of a website.