HTML (HyperText Markup Language) is the foundation of every website on the internet. Whether you are building simple web pages or complex web applications, HTML provides the structure and layout for content. This guide covers HTML from basic concepts to advanced features and is useful for students, developers, and interview preparation.
1. What is HTML?
HTML is a markup language used to create web pages. It defines the structure of content such as headings, paragraphs, images, links, and forms.
2. History of HTML
HTML was created by Tim Berners-Lee in 1991. It has evolved into HTML5, which supports multimedia, graphics, and advanced features without external plugins.
3. Basic Structure of HTML Document
Every HTML document follows a standard structure.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
4. HTML Tags
Tags are used to define elements. Most tags have opening and closing formats.
Example:
<p>This is paragraph</p>
5. HTML Elements
An element includes opening tag, content, and closing tag.
Example:
<h1>Heading</h1>
6. HTML Attributes
Attributes provide additional information about elements.
Example:
<a href="https://google.com">Visit Google</a>
7. Headings in HTML
HTML provides six heading levels.
<h1>Main Heading</h1>
<h6>Small Heading</h6>
8. Paragraph and Text Formatting
HTML supports formatting tags.
<p>This is <b>bold</b> and <i>italic</i> text.</p>
9. Lists in HTML
There are two types of lists.
Unordered List:
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>
Ordered List:
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
10. HTML Links (Anchor Tag)
Used to navigate between pages.
<a href="about.html">About Us</a>
11. Mailto Links
Used to open email clients directly.
<a href="mailto:example@gmail.com">Send Email</a>
You can also add subject and body.
<a href="mailto:test@gmail.com?subject=Hello&body=Welcome">Mail Us</a>
12. Images in HTML
Images are inserted using <img> tag.
<img src="image.jpg" alt="Sample Image">
13. HTML Tables
Tables organize data into rows and columns.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
14. HTML Forms
Forms collect user input.
<form>
<input type="text" placeholder="Enter Name">
<button>Submit</button>
</form>
15. Input Types in Forms
HTML supports multiple input types.
<input type="email">
<input type="password">
<input type="date">
<input type="file">
16. Labels in Forms
Labels improve accessibility.
<label>Name:</label>
<input type="text">
17. Buttons in HTML
Buttons perform actions.
<button>Click Me</button>
18. HTML Semantic Tags
Semantic tags provide meaning to content.
Examples:
<header><nav><section><article><footer>
19. HTML5 Audio and Video
HTML5 allows embedding multimedia.
<audio controls>
<source src="song.mp3">
</audio>
<video controls width="300">
<source src="video.mp4">
</video>
20. HTML Iframe
Embeds another webpage.
<iframe src="https://example.com"></iframe>
21. Meta Tags
Used for SEO and page information.
<meta charset="UTF-8">
<meta name="description" content="HTML Tutorial">
22. HTML Entities
Used to display reserved characters.
< = <
> = >
& = &
23. HTML Comments
Used to write notes in code.
<!-- This is comment -->
24. HTML Block vs Inline Elements
Block Elements:
<div><p><h1>
Inline Elements:
<span><a><img>
25. Div and Span
Used for grouping elements.
<div>This is block container</div>
<span>This is inline container</span>
26. HTML Classes and IDs
Used for styling and scripting.
<p class="text">Hello</p>
<p id="main">Welcome</p>
27. HTML Data Attributes
Stores custom data.
<div data-user="Krishna">Profile</div>
28. HTML Canvas
Used for drawing graphics.
<canvas id="myCanvas"></canvas>
29. HTML SVG
SVG (Scalable Vector Graphics) is used to create vector-based graphics directly inside HTML. SVG images do not lose quality when zoomed and are widely used for icons, logos, charts, and animations.
Basic SVG Circle Example
<!DOCTYPE html>
<html>
<body>
<h2>SVG Circle Example</h2>
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" stroke="black" stroke-width="3" fill="blue" />
</svg>
</body>
</html>
Explanation
<svg>→ Container for SVG graphicscx→ X-axis center positioncy→ Y-axis center positionr→ Radius of circlestroke→ Border colorfill→ Shape color
30. HTML Accessibility
Helps disabled users access websites.
Example:
<img src="dog.jpg" alt="Brown Dog">
31. HTML SEO Best Practices
- Use proper headings
- Add meta tags
- Use alt text for images
- Use semantic tags
32. HTML Responsive Design Basics
Used to make websites mobile friendly.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
33. HTML Best Coding Practices
- Use proper indentation
- Use semantic tags
- Keep code clean
- Validate HTML code
34. HTML vs HTML5
HTML5 introduced:
- Audio & Video support
- Canvas graphics
- Semantic tags
- Offline storage
35. Common HTML Interview Questions
What is HTML?
HTML is used to structure web content.
Difference between class and id?
Class can be used multiple times, id must be unique.
What are semantic tags?
Tags that describe content meaning.
Conclusion
HTML is the backbone of web development. Learning HTML from beginner to advanced levels helps developers create structured, accessible, and SEO-friendly websites. Mastering concepts like forms, semantic tags, multimedia, and responsive design will improve both development skills and interview performance.
