This topic covers the basics of HTML (Hypertext Markup Language), including understanding the structure of HTML documents, using HTML tags to create elements like headings, paragraphs, lists, links, and images.
Introduction to HTML – Quick Reference Notes
1. What Is HTML?
- HTML = HyperText Markup Language
- The standard language for creating web pages and web applications.
- Describes the structure of a document, not its presentation (handled by CSS) or behavior (handled by JavaScript).
2. Core Concepts
| Concept |
Description |
Example |
| Element |
Basic building block, written with opening and closing tags. |
<p>Paragraph text</p> |
| Tag |
The markup that defines an element. |
<h1> , </h1> |
| Attribute |
Provides additional information about an element. |
<img src="logo.png" alt="Company logo"> |
| Nested Elements |
Elements placed inside other elements to create hierarchy. |
<ul><li>Item</li></ul> |
| Doctype |
Declaration that tells the browser which HTML version is used. |
<!DOCTYPE html> |
3. Basic Document Skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<!-- Optional: link CSS, meta tags, scripts -->
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
<!DOCTYPE html> – HTML5 doctype (most common today).<html> – Root element; lang attribute specifies language.<head> – Metadata: character set, title, links to CSS, scripts, etc.<body> – Visible content of the page.
4. Frequently Used Elements
| Category |
Elements |
Typical Use |
| Headings |
<h1> – <h6> |
Section titles; <h1> is the most important. |
| Paragraph |
<p> |
Blocks of text. |
| Links |
<a href="url"> |
Hyperlinks; target="_blank" opens in a new tab. |
| Images |
<img src="path" alt="desc"> |
Inline graphics; alt provides accessibility text. |
| Lists |
<ul> (unordered), <ol> (ordered), <li> |
Grouped items. |
| Tables |
<table>, <tr>, <th>, <td> |
Tabular data. |
| Forms |
<form>, <input>, <label>, <textarea>, <button> |
User input. |
| Semantic Containers |
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer> |
Define page layout and improve accessibility/SEO. |
5. Attributes – Quick Guide
| Attribute |
Purpose |
Example |
id |
Unique identifier; used for CSS/JS targeting. |
<div id="hero"> |
class |
One or more class names; reusable styling hooks. |
<p class="intro highlight"> |
src |
Source URL for media (images, video, script). |
<img src="photo.jpg"> |
href |
Destination URL for links. |
<a href="https://example.com"> |
alt |
Text alternative for images (accessibility). |
<img alt="Company logo"> |
title |
Tooltip text shown on hover |
|