Skip to content
This repository was archived by the owner on Sep 24, 2025. It is now read-only.

Latest commit

 

History

History
119 lines (90 loc) · 2.44 KB

File metadata and controls

119 lines (90 loc) · 2.44 KB

HTML Documentation

Introduction

HTML (HyperText Markup Language) is the standard language for creating web pages. It structures content using elements represented by tags.

Basic Structure

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

Common Elements

  • Headings: <h1> to <h6>
  • Paragraphs: <p>
  • Links: <a href="url">Link</a>
  • Images: <img src="image.jpg" alt="Description">
  • Lists: <ul>, <ol>, <li>
  • Forms: <form>, <input>, <button>

Semantic HTML

Use semantic tags for better accessibility and SEO:

  • <header>, <nav>, <main>, <section>, <article>, <footer>

Best Practices

  • Always close tags properly.
  • Use alt attributes for images.
  • Structure content logically with headings and sections.

Advanced Topics

Accessibility (a11y)

  • Use semantic elements for screen readers.
  • Add aria-* attributes for extra context.
  • Ensure keyboard navigation for all interactive elements.

Forms and Validation

HTML forms collect user input. Use built-in validation attributes:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  <button type="submit">Submit</button>
</form>

SEO (Search Engine Optimization)

  • Use proper heading hierarchy (<h1>, <h2>, ...).
  • Add meta tags for description and keywords.
  • Use descriptive link text and image alt attributes.

Embedding Media

<img src="cat.jpg" alt="A cute cat" />
<audio controls>
  <source src="song.mp3" type="audio/mpeg" />
</audio>
<video controls>
  <source src="movie.mp4" type="video/mp4" />
</video>

Tables

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>24</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

HTML5 APIs

  • Geolocation: Get user location.
  • Canvas: Draw graphics.
  • LocalStorage: Store data in the browser.

Debugging HTML

  • Use browser DevTools to inspect and edit elements.
  • Validate your HTML with the W3C Validator.

Useful Resources