HTML, HEAD and BODY Tags
In this video, we explore the essential tags required for every HTML page: HTML, HEAD, and BODY. Learn the purpose of the HEAD area for background tasks (like setting the page title, keywords, and metadata) and the BODY area for displaying visible content. Understand the importance of structuring your HTML properly to ensure pages render as expected.
Ready to Level Up Your Skills?
Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!
Enroll Now for Free!Getting Started with HTML Training
Join my mom as I teach her the basics of HTML. In this ground breaking course.
Starting to do HTML
In this first video we will start talking about file formats, browsers and even see a few file types in HTML.
How to pick an HTML Editor
There are a lot of HTML editors out there so how will you pick the right on for you?
Creating Our First Tag
The most basic building block in HTML is the Tags. we will create one tag of our own. In this video we will create our first simple tag.
HTML, HEAD and BODY Tags
Every HTML page has a few tags you got to have that without them its not an HTML page. In this video we will learn about the HTML tag, the Head and the Body Tags.
Putting Content In Our Body
Now that we have a legal HTML structure its time for us to add our first content into our legal built HTML file.
Creating a Page Title
Adding a TITLE to the page. In this video we will add a title into the HEAD area of the page. We will then talk about what the TITLE is and where we can see it.
Creating Headlines: Tags H1 Through H6
It's time for us to explore and learn a few more tags. The tags we will be creating next are the headline tags. By the end of this video you will know 6 new tags!
Integrating the P tag (paragraph tag)
It's time for us to add the P tag into our skill set of tags. In this video we continue to learn HTML and add in the basic information we need to know about the P tag.
RECAP
That's it we are done with our first HTML session. We would love to make many more but that is 100% up to you if you love it support us drop a nice word for my mom and me.
HTML, HEAD and BODY Tags detailed:
In this tutorial, we’ll break down the essential tags every HTML page must include: HTML, HEAD, and BODY. Understanding these tags is the foundation of building well-structured web pages.
1. The HTML Tag
The <html> tag is the foundation of every HTML page. It wraps all the content on your webpage, letting the browser know that everything inside is HTML code.
Here’s how it looks:
<html>
<!-- Content goes here -->
</html>
2. The HEAD Area
The <head> tag is for background or invisible tasks. It includes metadata and instructions for the browser that don’t appear directly on the webpage.
Common elements inside the <head> tag include:
- Page Title: The text displayed in the browser tab.
- Metadata: Information like keywords, description, or author details for search engines.
- Links to Stylesheets or Scripts: External CSS or JavaScript files.
Example:
<head>
<title>My First HTML Page</title>
</head>
Why It’s Important: The HEAD area is like the brain of your page. It manages settings and information needed for the page to work properly.
3. The BODY Area
The <body> tag contains everything visible on the webpage. Headlines, paragraphs, images, videos, and other elements go inside the BODY area.
Example:
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>
</body>
Key Difference:
Content in the BODY tag is visible to users, while content in the HEAD tag works behind the scenes.
4. Putting It All Together
A complete HTML page with all essential tags looks like this:
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my first paragraph.</p>
</body>
</html>
5. What Happens If the BODY Is Empty?
If you don’t put any content inside the <body> tag, your webpage will appear blank. For example:
<html>
<head>
<title>Empty Page</title>
</head>
<body>
<!-- No content here -->
</body>
</html>
When viewed in a browser, this page will display nothing but the title in the browser tab.
Summary
By the end of this tutorial, you’ve learned:
- The HTML tag wraps all content on a page.
- The HEAD tag contains metadata and invisible elements.
- The BODY tag displays the visible content of your webpage.
What’s Next?
In the next tutorial, we’ll dive deeper into structuring your HTML content with more tags, like headlines and paragraphs.