HTML Accessibility & SEO Q&A

Q46 — What is ARIA?
ARIA (Accessible Rich Internet Applications) helps make dynamic content accessible.
Attributes like role, aria-label assist screen readers.

Example:
Q47 — alt vs title for images?
alt: Required. Used by screen readers & when image fails.
title: Optional. Shows tooltip. Not a replacement for alt.
Q48 — id vs class?
id: unique (one per page).
class: reusable for styling & JS selection.
Q49 — <header>, <footer>, <main> uses?
Semantic layout landmarks:
- <header> → top info/nav - <footer> → bottom info - <main> → main content Helps SEO & screen readers.

Q50 — What are meta tags in HTML?
Provide metadata inside <head>:

<meta charset="UTF-8">
<meta name="description" content="Learn HTML interview questions">
<meta name="keywords" content="HTML, interview, web development">
<meta name="author" content="Manaswini">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Q51 — UTF-8 vs other encodings?
UTF-8: Supports almost all languages (universal).
ISO-8859-1: Western European only.
Shift-JIS: Japanese characters.
Q52 — Canonical link vs normal link?
Normal link: Navigation.
Canonical link: SEO — preferred URL to avoid duplicate content.
```
<link rel="canonical" href="https://example.com/main-page">
```
Q53 — How HTML structure affects SEO?
- Semantic tags improve crawlability
- Correct heading order improves content understanding
- Alt text boosts accessibility & SEO
Q54 — robots.txt vs meta robots?
robots.txt: Tells search engines which pages to crawl/ignore (site-wide).
meta robots: Page-level rules: index, noindex, nofollow

Example:
```
<meta name="robots" content="noindex, nofollow">
```
Q55 — How to make a website accessible?
✅ Use semantic tags <main>, <nav>, <section>
✅ Use ARIA where needed
✅ Provide alt text
✅ Correct heading order
✅ Label forms properly

⬅ Home