1. HTML Fundamentals (Advanced)
1. What are semantic HTML elements?
Semantic elements clearly describe their meaning (e.g., <header>, <article>).
They improve SEO, accessibility, and code readability.
2. Difference: <section> vs <article> vs <div>
<section>: Thematic grouping<article>: Independent reusable content<div>: No meaning (generic container)
3. <aside> vs <nav>
<nav>: Navigation links<aside>: Side content (ads, related links)
4. Purpose of <main>
Represents the primary content of the page (only one per page).
5. Document outline algorithm
Defines structure using headings (h1–h6). Helps screen readers understand hierarchy.
6. Void elements
Self-closing elements without content
Example: <img>, <br>, <hr>, <input>
7. Block vs Inline
- Block: Takes full width (
div,p) - Inline: Takes needed width (
span,a)
8. <strong> vs <b>
<strong>: Importance (semantic)<b>: Just styling
9. <em> vs <i>
<em>: Emphasis<i>: Styling (italic)
10. data-* attributes
Used to store custom data in HTML
Example:
<div data-id="123"></div>
2. Forms & Validation
11. GET vs POST
- GET: Data in URL, less secure
- POST: Data in body, more secure
12. HTML5 form validation
Built-in validation using attributes like required, pattern
13. Important attributes
required: Mandatory fieldpattern: Regex validationmin/max: Rangestep: Interval
14. novalidate
Disables browser validation
15. Accessible forms
- Use
<label>properly - Add
aria-* - Use semantic inputs
16. <input> vs <textarea>
<input>: Single line<textarea>: Multi-line
17. autocomplete
Enables browser suggestions
18. datalist
Provides dropdown suggestions
<input list="cars">
<datalist id="cars">
<option value="BMW">
</datalist>
19. File upload
<input type="file">
20. multipart/form-data
Required for file upload
3. Accessibility (a11y)
21. Accessibility
Making web usable for everyone (including disabled users)
22. ARIA roles
Provide extra accessibility info
Example:
<div role="button"></div>
23. aria-label vs aria-labelledby
aria-label: Direct labelaria-labelledby: Reference ID
24. Screen readers
Read DOM structure and semantics
25. tabindex
Controls keyboard navigation
26. Keyboard accessibility
Use proper tab order, focus states
27. Alt text
Describes images for screen readers
28. Semantic HTML vs ARIA
Always prefer semantic first, ARIA only when needed
29. role="button"
Used when non-button element behaves like button
30. Improve form accessibility
- Labels
- Error messages
- Focus handling
4. Performance & Optimization
31. HTML impact on performance
- DOM size
- Script loading
- Resource loading
32. async vs defer
async: Loads & executes immediatelydefer: Executes after HTML parsing
33. Preload vs Prefetch
- Preload: Current page resource
- Prefetch: Future resource
34. Lazy loading
<img loading="lazy">
35. Preload vs Prefetch (difference)
Preload = high priority
Prefetch = low priority
36. Render-blocking resources
CSS & JS blocking rendering
37. Critical rendering path
Process of converting HTML → pixels
38. DOM size impact
Large DOM slows rendering
39. srcset
Responsive images
<img src="small.jpg" srcset="large.jpg 1024w">
40. Image optimization
- Use WebP
- Compress images
- Use lazy loading
5. SEO & Meta Tags
41. Meta tags
Provide metadata for search engines
42. Title vs Description
- Title: Page title
- Description: Summary
43. Canonical tag
Avoid duplicate content
<link rel="canonical" href="url">
44. Open Graph
Used for social sharing
45. Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
46. HTML structure & SEO
Semantic tags improve ranking
47. Structured data
Schema markup for rich results
48. Robots meta tag
Control indexing
<meta name="robots" content="noindex">
49. nofollow vs noindex
- nofollow: Don’t follow links
- noindex: Don’t index page
50. Heading hierarchy
Proper use of h1 → h6 improves SEO & accessibility
0 Comments