Hands-On Introduction to Web Development with HTML

Create your first HTML page using VS Code, naming index.html. View it in a browser with live server, which auto-refreshes as you add content like hello from HTML.

Learn how HTML headings from h1 to h6 establish page structure and semantics, with one h1 per page and paragraphs in p tags.

Explore HTML text formatting with semantic elements such as strong and em, compare with i and b, and learn about br and hr as self-closing tags.

Explore HTML lists, including unordered (ul) and ordered (ol) lists, learn to use li items, nest lists, and understand when to apply bullets or numbers for navigation, features, and steps.

Explore html links with the a element and href, covering external and local pages via relative paths, and open them in the same or new tab with security-friendly rel attributes.

Embed images on a web page using the img element with src and alt attributes for accessibility and SEO. Demonstrate loading from remote links and local files in simple HTML.

Compare div and span as block and inline elements, where div is a generic container and span is a non-semantic inline wrapper; use them only when no semantic element fits.

Explore semantic HTML containers like header, nav, main, section, article, and footer to add meaning and accessibility without changing visuals, improving readability and maintainability of web pages.

Learn how HTML forms capture user data with the form element and common inputs like text fields, labels, buttons, selects, radios, and textareas, describing and organizing data for processing.

Build your first HTML form by adding input fields inside a form container, using action and method, placeholders, and meaningful name attributes for submitted data, including text input basics.

Explore common HTML input types such as text, email, password, number, checkbox, and radio, and see how type attributes influence validation and form usability.

Add labels linked to inputs with id and for attributes to improve accessibility, then include a select with options and values and a textarea for multi-line input.

Explore how to add a button to an HTML form and understand submission basics using action and method attributes, including GET and POST, with no backend yet.

Explore how to display tabular data in HTML by building tables with the table element, rows (tr), and cells (td), and add meaningful header cells (th) to describe each column.

Add audio and video content to a web page using HTML's built-in audio and video elements with src and controls attributes, including local files and mp3/mp4 formats.

Embed content on a web page using the iframe element with a src attribute to display another page or video, noting guardrails and security and uses like YouTube embeds.

Apply HTML best practices to write cleaner, more readable, and maintainable markup. Indent consistently, use semantic elements, meaningful file names, accessible content, and CSS for layout instead of overusing br.

Wrap up this hands-on intro by encouraging learners to build small projects, such as a personal website with semantic elements, forms, and a multi-page structure, then learn css next.