HTML — Structure & Semantics

Write meaningful markup so browsers, search engines, and assistive tech understand your content.

HTML (HyperText Markup Language) is the foundation of every website. It defines the structure and meaning of content on a page. HTML is not a programming language but a markup language, which means it uses tags to “mark up” content. Browsers then interpret these tags to display text, images, forms, and multimedia correctly.

A good understanding of HTML is critical for web developers because it ensures accessibility, SEO, and clean structure. HTML works together with CSS (for styling) and JavaScript (for interactivity).

Semantic Sections

Semantic tags describe the purpose of content instead of just how it looks. For example, <header> indicates a top section, while <main> holds the main content. This improves accessibility and makes the document easier to maintain.

<header>Brand, site-wide nav</header>
<main>
  <article>Independent, reusable content</article>
  <aside>Related info</aside>
</main>
<footer>Legal links, contacts</footer>

Forms: Labels, Inputs, Validation

Forms are used to collect user input. Labels must always be linked to inputs for accessibility. Validation attributes like required, minlength, and type="email" help ensure correct data entry before submission.

<form action="#" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" required minlength="2" />

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

  <label>Track</label>
  <select name="track">
    <option>Frontend</option>
    <option>Backend</option>
  </select>

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

Tables: Accessible structure

Tables display tabular data such as reports or schedules. Always use <caption> for description, <thead> for headers, and <th scope> attributes to help screen readers.

<table>
  <caption>Student Scores</caption>
  <thead><tr><th scope="col">Name</th><th scope="col">Score</th></tr></thead>
  <tbody><tr><th scope="row">Asha</th><td>92</td></tr></tbody>
</table>

Accessibility Essentials

Accessibility ensures that all users, including those with disabilities, can use your site. HTML provides attributes and structure that make content accessible to screen readers and assistive technologies.

• Use proper <label> and form controls.
• Images need descriptive alt text.
• Headings must be hierarchical (H1→H2→H3…).
• Use ARIA attributes (role, aria-label) where native HTML is insufficient.

Summary

HTML is the backbone of web pages. Semantic elements give meaning, forms collect input, tables structure data, and accessibility practices make content usable for everyone. Mastering these fundamentals prepares you to integrate CSS and JavaScript effectively.