Unit 2: HTML Structure and Core Tags

2.1 Basics of HTML & Page Structure

Key Topics:

HTML Page Structure: <html>, <head>, <title>, <body>
Building Blocks: DOCTYPE, Head section, Body section
Meta tags for charset, viewport, etc.
Common HTML Editors: VS Code, Sublime Text, Notepad++
Proper document formatting and hierarchy

2.2 Semantic & Non-Semantic Tags

Semantic Tags: Provide meaning to content

<header>, <footer>, <nav>, <main>
<section>, <article>, <aside>
<h1> to <h6>, <p>, <hr>, <br>
<strong>, <em>, <mark>, <del>, <ins>

Non-Semantic Tags: No specific meaning

<div>, <span> - Generic containers

Meta Tags:

charset: UTF-8 encoding
viewport: Responsive design
description, keywords, author

2.3 Media, Links & List Tags

Media Tags:

<img> - Images
<audio>, <video>, <source>
<iframe> - Embed external content
<figure>, <figcaption>

Links & Lists:

<a> - Hyperlinks (href, target attributes)
<ul>, <ol>, <li> - Lists
<table>, <tr>, <td>, <th> - Tables

Practice Problems (Practical 1-2)

Practical 1: Write HTML script to generate a webpage layout with header, navigation, main content area, sidebar, and footer using semantic HTML5 tags.

Practical 2: Create an HTML table displaying student information (Roll No, Name, Email, Phone) with proper thead, tbody, and formatting.

Q1: What is the difference between semantic and non-semantic HTML tags? Give examples.

Q2: Explain the purpose of meta tags and their attributes (charset, viewport, description).

Q3: How do you create a hyperlink? What are the different target attribute values?

Q4: Differentiate between <strong> and <b>, <em> and <i>.

Q5: How would you embed a YouTube video in an HTML page?

Q6: Create an HTML page with an image gallery using <figure> and <figcaption> tags.

Q7: Explain the colspan and rowspan attributes in table tags with examples.

Q8: Create nested lists showing a course syllabus with units and topics.