HTML Quick Reference Guide

React primarily uses JSX (JavaScript XML), which is similar to HTML but has some differences. Mastering these core HTML concepts will help you become more proficient in React.

1. Semantic HTML

Use proper HTML elements for structure: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>. This improves accessibility and SEO.

2. Forms and Input Handling

React frequently deals with forms, so understanding:

<input>, <textarea>, <select>, <option>, <button>.
Attributes like name, value, placeholder, required.
How forms submit data (<form action="/submit"> vs. React’s controlled components).

3. Accessibility (ARIA)

alt attributes for <img>. ARIA attributes like aria-label, role, tabindex to make applications more accessible.

4. Event Handling in HTML

onClick, onChange, onSubmit, onFocus, onBlur. In React, these event handlers are written in camelCase (onClick instead of onclick).

5. Lists and Tables

<ul>, <ol>, <li> for rendering lists dynamically. <table>, <thead>, <tbody>, <tr>, <td>, <th> for structured data.

6. Attributes and Differences in JSX

class → className in React.
for → htmlFor (for labels).
Self-closing tags (<img />, <input />).
Boolean attributes (checked, disabled, required).

7. Media Elements

<img>, <video>, <audio>, <iframe> for embedding content. Use of src, controls, autoplay, loop, muted.

8. Meta Tags & SEO

<meta name="description" content="React learning page">. <title> for dynamic titles. Open Graph & Twitter meta tags for social media sharing.

9. Forms and Validation

required, minlength, maxlength, pattern.
Difference between native validation and handling validation in React.

10. Progressive Enhancement & Responsive Design

<picture> and <source> for responsive images.
Viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Use of relative units (em, rem, %, vh, vw) for scalability.

HTML