Complete HTML basics tutorial covering tags, attributes, structure, and examples. Best guide for beginners to learn web development from scratch.
HTML Basics (Tags & Attributes) – Easy Guide
What is HTML?
HTML (HyperText Markup Language) is the standard language used to create web pages. It tells the browser how content should be displayed (text, images, links, etc.).
Basic Structure of an HTML Page
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page.</p>
</body>
</html>
🔍 Explanation:
<!DOCTYPE html>→ Defines HTML5 version<html>→ Root element<head>→ Contains meta info (title, links, etc.)<body>→ Visible content
What are HTML Tags?
Tags are keywords enclosed in angle brackets < >. They define elements.
🔹 Types of Tags:
1. Paired Tags (Container Tags)
Have opening and closing tags.
<p>This is a paragraph</p>
2. Empty Tags (Self-closing)
No closing tag.
<br>
<img src="image.jpg">
<hr>
Common HTML Tags
| Tag | Description |
|---|---|
<h1> to <h6> | Headings |
<p> | Paragraph |
<a> | Link |
<img> | Image |
<br> | Line break |
<hr> | Horizontal line |
<ul> / <ol> | Lists |
<li> | List item |
<table> | Table |
<form> | Form |
What are Attributes?
Attributes provide extra information about HTML elements.
📌 Syntax:
<tag attribute="value">Content</tag>
Common Attributes
1. href (for links)
<a href="https://example.com">Visit Site</a>
2. src (for images)
<img src="image.jpg">
3. alt (alternative text)
<img src="image.jpg" alt="Description">
4. class & id
<p class="text">Hello</p>
<p id="main">Welcome</p>
5. style (inline CSS)
<p style="color:red;">Red Text</p>
Example with Tags & Attributes
<!DOCTYPE html>
<html>
<head>
<title>Practice</title>
</head>
<body>
<h1 style="color:blue;">Welcome</h1>
<p id="para1">This is a paragraph.</p>
<a href="https://google.com" target="_blank">Open Google</a>
<img src="photo.jpg" alt="My Photo" width="200">
</body>
</html>
Important Points
Tags are case-insensitive (but lowercase recommended)
Always close tags properly
Attributes are always written inside opening tag
Use quotes
" "for attribute values
Quick Summary
HTML = Structure of webpage
Tags = Building blocks
Attributes = Extra info for tags
<html>,<head>,<body>= Main structure
very nice notes
ReplyDeletewow so exelent this is very intrusting notes
ReplyDeleteNICE NOTES
ReplyDeleteTHANKS SIR
good
ReplyDeletevery good
ReplyDeletenice
ReplyDeletewow very nice notes
ReplyDeleteWow very nice notes
ReplyDeletegyantech technology is best other web
ReplyDeletegood information provide for html its very help full
ReplyDeletevery easy notes.
ReplyDeleteVery interesting
ReplyDelete