Hey little cousin! 👋 Today, let’s talk about something super cool — how websites are made using HTML. Think of HTML like the skeleton of your body. It gives shape and structure to a webpage. 🦴💻
🤔 What is HTML?
HTML stands for HyperText Markup Language.
It’s the first thing every web developer learns. It tells the browser what to show on the page.
Without HTML, your website would be like an empty box. 📦
🏗️ HTML Builds the Structure of a Webpage
Let’s say you want to create a house 🏠. You’ll first need walls, windows, and doors.
HTML is like that — it gives you blocks to build your webpage.
These blocks are called tags or elements.
🏷️ Understanding HTML Tags and Elements
Tags look like this:
<p>This is a paragraph.</p>
Here’s the breakdown:
<p>is the opening tag.</p>is the closing tag.- “This is a paragraph.” is the content.
Together, they make an HTML element.
👉 Tags are always written inside angle brackets < >.
🧪 Let’s Build a Simple Web Page
Here’s the basic structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML page!</p>
</body>
</html>
Explanation:
<!DOCTYPE html>: Declares this is an HTML5 document<html>: The root of your webpage<head>: Contains meta info (like the page title)<title>: Title that appears on the browser tab<body>: Everything visible to the user<h1>: Big heading<p>: Paragraph of text
✍️ Text Elements in HTML
These tags help you write and organize text:
| Tag | What It Does |
|---|---|
<h1> to <h6> | Headings (biggest to smallest) |
<p> | Paragraph |
<a> | Link |
<ul> | Unordered List (bullets) |
<ol> | Ordered List (numbers) |
<li> | List Item |
Example:
<h2>My Hobbies</h2>
<ul>
<li>Coding</li>
<li>Gaming</li>
<li>Traveling</li>
</ul>
🧠 What is Semantic HTML?
Semantic means “meaningful”.
Using semantic tags makes your code easier to read — for humans and search engines like Google! 🔍
Common Semantic Tags:
| Tag | What It Means |
|---|---|
<header> | Top section of your page |
<footer> | Bottom section |
<nav> | Navigation menu |
<main> | Main content area |
<section> | Group related content |
<article> | Standalone piece of content |
<aside> | Side content (like ads/info) |
Example:
<main>
<section>
<h2>Blog Post</h2>
<article>
<p>This is my first blog post about HTML!</p>
</article>
</section>
</main>
🧩 Key Concepts to Remember
- Elements: Building blocks made of tags
- Tags: Code enclosed in
< > - Attributes: Extra info (e.g.,
<a href='link.html'>) - Nesting: Putting one element inside another
- Semantic HTML: Tags that have meaning
🎓 Conclusion
HTML is like Lego blocks 🧱. You put them together and build cool websites!
Keep practicing and you’ll be a web magician in no time. 🧙♂️💻
📌 Don’t forget to follow and subscribe to Web Codder:
🔗 YouTube Channel
🌐 Web Automation Blogs
📱 Join Us on WhatsApp
Stay curious and keep coding! 🚀
– Vikas Sankhla
Founder, Web Codder
