📖 Learn
⚡ Try It
📋 Reference
Pick a topic to begin
Choose any topic from the left sidebar to start learning. Each lesson includes explanations, live examples, and a coding playground.
HTML
CSS
JS
Preview
localhost/preview
HTML Quick Reference
| Tag | Description | Example |
|---|---|---|
<html> | Root element of an HTML page | <html lang="en">...</html> |
<head> | Contains metadata, title, links | <head><title>My Page</title></head> |
<body> | Contains visible page content | <body>...</body> |
<h1>–<h6> | Headings (h1 = largest) | <h1>Main Title</h1> |
<p> | Paragraph | <p>Hello world!</p> |
<a> | Hyperlink | <a href="url">Click</a> |
<img> | Image (self-closing) | <img src="img.png" alt="desc"> |
<ul> / <ol> | Unordered / Ordered list | <ul><li>Item</li></ul> |
<table> | Table container | <table><tr><td>Cell</td></tr></table> |
<form> | HTML form for user input | <form action="/submit">...</form> |
<input> | Input field (self-closing) | <input type="text" name="name"> |
<button> | Clickable button | <button>Submit</button> |
<div> | Generic block container | <div class="box">...</div> |
<span> | Generic inline container | <span style="color:red">text</span> |
<header> | Page or section header | <header>...</header> |
<nav> | Navigation links | <nav><a href="#">Home</a></nav> |
<main> | Main content of the document | <main>...</main> |
<footer> | Page or section footer | <footer>© 2024</footer> |
<section> | Thematic section | <section id="about">...</section> |
<article> | Self-contained content | <article>...</article> |
<strong> | Bold / important text | <strong>Important</strong> |
<em> | Italic / emphasized text | <em>Emphasized</em> |
<br> | Line break (self-closing) | Line 1<br>Line 2 |
<hr> | Horizontal rule / divider | <hr> |
<meta> | Metadata (charset, viewport…) | <meta charset="UTF-8"> |
<link> | External resource (CSS, icon) | <link rel="stylesheet" href="style.css"> |
<script> | Embedded or linked JavaScript | <script src="app.js"></script> |
<style> | Embedded CSS | <style>body{color:red}</style> |
<video> | Embed video | <video src="v.mp4" controls></video> |
<audio> | Embed audio | <audio src="a.mp3" controls></audio> |
<iframe> | Inline frame / embed | <iframe src="url"></iframe> |
<canvas> | Drawing surface (JS API) | <canvas id="c" width="400" height="300"></canvas> |
HTML Attributes Quick Reference
| Attribute | Used On | Description |
|---|---|---|
id | Any element | Unique identifier |
class | Any element | CSS class name(s) |
style | Any element | Inline CSS styles |
href | <a>, <link> | URL destination |
src | <img>, <script>, <video> | Resource URL |
alt | <img> | Alternative text for accessibility |
type | <input>, <button>, <script> | Element type |
name | <input>, <form> | Name for form submission |
value | <input>, <option> | Field value |
placeholder | <input> | Hint text inside field |
disabled | Form elements | Disables interaction |
required | <input> | Field is mandatory |
target | <a>, <form> | Where to open link (_blank, _self) |
rel | <a>, <link> | Relationship to linked resource |
data-* | Any element | Custom data attributes |