What is HTML?

HTML stands for HyperText Markup Language. It is used to structure content on the web. HTML describes the structure of web pages using markup.

Browsers interpret HTML code and display it as formatted content. Without HTML, websites wouldn't have headings, paragraphs, images, links, or forms.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
    

Document Structure

Every HTML document starts with a DOCTYPE declaration that tells the browser which version of HTML you're using. HTML5 uses <!DOCTYPE html>.

The document is wrapped in an <html> element. The <head> contains metadata (like title and meta tags), and the <body> contains everything visible to the user.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Structure</title>
  </head>
  <body>
    <h1>HTML Structure</h1>
  </body>
</html>
    

Semantic Elements

Semantic HTML adds meaning to the content. Instead of generic <div> and <span>, semantic tags tell the browser (and assistive technologies) what role that content has.

• <header> - Represents introductory content.
• <nav> - Contains navigation links.
• <main> - Main content of the document.
• <section> - Thematic grouping of content.
• <article> - Self-contained piece of content.
• <aside> - Tangentially related content.
• <footer> - Footer for its nearest sectioning content or the whole page.

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>
<main>
  <article>
    <h2>Post Title</h2>
    <p>This is the content of the post.</p>
  </article>
</main>
<footer>
  <p>© 2025 My Blog</p>
</footer>
    

Forms and Validation

HTML5 introduces many input types and validation attributes. This improves UX and ensures data integrity.

• <input type="email" required> ensures a valid email.
• <input type="number" min="1" max="10"> for ranges.
• <input type="date"> for dates.
• <datalist> for suggestions.

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="quantity">Quantity (1-10):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10">
  <br>
  <button type="submit">Submit</button>
</form>
    

Media Elements

HTML5 introduced native support for audio and video without plugins.

<video controls width="320" height="240" poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>
    

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

Tables for Structured Data

Tables should be used only for tabular data. Use proper headers for accessibility.

<table>
  <caption>Product List</caption>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget</td>
      <td>$10</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Gadget</td>
      <td>$15</td>
      <td>3</td>
    </tr>
  </tbody>
</table>
    

Accessible HTML (ARIA)

Use ARIA roles carefully and only when needed. Prefer native elements that already have built-in semantics.

<button aria-label="Close dialog">×</button>
    

Examples of ARIA roles:

• role="dialog"
• role="alert"
• aria-live="polite"
• aria-hidden="true"

Metadata and SEO

Good metadata improves SEO and social sharing.

<head>
  <title>HTML Expert Guide</title>
  <meta name="description" content="A complete guide to HTML for aspiring experts.">
  <link rel="canonical" href="https://example.com/html-guide">
  <meta property="og:title" content="HTML Expert Guide">
  <meta property="og:description" content="A complete expert guide to HTML.">
</head>
    

Best Practices

• Use semantic tags for meaning and accessibility.
• Validate your HTML with the W3C Validator.
• Keep code clean and maintainable.
• Lazy-load images with loading="lazy".
• Use proper heading hierarchy (h1-h6).
• Ensure keyboard navigation and focus states.
• Optimize for performance: minimize resources, async/defer scripts.