HTML
What is HTML
HTML stands for **HyperText Markup Language**. It is the standard language used to create web pages...
Paragraphs
Paragraphs are blocks of text. Use `<p>` tag to write them....
Links
Links let you go from one page to another. Use the `<a>` tag with `href` (the web address)....
Images
Images make websites look nice. Use `<img>` tag with `src` for the file and `alt` for text if the im...
Lists
Lists help organize items. There are two types: - **Ordered list `<ol>`** → numbered - **Unordered ...
Tables
Tables help to show information in rows and columns. Use `<table>`, `<tr>` (row), `<td>` (cell)....
Forms
Forms are used to take input from users (like a login form). Use `<form>` with `<input>` and `<butto...
Audio
The `<audio>` tag is used to play sound. You can add `controls` so the user can play/pause....
Video
The `<video>` tag is used to play videos. You can add `controls` for play/pause....
Semantic Tags
Semantic tags describe meaning. Examples: - `<header>` → top of page - `<nav>` → menu - `<main>` → ...
Iframes
An `<iframe>` shows another webpage inside your page. Like a window inside a window....
Meta Tags
Meta tags give **information about the page**. They go inside `<head>`. For example, `charset` tells...
Forms Advanced
Forms can have many input types: - `text` - `email` - `number` - `checkbox` - `radio` - `date` The...
Forms + Labels
Labels connect text with inputs, making forms easier to use....
Div and Span
`<div>` is a box for grouping elements. `<span>` is used for styling small parts of text....
Comments
Comments are notes for developers. They don’t show on the page. Use `<!-- -->`....
Entities
Some symbols don’t work in HTML. Use **entities** instead: - `<` → < - `>` → > - `&` → & ...
HTML5 Features
HTML5 brought new features: - `<canvas>` → draw shapes - `<video>` and `<audio>` → play media - `<l...
Best Practices
Some rules to follow: - Always close tags - Use lowercase for tags - Keep code neat and clean - Use...
HTML Attributes
Attributes provide **extra information** about elements. Example attributes include: - `id` → uniqu...
Block vs Inline Elements
HTML elements are either: - **Block-level** → start on a new line (e.g., `<div>`, `<p>`, `<h1>`) -...
Inline vs External CSS
There are 3 ways to style HTML: 1. **Inline CSS** → style directly in the tag. 2. **Internal CSS** ...
HTML Forms Validation
You can validate form inputs using HTML alone: - `required` → must be filled - `pattern` → regex ch...
HTML5 Input Types
HTML5 introduced new input types for better user experience: - `color` - `range` - `file` - `search...
Media Embedding
You can embed content from other platforms like YouTube or Google Maps using `<iframe>`....
HTML5 Data Attributes
Custom `data-*` attributes store extra information on elements. These can be accessed via JavaScript...
HTML5 Local Storage
`localStorage` lets you **store data in the browser** that stays even after refreshing or closing th...
HTML5 Session Storage
`sessionStorage` is similar to localStorage but data **goes away when the browser is closed**....
HTML Accessibility Basics
Accessibility helps people with disabilities use websites. Common practices: - Use `alt` for images...
HTML5 Canvas Advanced
The `<canvas>` element lets you **draw graphics and animations** using JavaScript....
HTML5 Geolocation API
Geolocation API lets you **get the user's location** if they allow permission....
HTML5 Drag and Drop
HTML5 supports drag-and-drop features for interactive UIs....
HTML5 Audio API
Control audio programmatically with JavaScript using the HTML5 Audio API....
HTML5 Video with Captions
You can add captions to videos using `<track>` tag....
HTML SEO Basics
SEO (Search Engine Optimization) helps your website rank higher on Google. Best practices include: ...
Responsive Web Design
Use the `<meta viewport>` and CSS techniques like **flexbox** and **media queries** to make websites...
HTML Best Practices (Advanced)
Follow these advanced rules for better HTML: - Use `aria-` attributes for accessibility - Keep stru...
Progressive Web App (PWA) Basics
HTML combined with JavaScript and service workers can create **PWA apps** that work offline and feel...
Final HTML Project
Build a full-featured HTML project with: - Navigation bar - Form with validation - Video and audio ...