Introduction to HTML - Html Fundamentals | Lecture Notes

Learn about the basics of HTML (Hypertext Markup Language), its role in web development, and how it structures content on web pages.

Introduction to HTML – Study Notes

1. What is HTML?

Acronym: HyperText Markup Language
Purpose: The standard language for creating and structuring web pages and web applications.
Role in the web stack:
- HTML – defines the content and structure.
- CSS – handles presentation (layout, colors, fonts).
- JavaScript – adds interactivity and dynamic behavior.

2. Basic Concepts

Concept	Description	Example
Element	The building block of an HTML document, consisting of a start tag, content, and an end tag.	`<p>Hello world</p>`
Tag	The markup that tells the browser how to treat the enclosed content.	`<h1>` , `</h1>`
Attribute	Provides additional information about an element (e.g., `id`, `class`, `src`).	`<img src="logo.png" alt="Company logo">`
Document Type Declaration (Doctype)	Informs the browser which version of HTML is used.	`<!DOCTYPE html>`
Nested Elements	Elements can contain other elements, forming a hierarchy.	`<ul><li>Item</li></ul>`

3. Anatomy of an HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <!-- Optional: link CSS, scripts, meta tags -->
</head>
<body>
    <!-- Visible content goes here -->
    <h1>Welcome to My Site</h1>
    <p>This is a paragraph.</p>
</body>
</html>

<!DOCTYPE html> – declares HTML5.
<html> – root element; lang attribute specifies language.
<head> – metadata (charset, viewport, title, links to CSS/JS).
<body> – all content displayed in the browser.

4. Common HTML Elements

Category	Elements	Typical Use
Headings	`<h1>` – `<h6>`	Section titles; `<h1>` is most important.
Paragraph	`<p>`	Blocks of text.
Lists	`<ul>`, `<ol>`, `<li>`	Unordered (bullets) or ordered (numbers) lists.
Links	`<a href="URL">`	Hyperlinks to other pages or resources.
Images	`<img src="..." alt="...">`	Embeds raster graphics.
Tables	`<table>`, `<tr>`, `<th>`, `<td>`	Tabular data.
Forms	`<form>`, `<input>`, `<textarea>`, `<select>`, `<button>`	Collect user input.
Semantic containers	`<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`	Describe the role of page sections, improving accessibility and SEO.
Multimedia	`<audio>`, `<video>`, `<source>`	Embed sound or video.
Metadata	`<meta>`, `<title>`, `<link>`	Provide information about the document.

5.

Topic Concept Map

Click any prompt to explore this topic interactively with your AI Tutor:

Explain in simple terms Give me 3 practice exam questions Summarize key principles in 5 points

Introduction to HTML

HTML Document Structure

Upgrade

HTML Elements and Tags

Upgrade

Formatting Text with HTML

Upgrade

Working with Links and Images

Upgrade

Creating Lists and Tables

Upgrade

Forms and Input Elements

Upgrade

Semantic HTML

Upgrade

HTML5 Features and Best Practices

Upgrade