Let’s Build Our First Skeleton
A Look at HTML Structure
An HTML document begins with a doctype that shows the HTML version. It has two main parts: the and . The has information like the title, character set, and links to styles or scripts. The shows the content users see and use. This setup is key for building clear, working websites.
Hello again!
It’s Elysa, ‘The Vanilla Developer.’ In our last post, we learned that HTML is the skeleton of every website, built from individual LEGO blocks called elements. I promised that we would build our very first, tiny skeleton together, and today’s the day we do it!
We’re going to look at the most important, foundational tags that every single webpage needs to exist. Think of these as the main pieces of the skeleton: the skull, the spine, and the body.
Let’s get started.
The Main Instruction Manual: <!DOCTYPE html>
Before we do anything, you need to know that the very first line of every HTML file is a special instruction for the web browser. It looks like this:
All this does is tell the browser, ‘Hey, the document you’re about to read is a modern HTML file, so please use the current rules.’ It’s like the cover of the instruction manual for our LEGO set. It’s a simple but first step. After this very first line, every HTML page is built with a few essential elements that hold everything else together.
The <html> Element: The Container for Everything
Right after the DOCTYPE, we need a container for our entire skeleton. That’s the <html> element. The opening <html> tag goes at the very beginning, and the closing </html> tag is the very last thing in the file. It’s the big LEGO baseplate that we put everything on top of. Just a quick reminder the opening and closing tags are similar, and they make a sandwich which will enclose all the rest of your content. However there is one thing that makes the closing tag different. Be sure to use the / which lets you know you are making a closing tag.
The <head> Element: The Skeleton’s Brain
Every skeleton needs a head, right? But this isn't a part you can "see." The <head> element is like the brain of your webpage.
It holds important, behind-the-scenes information, like the title that shows up in your browser tab. All the data inside the <head> is for the browser to understand, not for your visitors to see on the main page.
The <body> Element: The Visible Skeleton
If the <head> is the invisible brain, the <body> is the rest of the skeleton. It’s the part that everyone actually sees!
Everything you want to display on the page, all your headlines, paragraphs, images, and links, will go inside the <body> tags. This is where all the fun stuff happens.
Putting It All Together: The Full Skeleton
When you place all of these pieces together, you get the basic structure for every webpage on the internet. It will look just like this:
A basic HTML structure.
Look at that! We have our DOCTYPE structure, our main <html> container, a <head> with a title for the browser tab, and a <body> with a visible headline and paragraph.
A Quick Note on Attributes
Before we wrap up , remember in the last post I mentioned that tags sometimes use attributes? Attributes are just extra information or instructions that you can add to an HTML tag. They are always inside the opening tag and usually look like name=’value’.
For example , the anchor tag <a> (which creates the links we talked about) is useless on its own. There needs to be an attribute so that it will know where to go. The href attribute tells the link its destination:
<a href=’https://eranovadesign.com’>Click here to visit my portfolio!</a>
Here, href is the attribute’s name, and the URL is its value. We’ll dive much deeper into these in the future, but it’s good to now that they add special powers to our HTML tags!
We Did It!
You have now seen the complete, fundamental structure of a webpage. Every single site, from the simplest to the most complex, starts with this exact skeleton.
Now that we know how to build a proper structure, what about making it look nice? In the next post, we’ll talk more about attributes, and how they can change the content of your web page.
Thanks for reading!
Happy coding,
-Elysa, The Vanilla Developer
