Session 1: HTML Foundations & Semantic Page Structure

Session Objective

By the end of this session, students will be able to design and build a complete, well-structured HTML page using semantic elements, forms, tables, media, and proper metadata. This session establishes a strong foundation for styling and layout using CSS in upcoming sessions.

Session Outline

🔹 Quick Recap

• Review the core HTML document structure:

  • <!DOCTYPE>, html, head, body

• Headings, paragraphs, links, images, and lists

• Emphasizing that HTML is responsible for structure and meaning, not visual design

🔹 Semantic HTML & Page Layout

• Introduction to semantic HTML and why it matters

• Benefits:

  • Search Engine Optimization (SEO)

  • Code readability and maintainability

  • Accessibility standards

• Key semantic elements:

  • header, nav, main, section, article, aside, footer

• Hands-on example:

  • Building a structured blog or portfolio layout

🔹 Block vs Inline Elements

• Understanding block-level and inline elements

• Common comparisons:

  • div vs span

  • p vs strong

• How this concept supports layout creation in CSS

🔹 Tables & Structured Data

• Representing tabular data using:

  • table, thead, tbody, tr, th, td

  • colspan, rowspan

• Practical example:

  • Creating a student grades table

🔹 Forms & User Input

• Forms as the backbone of user interaction

• Core form concepts:

  • form, action, method (GET vs POST)

• Essential input types:

  • text, password, email, number

  • checkbox, radio, file, date

  • submit, button

• Important attributes:

  • name, id, placeholder, required

  • readonly, disabled, value

• Additional form elements:

  • label, textarea, select, option

• Practical implementation:

  • Login form

  • Simple registration form

🔹 Media, Metadata & SEO Basics

• Embedding media elements:

  • audio and video with controls

• Essential meta tags:

  • charset, description, viewport, title

• Introduction to:

  • SEO fundamentals

  • Mobile responsiveness concepts

🔹 Accessibility & Best Practices

• Writing accessible HTML:

  • Using alt attributes correctly

  • Applying semantic elements properly

  • Linking label elements to inputs

• Avoiding excessive or unnecessary div usage

• Clean code structure and proper indentation

Practical Assignment

Students will build a Landing Page that includes:

• Header with navigation

• Hero section

• About section

• Contact form

• Footer