Welcome to the Web!
Hello there! Welcome to the blog. I’m The Vanilla Developer, my name is Elysa, and my goal is to show you that coding isn’t as scary as it looks.
Have you ever wondered what a website is really made of? It has always fascinated me. Let’s take a look at the secrets behind what makes a website what it is. To put it simply, every website that you have ever seen, no matter how fancy, is built on a simple foundation called HTML. So what exactly is HTML, and what does it stand for? HTML stands for Hyper Text Markup Language. It is the language that is used to create web pages and make them functional.
Confused yet? Hyper Text Markup Language is a mouthful. Let me explain it a bit further. Hypertext are links that allow the reader or user to move from one place to another, either within the same document or to a completely different document. For example: this is a link. You don’t have to click on this one since it will only direct you back to the blog home page.
So now that you understand what Hypertexts are, let’s get an understanding of what Markup Language is.
Markup Language is what is used by computers to be able to speak to each other. It gives computers that are talking the ability to control how text is displayed on your web browser. This language uses tags and attributes, but we will discuss this a little later.
HTML is a Website’s Skeleton
The easiest way to think about HTML is to imagine a website as a person.
Just like a person has a skeleton that gives them their shape (a head, a body, arms, feet), a website has HTML. It tells the web browser where to put the headline, the paragraphs of text, the images, and so on.
It’s the bare bones of the page. Nothing fancy. Just the essential structure.
So How Does It Work?
In order for the browser to understand each part of the skeletal structure we need to use tags. But what are tags? Tags are used to mark the beginning and closing of an HTML element.
Think of HTML tags like making a sandwich. The opening tag, <h1>, is the top slice of bread. It tells the browser, 'Get ready, a big headline is starting!'
The closing tag, </h1>, is the bottom slice of bread. It tells the browser, 'Okay, the headline is finished.' The only difference is that the closing tag has a little forward slash /.
Your text goes right in the middle, just like the filling in a sandwich. This whole package the start tag, the end tag, and your text, is what we call an HTML element.
An HTML element is a building block that helps to determine the structure of an HTML document. This includes the content of what is on the web browser page and how it is displayed. For example you can think of an element as a LEGO block. Each lego block has a specific shape and purpose. You can connect LEGO blocks to create a larger structure, even nesting smaller pieces into larger ones to create more complex sections. Similarly, when working with HTML elements you are nesting different elements into a tree like structure that will become your web page.
Varying lego piece that can make up a whole structure.
That’s a lot to take in, and I would love to go even further. But I think I’ll explain more another day.
If you’re curious to learn more, here are three websites that are fantastic and trusted by everyone.
W3Schools: The best place to start. It has very simple lessons and lets you play with live code examples.
MDN Web Docs: Think of this as the giant, official dictionary for all things web-related. It's a bit more advanced, but it's the most thorough resource out there.
HTML.com: A great, straightforward site with easy-to-follow guides just for HTML. (Great for a bare bones foundational understanding.)
You Did It!
And there you have it. You now know that a website is just a skeleton (HTML) made of simple, labeled parts, with a few magic teleporters (links) thrown in.
See? Not so scary after all. In our next post, we'll build our very first, tiny skeleton together. Thanks for reading!
Happy coding,
-The Vanilla Developer
