HTML: The basic building blocks of a web page.
Imagine building a house without a plan or bricks – that’s what a website would be like without HTML. HTML (HyperText Markup Language) is literally the building block of every web page. Learning HTML is important because it’s your gateway into web development and website creation.
Why Learn HTML?
- Foundation of websites: HTML is "the basic building block for creating any website",so understanding it is like learning the alphabet of web pages.
- Beginner-friendly: HTML is easy to learn and perfect for beginners, and aspiring web developers.You don’t need complex math or logic to write your first HTML code.
- In-demand skill: Web developers are highly sought after. HTML is your first step into a growing career field.
- Future learning: Once you know HTML, you can more easily pick up CSS (for styling) and JavaScript (for interactivity), building a complete skill set for modern web development.
Basic Structure of an HTML Document
Every HTML file follows a simple structure, like a skeleton for your webpage. Here’s a very basic example of an HTML page:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph in HTML.</p>
</body>
</html>Explanation:
<!DOCTYPE html>:Tells the browser that this is an HTML5 document (think of it as saying “Hey, use the latest rules for HTML!”).<html>:It Wraps the whole page; it’s the root element of the document. Everything on the page goes inside these tags.-
<head>:It is a container for metadata. It doesn’t display content on the page itself, but it holds important info like the page’s title. <title>:It Goes inside and sets the page title (what you see on the browser’s tab). In our example, you’d see “My First Page” in the browser tab.<body>:It is where all the visible content goes. Text, images, links—anything the visitor will see belongs in the body.
Don’t stress about learning this now — just peek at how HTML code looks like!
Stick with me and you’ll soon write it yourself!
HTML file is save with the extension ".html ".
Copy above code and save it in a file (like " index.html ") and you'll see something like this:
HTML Tags and Elements
HTML web pages are collection of HTML elements Each HTML element represents a self-contained block of code.
Together, these elements create the complete layout structure and defines the webpage content.
Element = opening tag + content + closing tag.
Example :
<h1>Hello World!</h1>Important HTML Tags
HTML has over 100 awesome tags — each one with a special job.
Different tags help describe different kinds of content, making your page come alive.
Now, let’s dive into some important HTML tags you’ll find yourself using almost every single day.
(Think of them as your new best friends on your web development journey!)
1. Heading Tags (<h1>...</h6>)
Used to describe headings for your webpages.
Example:
<h1>
This is big heading.
</h1>
<h2>
This is small heading.
</h2>
<h1>has most importance , <h6>has least importance.
Note:Do not use headings to make the fonts big, bold, Just because each heading is different in size from the other.
2. Paragraph Tag (<p>)
Used to describe a paragraph in a webpage.
Example:
<p>This is a paragraph.</p>3. Anchor Tag (<a>)
Creates link to other websites and webpages.
Example:
<a href="url">This is a link</a>
Here href is an attribute which contains the url (address) of the other websites or webpages.
Anchor tags are important to navigate between pages or to give link to other websites in web development!.
Image Tage (<img>)
Display images on your webpage.
Example:
<img src="image.jpg" alt="A description of the image">src: specifies the path to the image file.
alt: provide a description if the image does not load, or for screen readers.
Line Break Tags (<br>)
It breaks the line and moves the content to the next line.
Example:
<p>
This is paragraph 1.
<br>
This is paragraph 2.
</p>
Now that you've learned about the <br> tag, you can clearly see the difference in your browser. With <br>, lines break exactly where you want. Without it, the paragraph flows naturally. A small tag, but a big difference in how your content looks!
5. Horizontal line tag (<hr>)
<hr> tag adds a horizontal line in a web page.
Example:
<h1>Hello World!</h1><img>, <br>, <hr> are called void elements — they don’t have content or closing tags. .
These are just a few of the many HTML tags out there — and there’s so much more to discover!
But hey, don't worry — we'll explore each one, step-by-step, in our upcoming posts.
In our next session, we'll dive into how these elements come together to create a real webpage, and you'll even write your very first piece of code!
Stay excited — your journey to building awesome websites is just getting started!
Important Notes
- Always open and close tags properly.
- HTML is not case sensitive but use lowercase letters for HTML tags (for standard practice).
- almost all the html element can be nested. Nesting means putting one HTML element inside another.
<div>
<p>Paragraph tag is nested inside div.
</p>
<div>
Nest elements correctly (don’t break the structure).
Quick Takeaways
- Basic Html structure, the content of your website.
-
Elements like
<h1>,<p>,<a>create headings, paragraphs, and links. -
<img>,<br>,<hr>does not contain end tag. - href, src, alt are attributes which add important details to elements.
That's it for now — but this is just the beginning!
There's a lot more to explore, and don’t worry — we’ll learn it all together.
Stay curious, keep practicing, and you'll be creating real websites before you know it!
Happy Coding!
0 Comments