📘 Complete HTML Guide

Created By Ayesha A. Rahman

Complete HTML Guide

Table of Contents
What is HTML?............................................................................................................................................3
✅ Basic HTML Structure...............................................................................................................................3
Section A: Document Tags...........................................................................................................................3
Tag Descriptions:...............................................................................................................................3
HTML Example Page:......................................................................................................................3
Section B: Headings and Text Tags..............................................................................................................4
Tag Descriptions:...............................................................................................................................4
🧾 HTML Example Page:..................................................................................................................4
Section C: Grouping/Layout Tags.................................................................................................................5
Tag Descriptions:...............................................................................................................................5
HTML Example Page:......................................................................................................................5
Section D: Lists.............................................................................................................................................5
Tag Descriptions:...............................................................................................................................5
HTML Example Page:......................................................................................................................6
Section E: Tables..........................................................................................................................................6
Tag Descriptions:...............................................................................................................................6
HTML Example Page:......................................................................................................................6
Section F: Media..........................................................................................................................................7
Tag Descriptions:...............................................................................................................................7
HTML Example Page:......................................................................................................................7
Section G: Forms..........................................................................................................................................7
Tag Descriptions:...............................................................................................................................7
HTML Example Page:......................................................................................................................7
Section H: Meta / Interactive / Utility..........................................................................................................8
Tag Descriptions:...............................................................................................................................8
HTML Example Page:......................................................................................................................8
Conclusion...................................................................................................................................................8
🔑 Key Points:......................................................................................................................................9
🌐 Top 6 Websites to Learn & Practice HTML...............................................................................................9
📘 50 HTML Practice Tasks............................................................................................................................9

Created By Ayesha A. Rahman

Complete HTML Guide

What is HTML?
HTML (HyperText Markup Language) is the standard language used to create webpages. It
structures web content using tags, which define elements like text, images, forms, tables, etc.

 HTML is not a programming language, it's a markup language.

 Works alongside CSS (for design) and JavaScript (for logic).

✅ Basic HTML Structure

html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Welcome!</h1>
<p>This is a paragraph.</p>
</body>
</html>

Section A: Document Tags

Tag Descriptions:

Tag Description
<!DOCTYPE> Declares HTML5 doctype
<html> Root element of HTML document
<head> Contains metadata (title, meta, link, script)
<title> Appears in browser tab
<meta> Metadata like charset, viewport
<link> Links to external files (e.g., CSS)
<style> Embeds internal CSS styles
<script> JavaScript code (internal or external)
HTML Example Page:
html

Created By Ayesha A. Rahman

Complete HTML Guide

CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Ayesha’s Site</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script>
console.log("Hello from HTML Head!");
</script>
</head>
<body>
<h1>Welcome</h1>
<p>This is a sample structure.</p>
</body>
</html>

Section B: Headings and Text Tags

Tag Descriptions:

Tag Description
<h1> to <h6> Headings from largest to smallest
<p> Paragraph
<br> Line break
<hr> Horizontal rule (line)
<b> / <strong> Bold text (semantic and non-semantic)
<i> / <em> Italic/emphasis
<mark> Highlighted text
<small> Small text
<sub> / <sup> Subscript and superscript
<del> / <ins> Deleted/Inserted text

🧾 HTML Example Page:

html
CopyEdit
<h1>Main Title</h1>
<h2>Subtitle</h2>
<p>This is a <b>bold</b> and <i>italic</i> paragraph.</p>
<mark>Important note</mark>
<small>Footnote text</small>
<p>Water = H₂O, x² is math.</p>
<hr>
<del>Old price</del> <ins>New price</ins>

Created By Ayesha A. Rahman

Complete HTML Guide

Section C: Grouping/Layout Tags

Tag Descriptions:

Tag Description
<div> Block-level container
<span> Inline container
<header> Section/page header
<footer> Footer content
<main> Main content area
<nav> Navigation links
<section> Thematic section
<article> Self-contained content
<aside> Sidebar or extra info

HTML Example Page:

html
CopyEdit
<header><h1>My Blog</h1></header>
<nav><a href="#">Home</a> | <a href="#">Contact</a></nav>
<main>
<section>
<h2>About Me</h2>
<p>This is <span style="color:blue">important</span>.</p>
</section>
<article>
<h2>Latest Post</h2>
<p>Published content goes here.</p>
</article>
</main>
<footer>© 2025 Ayesha</footer>

Section D: Lists
Tag Descriptions:

Tag Description
<ul> Unordered list
<ol> Ordered list
<li> List item
<dl> Description list
<dt> Term (title)
<dd> Definition (description)

HTML Example Page:

Created By Ayesha A. Rahman

Complete HTML Guide

html
CopyEdit
<h2>Grocery List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
</ul>

<h2>Steps</h2>
<ol>
<li>Turn on stove</li>
<li>Boil water</li>
</ol>

<h2>Glossary</h2>
<dl>
<dt>HTML</dt>
<dd>Markup Language</dd>
</dl>

Section E: Tables
Tag Descriptions:

Tag Description
<table> Creates a table
<tr> Table row
<th> Table header cell
<td> Table data cell
<thead> Groups header rows
<tbody> Groups body rows
<tfoot> Groups footer rows
<caption> Table title

HTML Example Page:

