HTML for Beginners: Building the Skeleton of a Webpage
Omkar Patil
It was a quiet evening when I attended my first HTML class on ChaiCode after attending my first class. Then I decided to build my first webpage because I understood how websites worked. I thought. That’s when I stumbled upon HTML, the magical language that forms the backbone of every webpage we see.
Let’s know about what is HTML
What is HTML?
- When building a webpage, think of HTML(Hypertext Markup Language) as the skeleton that provides structure. Just like a building needs blueprints, HTML is the foundation for organizing content on the web.
Let's see with Diagram
Now we can see the Key Topic of HTML
HTML for Beginners: Building the skeleton of a webpage
Every HTML document starts with the
<!DOCTYPE HTML>declaration, followed by essential tags like<HTML>,<head>, and<body>.The
<head>section contains metadata, like the title and links to stylesheets.The
<body>section holds the page's visible content, such as headings, paragraphs, images, and links.
Structure of HTML
Now we can see what HTML tags
What Are HTML Tags?
HTML tags are the building blocks of any webpage. Think of them as labels that tell the browser how to display the content. For example, when you write a paragraph, you use the <p> tag to inform the browser, “Hey, this is a paragraph.”
Tags are usually enclosed in angle brackets, like <tag>. Most tags come in pairs:
Opening tag:
<tag>Closing tag:
</tag>
The content goes between these tags.
Types of HTML Tags
Basic Structure Tags
<html>: This wraps everything and tells the browser, “This is an HTML document.”<head>: This is where you put things like the page title, styles, and metadata (stuff the user doesn’t see directly).<body>: This is the visible part of your webpage—the text, images, buttons, etc.
Content Tags
<h1>to<h6>: These are for headings.<h1>is the largest, and<h6>is the smallest. Think of them as the titles and subtitles of your webpage.<p>: For paragraphs. Use this to write normal text.<a>: This is for links. Do you want to link to Google? Use:
<a href="https://google.com">Go to Google</a>
<img>: This adds images to your webpage. Example
<img src="image.jpg" alt="Description of the image">
Layout Tags
<div>: A container for grouping elements. Think of it as a box you can use to organize your content.<span>: A smaller container used to style specific parts of text, like making one word bold.
- Form Tags (For Input Fields)
<form>: Wraps a form.<input>: For text boxes, buttons, etc. Example:<input type="text" placeholder="Enter your name"><button>: Adds a button.
Conclusion :
Building webpages with HTML is like learning a new language—it might feel unfamiliar at first, but with practice, it becomes second nature. So, grab your "HTML toolkit," start experimenting with tags, and watch your ideas come to life on the web!
Happy coding! 🚀
Subscribe to my newsletter
Read articles from Omkar Patil directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by