HTML Course Notes with Code Examples
1. What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages. It
structures content on the web using elements and tags.
2. Basic HTML Document Structure
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>: Declares the document type as HTML5.
<html>: Root element of an HTML page.
<head>: Contains meta information.
<title>: Sets the page title shown on the browser tab.
<body>: Contains the visible content.
3. Common HTML Tags and Their Use
Headings
html
CopyEdit
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<!-- h1 is the largest, h6 is the smallest -->
Paragraphs and Text Formatting
html
CopyEdit
<p>This is a paragraph of text.</p>
<strong>Bold Text</strong>
<em>Italic Text</em>
<u>Underlined Text</u>
Links
html
CopyEdit
<a href="https://www.example.com" target="_blank">Visit Example.com</a>
href specifies the URL.
target="_blank" opens link in a new tab.
Images
html
CopyEdit
<img src="image.jpg" alt="Description of image" width="300" />
src is the image source URL or path.
alt provides alternative text for accessibility.
Lists
Unordered List
html
CopyEdit
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
Ordered List
html
CopyEdit
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
4. HTML Forms (Basic Example)
html
CopyEdit
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<input type="submit" value="Submit" />
</form>
action: URL where the form data is sent.
method: HTTP method (GET or POST).
required attribute makes a field mandatory.
5. HTML Semantic Elements
Semantic elements clearly describe their meaning in a human- and machine-readable way.
html
CopyEdit
<header>
<h1>Website Header</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
6. Comments in HTML
Comments are notes in the code that browsers ignore:
html
CopyEdit
<!-- This is a comment -->
7. Attributes in HTML
Attributes provide additional information about HTML elements.
Example:
html
CopyEdit
<a href="https://www.google.com" title="Google Website">Google</a>
href: link destination.
title: tooltip text when hovered.
8. Nesting Elements
Elements can be nested inside each other:
html
CopyEdit
<p>This is a paragraph with <strong>bold</strong> text.</p>
9. Block vs Inline Elements
Block elements: take full width, start on a new line (e.g., <div>, <p>, <h1>).
Inline elements: take only needed width, flow inline (e.g., <span>, <a>, <img>).
10. Example: Complete Simple HTML Page
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sample Page</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>Welcome!</h2>
<p>This is the homepage.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<p>We offer web development and design.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form action="/submit" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<input type="submit" value="Subscribe" />
</form>
</section>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