html
CopyEdit
<table border="1">
<caption>Student Info</caption>
<thead><tr><th>Name</th><th>Age</th></tr></thead>
<tbody><tr><td>Ayesha</td><td>22</td></tr></tbody>
<tfoot><tr><td colspan="2">End of Table</td></tr></tfoot>
</table>

Section F: Media
Tag Descriptions:

Created By Ayesha A. Rahman

Complete HTML Guide

Tag Description
<img> Embeds an image
<audio> Embeds audio player
<video> Embeds video player
<source> Specifies media file
<iframe> Embeds a web page

HTML Example Page:

html
CopyEdit
<img src="pic.jpg" alt="Profile Picture" width="200">
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<iframe src="https://youtube.com" width="300" height="200"></iframe>

Section G: Forms
Tag Descriptions:

Tag Description
<form> Form container
<input> Input field (text, radio, checkbox, etc.)
<label> Input label
<select> Dropdown list
<option> Dropdown choice
<textarea> Multiline input
<button> Submit or action button
<fieldset> Groups form controls
<legend> Title for fieldset

HTML Example Page:

html
CopyEdit
<form>
<label>Name: <input type="text"></label><br>
<input type="radio" name="gender"> Male
<input type="checkbox"> Subscribe<br>
<select><option>Option 1</option></select>
<textarea rows="4" cols="30">Your message</textarea>
<button type="submit">Send</button>
</form>

Created By Ayesha A. Rahman

Complete HTML Guide

Section H: Meta / Interactive / Utility

Tag Descriptions:

Tag Description
<abbr> Abbreviation with tooltip
<address> Contact info (browser formatted)
<bdi> Isolates text direction (RTL support)
<bdo> Override text direction
<cite> Citation (e.g., book title)
<time> Machine-readable date/time
<data> Machine-usable value
<output> Output from calculation
<progress> Task completion indicator
<meter> Scalar measurement (rating, temp)
<details> Expand/collapse section
<summary> Summary for details block

HTML Example Page:

html
CopyEdit
<abbr title="HyperText Markup Language">HTML</abbr>
<address>123 Street, Karachi</address>
<bdi>‫<عائشہ‬/bdi>
<bdo dir="rtl">Text Right-to-Left</bdo>
<time datetime="2025-07-12">12 July 2025</time>
<progress value="50" max="100">50%</progress>
<meter value="0.6">60%</meter>

<details>
<summary>Click to Expand</summary>
Hidden content here.
</details>

Conclusion
HTML is the foundation of every webpage. Once you understand how to use HTML effectively,
you're ready to move on to CSS for styling and JavaScript for behavior. Mastering HTML
enables you to structure content that is clear, accessible, and semantic, making websites
professional and user-friendly.

🔑 Key Points:

Created By Ayesha A. Rahman

Complete HTML Guide

 HTML defines structure, not design.

 Use semantic tags for better SEO and accessibility.
 Always validate your HTML using tools like W3C Validator.
 Consistent practice is the best way to improve.

🌐 Top 6 Websites to Learn & Practice HTML

1. W3Schools – Beginner-friendly explanations + try-it editor.
2. MDN Web Docs – Official and comprehensive documentation.
3. freeCodeCamp – Hands-on tutorials with certification.
4. HTML.com – For beginners who want easy explanations.
5. GeeksforGeeks HTML – Great for theory + competitive practice.
6. CodePen – Live coding playground to experiment and showcase.

📘 50 HTML Practice Tasks

(Basic → Advanced)

1. Create a webpage with your name and a heading.

2. Add two paragraphs about your hobbies.
3. Insert a horizontal line between sections.
4. Add an image with width 300px.
5. Make a link to Google and open in new tab.
6. Create a contact form with name and email fields.
7. Add a checkbox for newsletter subscription.
8. Create an ordered list of your skills.
9. Create an unordered list of fruits.
10. Highlight text using <mark> tag.

11. Create a table for student results.

12. Use colspan/rowspan in a table.
13. Create a form with dropdown menu.
14. Add radio buttons for gender selection.
15. Use textarea for user feedback.
16. Build a registration form.
17. Create a blog post layout using semantic tags.
18. Embed a YouTube video.
19. Display a PDF using <embed>.
20. Use iframe to embed a website.

21. Create a resume in HTML using only tags.

Created By Ayesha A. Rahman

Complete HTML Guide

22. Build a product card with image + description.

23. Add progress bar and meter.
24. Use <details> and <summary> for toggling.
25. Display address info using <address>.
26. Build a two-column layout using divs.
27. Make a photo gallery using <img>.
28. Use <time> and <abbr> meaningfully.
29. Add form validations using HTML5.
30. Use <fieldset> and <legend> to group form items.

31. Create a recipe webpage.

32. Build a login form.
33. Structure a portfolio homepage.
34. Create a newsletter sign-up form.
35. Make an HTML resume with download PDF link.
36. Use semantic tags to build a small article layout.
37. Add testimonials using blockquote.
38. Create a navigation menu using <nav>.
39. Use <canvas> to draw a simple box.
40. Link multiple pages with navigation.

41. Create a table with rowspan and caption.

42. Add contact info and embed Google Map.
43. Create an image slider (manual using buttons).
44. Add dark mode using data attributes.
45. Build a mock landing page.
46. Create collapsible FAQ section.
47. Build a registration page with all form elements.
48. Combine article + aside + footer for a news layout.
49. Add favicon to your HTML page.
50. Add metadata for SEO using <meta>.

Created By Ayesha A. Rahman