Web Development Basics
Forms, Media, Tables, Accessibility &
DevTools
Forms & Inputs
• - Forms collect user data (login, search,
feedback)
• - <form> groups inputs, uses action & method
• - Labels link text to inputs → improves
accessibility
• - Validation:
• • HTML5 attributes (required, pattern, type)
• • JavaScript for custom checks
• • Server-side for security
Media in HTML
• - Images: <img src='...' alt='...'>
• • Use alt text for accessibility
• - Audio: <audio controls><source
src='song.mp3'></audio>
• - Video: <video controls><source
src='movie.mp4'></video>
• - Attributes: controls, autoplay, loop, muted
Tables
• - Tables organize data in rows & columns
• - <th> = header, <td> = data
• - <caption> for table description
• - Use scope='col' or scope='row' for
accessibility
• - Avoid tables for page layout (use CSS instead)
Accessibility (a11y)
• - Make sites usable for everyone (including
disabilities)
• - Follow WCAG guidelines (Perceivable,
Operable, Understandable, Robust)
• - Best practices:
• • Semantic HTML (header, main, footer)
• • Alt text for images
• • High contrast colors
• • Keyboard navigation
Developer Tools (DevTools)
• - Built-in browser tools (open with F12)
• - Elements: inspect & edit HTML/CSS
• - Console: run JS, debug errors
• - Network: monitor requests, performance
• - Performance: detect slow rendering
• - Application: check cookies, storage
• - Accessibility checker: contrast, ARIA
Summary
• - Forms: collect input, use labels & validation
• - Media: embed images, audio, video
• - Tables: structure data, add captions & scopes
• - Accessibility: follow WCAG, semantic HTML,
alt text
• - DevTools: inspect, debug, optimize websites