Learn HTML

HTML Topics

Click on a topic to expand and learn in detail.

• 1. Introduction to HTML

HTML stands for HyperText Markup Language. It is used to create the structure of web pages.

<!DOCTYPE html>
<html>
  <head><title>My Page</title></head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
      

• 2. HTML Elements & Tags

Elements are building blocks of HTML. Example tags: <p>, <h1>, <a>.

<p>This is a paragraph.</p>
<a href="https://example.com">Visit Example</a>
      

• 3. HTML Attributes

Attributes provide additional info to elements. Example: id, class, href, src.

<img src="image.jpg" alt="My Image">
<a href="https://example.com" target="_blank">Open Link</a>
      

• 4. Headings & Paragraphs

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
      

• 5. Lists (Ordered & Unordered)

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>
      

• 6. Links & Images

<a href="https://example.com">Visit Example</a>
<img src="image.jpg" alt="My Image">
      

• 7. Forms & Input

<form>
  <label>Name:</label>
  <input type="text" name="name">
  <input type="submit">
</form>
      

• 8. Tables

<table border="1">
  <tr><th>>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>23</td></tr>
</table>
      

• 9. Audio & Video

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video width="320" controls>
  <source src="video.mp4" type="video/mp4">
</video>
      

• 10. Semantic HTML

Semantic tags: <header>, <footer>, <article>, <section> etc.

<header>Header Content</header>
<section>Main Section</section>
<footer>Footer Content</footer>
      

• 11. Advanced HTML Topics
• HTML5 New Elements: <canvas>, <svg>, <figure>, <figcaption>
• Forms: Validation, Input Types, Placeholder, Required
• Media & Embed: Audio, Video, iframe
• Meta Tags & SEO Basics
• Accessibility (ARIA, Alt Text)
• Responsive HTML Practices
• Custom Data Attributes
• Drag & Drop API