Semantic HTML and accessibility

HTML describes meaning, not looks. Using the right element gives you keyboard support, screen-reader support and better SEO for free.

Page structure

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Frontend Intern at Acme · HireSol</title>
  <meta name="description" content="Paid 3-month frontend internship in Pune." />
</head>
<body>
  <header>…logo and <nav>…</nav></header>
  <main>
    <article>
      <h1>Frontend Intern</h1>
      <section aria-labelledby="about"><h2 id="about">About the role</h2>…</section>
    </article>
    <aside>Similar jobs</aside>
  </main>
  <footer>…</footer>
</body>
</html>

• One h1 per page, then h2, h3 in order: screen-reader users jump between headings.
• <nav> for main navigation, <main> once per page, <article> for self-contained content, <section> for a themed group with a heading.
• The viewport meta tag is what makes mobile layouts work at all.

Buttons vs links

• A link (<a href>) goes somewhere (a new URL).
• A button does something (submit, open a modal, toggle).

A clickable <div> is not focusable with the keyboard and isn't announced as a button. If you catch yourself writing <div onclick>, use <button>.

Forms done right

<form action="/apply" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email" />

  <fieldset>
    <legend>Work mode</legend>
    <label><input type="radio" name="mode" value="remote" /> Remote</label>
    <label><input type="radio" name="mode" value="office" /> Office</label>
  </fieldset>

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

Every input needs a label (clicking the label focuses the input). Use the right type (email, tel, number, date) to get the right mobile keyboard and free validation.

Accessibility checklist

• Images: meaningful alt text, or alt="" for decorative ones.
• Colour contrast at least 4.5:1 for normal text.
• Everything works with the keyboard (Tab, Enter, Space, Esc) and focus is visible.
• Don't rely on colour alone ("fields in red are wrong").
• Use ARIA only when no native element exists: "no ARIA is better than bad ARIA".

Check yourself

• Why is a <button> better than a clickable <div>?
• What does the viewport meta tag do?
• Name three things that make a form accessible.