HTML Complete Notes (Beginner-Friendly)
1. Introduction to HTML
● HTML = HyperText Markup Language
● Used to create web pages
● A markup language with tags (not a programming language)
● Works in combination with CSS (styling) and JavaScript (functionality)
2. HTML Document Structure
Basic HTML skeleton:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is my first web page.</p>
</body>
</html>
● <!DOCTYPE html> → Defines document type
● <html> → Root element
● <head> → Metadata, title, links, scripts
● <body> → Visible content
3. HTML Elements & Tags
● Heading Tags → <h1> to <h6>
● Paragraph → <p>
● Line Break → <br>
● Horizontal Line → <hr>
● Comments → <!-- comment -->
4. Text Formatting Tags
● <b> → Bold
● <i> → Italic
● <u> → Underline
● <strong> → Important text (bold)
● <em> → Emphasized text (italic)
5. Links & Images
● Links → <a href="url">Click Here</a>
● Images → <img src="[Link]" alt="description" width="200"
height="200">
6. Lists in HTML
● Ordered List → <ol><li>Item 1</li></ol>
● Unordered List → <ul><li>Item 1</li></ul>
● Definition List → <dl><dt>Term</dt><dd>Definition</dd></dl>
7. Tables in HTML
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
● <table> → Table
● <tr> → Table row
● <th> → Table header
● <td> → Table data
8. Forms in HTML
<form action="/submit" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Login">
</form>
● <input> → Text, password, email, etc.
● <textarea> → Multi-line text box
● <select> → Dropdown menu
● <button> → Button
9. HTML Attributes
● href → Link URL
● src → Image path
● alt → Alternative text for image
● id → Unique identifier
● class → Grouping for CSS
10. Multimedia in HTML
Audio:
<audio controls>
<source src="music.mp3" type="audio/mp3">
</audio>
●
Video:
<video controls width="300">
<source src="video.mp4" type="video/mp4">
</video>
●
11. Semantic HTML
● <header>, <footer>, <article>, <section> → Meaningful tags for better SEO
12. HTML5 New Features
● New semantic tags (<main>, <nav>, <aside>)
● Audio, video support
● <canvas> for graphics
● Local storage
13. Best Practices
● Always close tags
● Use lowercase tags
● Keep code clean and readable
● Add comments for clarity