HTML Study Material — Complete Course
1. Introduction to HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It
structures content on the web using tags enclosed in angle brackets, e.g., <html>, <head>, <body>.
Each HTML document starts with <!DOCTYPE html> declaration, followed by <html> tag containing
<head> and <body>.
2. HTML Document Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The <head> contains metadata like title, links, and styles, while the <body> contains the visible
content.
3. Common HTML Tags
• <h1> to <h6> — Headings
• <p> — Paragraph
• <a> — Anchor (Hyperlink)
• <img> — Image
• <div> — Division
• <span> — Inline container
• <br> — Line break
4. Text Formatting Tags
HTML provides tags for formatting text:
<b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <mark>Highlight</mark>, <small>Small</small>,
<del>Deleted</del>, <ins>Inserted</ins>.
5. Lists in HTML
HTML supports three types of lists:
1. Ordered List (<ol>)
2. Unordered List (<ul>)
3. Description List (<dl>)
6. Links and Images
Links are created using the <a> tag: <a href='[Link] Example</a>
Images use the <img> tag: <img src='[Link]' alt='Description'/>
7. Tables
Tables are defined using <table>, <tr>, <th>, and <td> tags.
Example:
<table border='1'>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>John</td><td>25</td></tr>
</table>
8. Forms
Forms are used to collect user input:
<form action='/submit'>
<label>Name:</label>
<input type='text' name='username'/>
<input type='submit'/>
</form>
9. Semantic HTML
Semantic tags clearly describe their meaning: <header>, <footer>, <article>, <section>, <nav>,
<aside>, <main>.
10. Multimedia and HTML5 APIs
HTML5 introduced support for multimedia and APIs:
• <audio>, <video>
• Canvas for drawing
• LocalStorage & SessionStorage
• Geolocation API
• Drag and Drop API
11. HTML Best Practices
• Always use proper indentation.
• Close all opened tags.
• Use semantic tags.
• Add alt attributes for images.
• Validate your HTML using online validators.
12. Practice Exercises
1. Create a simple HTML page with a heading and paragraph.
2. Add an image and a hyperlink.
3. Create a registration form using <form>.
4. Design a table showing student names and grades.
5. Embed a YouTube video using <iframe>.
13. Mini Project Idea
Create a ‘Personal Portfolio Website’ using HTML:
• Include sections like About, Projects, Contact.
• Use semantic elements.
• Add navigation and images.
• Try responsive layout using basic CSS.
14. Conclusion
HTML is the foundation of web development. Once you master it, move to CSS for styling and
JavaScript for interactivity. Practicing by building small projects is the best way to strengthen your
understanding.
Additional Notes & Practice Area
Use this space to practice HTML syntax, experiment with tags, and take personal notes.
Additional Notes & Practice Area
Use this space to practice HTML syntax, experiment with tags, and take personal notes.
Additional Notes & Practice Area
Use this space to practice HTML syntax, experiment with tags, and take personal notes.