HTML Full Notes 2026

1. What is HTML?

Definition: HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure and content using tags/elements.

// Basic skeleton (must have in every page)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Awesome Page</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first real HTML page in 2026.</p>
</body>
</html>

2. Headings & Paragraphs

Definition: Headings (<h1> to <h6>) show importance/hierarchy. <p> is for normal text paragraphs.

<h1>Biggest Title (Main Heading)</h1>
<h2>Section Title</h2>
<h3>Sub-section</h3>
<p>This is a paragraph. You can write long text here.</p>

<p>This line has <strong>bold</strong> and <em>italic</em> text.</p>
<p>New line with <br> break<br>here.</p>

3. Links & Images

Definition: <a> creates hyperlinks. <img> shows pictures (always use alt for accessibility).

<a href="https://google.com">Go to Google</a>

<a href="https://youtube.com" target="_blank">Open YouTube (new tab)</a>

<img src="https://picsum.photos/400/300" alt="Beautiful random photo" width="350">

<figure>
  <img src="https://picsum.photos/600/400" alt="Mountain view">
  <figcaption>Beautiful mountain landscape</figcaption>
</figure>

4. Lists (Unordered & Ordered)

Definition: <ul> = bullet points, <ol> = numbered list, <li> = each item.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>Wake up</li>
  <li>Code HTML</li>
  <li>Sleep</li>
</ol>

5. Tables

Definition: Tables show data in rows & columns. Use <thead>, <tbody> for better structure.

<table border="1" style="border-collapse: collapse;">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Md</td>
      <td>22</td>
      <td>Biratnagar</td>
    </tr>
    <tr>
      <td>Sita</td>
      <td>19</td>
      <td>Kathmandu</td>
    </tr>
  </tbody>
</table>

6. Forms (User Input)

Definition: Forms collect data from users. <input> types include text, email, password, checkbox, radio, etc.

<form action="/submit" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" required><br><br>

  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br><br>

  <label>Gender:</label><br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br><br>

  <input type="checkbox" id="terms" name="terms">
  <label for="terms">I agree to terms</label><br><br>

  <button type="submit">Submit</button>
</form>

Tip: Always use label + for for better accessibility.

7. Semantic HTML5 Tags (Very Important in 2026)

Definition: Semantic tags give meaning to content (better for SEO, screen readers & future maintenance).

<header>
  <h1>My Website</h1>
  <nav>
    <a href="/">Home</a> |
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Main content here...</p>
  </article>

  <aside>
    <h3>Sidebar</h3>
    <p>Extra info</p>
  </aside>
</main>

<footer>
  <p>© 2026 Md - All rights reserved</p>
</footer>

Other useful: <section>, <figure>, <figcaption>, <mark>, <time>, <details>, <summary>

8. HTML5 Media (Audio + Video)

Definition: Embed audio/video directly — controls, autoplay, loop supported.

<video width="420" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support video.
</video>

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

9. Div, Span & Classes/IDs

Definition: <div> = block container, <span> = inline container. Use class/id for CSS/JS targeting.

<div class="card">
  <h3>Product</h3>
  <p>This is inside a div.</p>
</div>

<p>Normal text. <span class="highlight">This part is special</span>.</p>