Understanding Basic HTML Structure
In this video, I briefly cover the essentials of HTML. While HTML won’t be the main focus of this series, it’s still important to understand the basics so we can build on them with JavaScript.
What Is HTML Made Of?
HTML is made up of tags, and everything on the page is built from these:
<!DOCTYPE html> — Declares the document type as HTML. It doesn’t have a closing tag.<html> ... </html> — The root tag of the page.<head> ... </head> — Contains metadata, which we can skip for now.<body> ... </body> — Contains everything visible and interactive on the page.<script> ... </script> — Used to include our JavaScript.
Tags are usually written in pairs: an opening tag and a closing tag with a /.
HTML Hierarchy Rules
HTML follows a nested hierarchy, meaning certain tags must go inside others in a specific way. For example:
- A
<body> tag cannot go inside a <head> tag.
- A
<script> tag is correctly placed inside the <body>.
If you violate the tag nesting rules, your browser may still try to fix it—but it's better to write valid code from the start.
Simplifying Our Page
For now, we don’t need to include the <head> tag at all. The browser will automatically add one if it's missing.
Here’s all we really need to get started:
1<!DOCTYPE html>
2<html>
3 <body>
4 <script src="main.js"></script>
5 </body>
6</html>
You can even remove everything but the body and script if needed. This basic setup is enough to run JavaScript and see results in the browser.
Viewing in the Browser
- Save your HTML file.
- Refresh the browser.
- Use Inspect > Elements to see how the browser renders your page.
- You’ll notice the browser automatically adds a
<head> even if you didn’t define one.
- The
<body> will contain your script and any content you add.
Wrap-Up
That’s all you need to know about HTML to get started. As our projects grow more complex, we’ll gradually add more HTML elements and learn about them naturally. Let’s move on to writing more JavaScript!
