1. Introduction to HTML

HTML, or HyperText Markup Language, is the fundamental language used to create and structure content on the web. It defines headings, paragraphs, links, images, lists, tables, and other elements. Learning HTML is the first step for anyone who wants to build websites.

2. Basic Document Structure

Every HTML page follows a standard structure. It begins with a <!DOCTYPE html> declaration, followed by the <html> root, and contains <head> and <body> sections.

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>Welcome to my website.</p>
</body>
</html>

3. Elements & Tags

HTML elements are the building blocks of a webpage, represented by tags like <h1> and <p>.

<h2>Understanding Tags</h2>
<p>This is a paragraph element.</p>
<a href="#">This is a link element.</a>

4. Headings

Headings range from <h1> (largest) to <h6> (smallest).

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>

5. Paragraphs

Paragraphs are created using the <p> tag.

<p>This is one paragraph.</p>
<p>This is another paragraph with some spacing.</p>

6. Links

Links are created using the <a> tag with the href attribute.

<a href="https://kafeinfotech.fun">Visit Kafe Infotech</a>

7. Images

Images use the <img> tag with src and alt attributes.

<img src="https://picsum.photos/400/200" alt="Random Image" style="width:100%; border-radius:10px;">

8. Lists

HTML offers unordered (<ul>) and ordered (<ol>) lists.

<ul>
  <li>First Point</li>
  <li>Second Point</li>
</ul>
<ol>
  <li>Step One</li>
  <li>Step Two</li>
</ol>

9. Tables

Tables use <tr>, <th>, and <td> to organize data.

<table border="1" style="width:100%; text-align:left; border-collapse:collapse;">
  <tr><th>Name</th><th>Skill</th></tr>
  <tr><td>Dhanush</td><td>Game Dev</td></tr>
</table>

10. Forms

Forms capture user input using various <input> types.

<form>
  <label>User:</label> <input type="text"><br><br>
  <button type="button">Submit</button>
</form>

11. Audio & Video

Embed multimedia natively with <audio> and <video>.

<video controls style="width:100%">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

12. Semantic Tags

Semantic tags like <header> and <footer> clarify document intent.

<article>
  <header><h3>Article Title</h3></header>
  <p>Main content of the article.</p>
  <footer>Posted on 2026</footer>
</article>