What is HTML?
HTML stands for HyperText Markup Language. It is the skeleton of every webpage — it tells the browser what content to show and how to structure it.
Imagine building a house. HTML is the structure — walls, rooms, doors. CSS is the paint and decoration. JavaScript makes things interactive (lights, doors opening).
HTML uses tags like <h1> to mark up content. Browsers read these tags and display the page accordingly.
HTML Structure
Every HTML page has the same basic skeleton. Understanding this is the foundation of everything you'll build.
- 1
<!DOCTYPE html>— Tells the browser "This is HTML5." Always the very first line. - 2
<html>— The root element. Everything lives inside this tag. - 3
<head>— Invisible info about the page (title, styles, metadata). - 4
<title>— The text shown on the browser tab. - 5
<body>— Everything the user sees: text, images, links, buttons.
<p> and a closing </p>. The closing tag has a forward slash.HTML Headings
HTML has 6 heading levels — <h1> is the biggest and most important, <h6> is the smallest.
Think of a newspaper: the main headline is <h1>. Section titles are <h2>. Sub-topics are <h3>, and so on downward.
Use only one <h1> per page. Use as many h2–h6 as you need for structure.
Paragraphs & Line Breaks
The <p> tag defines a paragraph. Browsers automatically add space before and after each one.
HTML Links
The <a> (anchor) tag creates clickable links. The href attribute sets the destination URL or file path.
1. The href attribute — the destination URL or file path.
2. The link text — what the user sees and clicks on.
Example: <a href="https://google.com">Visit Google</a>
| Attribute | What it does | Example |
|---|---|---|
| href | Sets the destination URL | href="page.php" |
| target | Where link opens. _blank = new tab | target="_blank" |
| title | Tooltip text shown on hover | title="Google" |
| download | Downloads file instead of navigating | download |
target="_blank", also add rel="noopener noreferrer". This prevents the new tab from controlling your page.https://... — normal website link (include https).
mailto:hello@example.com — opens the email app.
tel:+911234567890 — opens the phone dialer (best on mobile).
#sectionId — jumps to an element with id="sectionId" on the same page.
HTML Images
The <img> tag displays images. It is self-closing (no closing tag). Always include the alt attribute for accessibility.
src — the image path or URL. This is required.
alt — a text description. Used by screen readers for blind users, and shown when the image fails to load. Always include it!
width / height — controls size in pixels. Setting both prevents layout shifts while loading.
| Extra attribute | What it does | Example |
|---|---|---|
| loading | Lazy loads offscreen images | loading="lazy" |
| decoding | Hints how the browser decodes | decoding="async" |
| srcset | Multiple image sizes (responsive) | srcset="320w,560w..." |
alt. If it is decorative, use alt="".Text Formatting
HTML has built-in tags to make text bold, italic, highlighted, strikethrough and more — each tag carries a specific meaning.
| Tag | Effect | Best used for |
|---|---|---|
| <strong> | Bold + important | Text with strong importance |
| <b> | Bold only | Visually bold, no extra meaning |
| <em> | Italic + emphasis | Stressed or emphasized text |
| <i> | Italic only | Foreign words, technical terms |
| <mark> | Yellow highlight | Highlighted content |
| <s> | Strikethrough | No longer relevant content |
| <sub> | Subscript H₂O | Chemical formulas, footnotes |
| <sup> | Superscript x² | Math exponents, ordinals |
| <code> | Monospace code style | Inline code snippets in text |
HTML Comments
Comments are notes in your code that browsers completely ignore. They help you and your team understand the code.
Start with <!-- and end with -->. Everything between is invisible to users in the browser.
Uses: explain complex code, temporarily disable code without deleting it, leave TODO reminders for yourself.
HTML Colors
Colors in HTML are applied with the style attribute using CSS color properties. Multiple formats are supported.
| Format | Example | Notes |
|---|---|---|
| Name | red, blue, tomato | 140+ built-in color names |
| HEX | #ff0000, #3498db | Most popular format in CSS |
| RGB | rgb(255, 0, 0) | Red, Green, Blue values 0–255 |
| RGBA | rgba(255,0,0,0.5) | Same + transparency (0=clear, 1=solid) |
| HSL | hsl(0,100%,50%) | Hue, Saturation, Lightness |
HTML Lists
HTML has three types of lists to group related items in a clear, organized way.
HTML Tables
Tables display data in rows and columns — like a spreadsheet. Use them only for tabular data, never for page layout.
| Tag | What it means |
|---|---|
| <table> | The table container |
| <thead> | Groups the header rows |
| <tbody> | Groups the data rows |
| <tr> | One horizontal row |
| <th> | Header cell — bold & centered by default |
| <td> | Data cell — regular content |
| colspan="2" | Merges cells horizontally |
| rowspan="2" | Merges cells vertically |
<caption>, use <th scope="col">/<th scope="row">, and keep tables only for data (not layout).Forms & Inputs
Forms collect information from users — login boxes, search bars, contact forms. The <form> tag wraps all input elements.
| Input Type | What it creates |
|---|---|
| type="text" | Single line text box |
| type="email" | Email box (auto-validates format) |
| type="password" | Password box (hides text) |
| type="number" | Number input with up/down arrows |
| type="checkbox" | Tick box — yes/no choice |
| type="radio" | One choice from a group |
| type="range" | Slider control |
| type="submit" | Submit button |
| <textarea> | Multi-line text area |
| <select> | Dropdown menu |
action is where the data goes (a URL on your server).
method="get" puts data in the URL (good for search forms).
method="post" sends data in the request body (good for login/register).
name on inputs becomes the field key (example: name="email").
for and matching id. This helps screen readers and makes clicking the label focus the input.Div & Span
These containers have no visual appearance — they exist purely for grouping content to apply CSS or JavaScript.
<div> is block-level — takes the full width and starts on a new line. Use it for layout sections and boxes.
<span> is inline — only takes the space of its content, lives inside text. Use it to style a specific word or phrase in a sentence.
HTML Attributes
Attributes provide extra information to HTML tags. They go inside the opening tag in name="value" format.
id="name" Unique identifier for one element. Used by CSS (#name) and JavaScript.
class="name" Groups elements. Multiple elements can share a class. Used by CSS (.name).
style="..." Adds inline CSS directly on the element.
title="text" Tooltip shown when user hovers over the element.
hidden Hides the element completely (like display:none in CSS).
Semantic HTML5
Semantic elements describe their meaning clearly. Always prefer them over generic <div> tags where possible.
Semantic tags help search engines understand your page, make code more readable, and help screen readers for visually impaired users.
Instead of <div id="header"> use <header>. Instead of <div id="nav"> use <nav>. Same look, much better meaning.
| Tag | Meaning & Use |
|---|---|
| <header> | Page or section header — logo, title, nav |
| <nav> | A block of navigation links |
| <main> | The main unique content (only one per page) |
| <section> | Thematic grouping of related content |
| <article> | Self-contained content (blog post, news story) |
| <aside> | Side content — sidebar, related links |
| <footer> | Footer — copyright, contact, links |
| <figure> / <figcaption> | Image with a descriptive caption below |
Audio & Video
HTML5 added native <audio> and <video> elements. No plugins needed — media works right in the browser.
| Attribute | What it does |
|---|---|
| controls | Shows play/pause/volume controls |
| autoplay | Starts playing automatically on load |
| loop | Replays when the video/audio finishes |
| muted | Starts with sound turned off |
| poster | (Video only) Image shown before playing |
| width / height | Sets the size of the player |
Meta Tags & <head>
The <head> section contains metadata — invisible information that describes your page to browsers, search engines and social media.
<meta charset="UTF-8"> — UTF-8 supports all characters worldwide. Always include first.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> — Makes your page look correct on mobile phones. Always include this!
<meta name="description" content="..."> — The description shown in Google search results.
<link rel="stylesheet" href="style.css"> — Links your external CSS file.
<script src="app.js"></script> — Links your JS file. Best placed just before </body>.
Block vs Inline Elements
Some elements start on a new line and stretch (block). Others live inside a line of text (inline). Knowing this makes layout and styling much easier.
Block: takes full width, starts new line (example: <div>, <p>, <h2>, <ul>).
Inline: takes only needed width, stays in the same line (example: <span>, <a>, <strong>, <em>).
display:inline-block), but HTML defaults matter for understanding.Classes & IDs
class is for groups (many elements). id is unique (one element). They are used for CSS styling, JavaScript selection, and page links like href="#section".
HTML Entities (& Symbols)
Some characters have special meaning in HTML, like < and &. Entities are safe ways to display them as text.
| Entity | Shows | Why |
|---|---|---|
| < | < | Show a < character |
| > | > | Show a > character |
| & | & | Show an & character |
| " | " | Show a double quote |
| | (space) | Non-breaking space |
< directly, the browser may think you are starting a tag.Iframes & Embeds
<iframe> lets you embed another webpage inside your page (maps, videos, dashboards). Use it carefully for performance and security.
sandbox to restrict what the embedded page can do.sandbox when embedding untrusted content to reduce risk.Responsive Images (srcset)
Modern HTML can load the best image size for the user's screen. This makes pages faster, especially on mobile.
src is the default image.
srcset provides multiple sizes. The browser chooses the best one.
sizes tells the browser how wide the image will be on the page.
width:100% + height:auto keeps images proportional.Accessibility Basics
Accessible HTML works for everyone, including people using screen readers or keyboards. Good accessibility also improves SEO and usability.
| Practice | Why it matters |
|---|---|
| Alt text on images | Screen readers can describe images |
| Use proper headings | Creates a clear page outline |
| Label form inputs | Users know what each input means |
| Use semantic tags | Helps navigation and meaning |
for + matching id are a big accessibility win.SEO & Social Sharing
HTML in the <head> helps search engines and social apps understand your page. A good title and description increases clicks.
<title> and <meta name="description"> are the basics for search results.
Open Graph tags improve previews when sharing links on WhatsApp, Facebook, LinkedIn, etc.
Best Practices & Validation
Clean HTML is easier to style, easier to maintain, and less buggy. These rules help you write professional HTML from day one.
<header>, <main>, <footer> instead of only divs.alt on images and labels for inputs.Quotations & Citations
HTML has special tags for quotes, abbreviations, and time. These tags add meaning (semantics) and improve accessibility.
| Tag | Use | Example |
|---|---|---|
| <blockquote> | Long quote (block) | Multi-line quote |
| <q> | Short quote (inline) | He said “Hi” |
| <cite> | Title of a work | <cite>A Book</cite> |
| <abbr> | Abbreviation | <abbr title="HyperText Markup Language">HTML</abbr> |
| <time> | Date/time | <time datetime="2026-03-25">Mar 25, 2026</time> |
title.Pre, Code & Keyboard
Use <pre> to preserve spacing and new lines. Use <code> for code snippets and <kbd> for keyboard shortcuts.
Ctrl + S.<pre> + <code> for formatted code blocks.CSS/JS & Favicons
Connect your CSS and JavaScript using <link> and <script>. A favicon makes your site look professional in the browser tab.
CSS: <link rel="stylesheet" href="style.css"> in the <head>.
JS: Prefer <script src="app.js" defer></script> so HTML loads first.
Favicon: <link rel="icon" href="/favicon.png">.
Forms Advanced
Modern HTML forms support many input types and built-in validation. Often you can do a lot without JavaScript.
| Feature | How | Why |
|---|---|---|
| Validation | required, minlength, pattern | Stops bad data early |
| Mobile keyboards | type="email", type="tel" | Right keyboard on phones |
| Grouping | <fieldset> + <legend> | Clarity + accessibility |
| Suggestions | <datalist> | Quick hints |
Figure, Picture & Lazy Images
Use <figure> + <figcaption> for images with captions, and <picture> when you need different sources (formats/sizes).
loading="lazy" to non-critical images to improve page speed.<picture> chooses the best source; CSS controls layout and size.Tables Properly
Use a caption, table sections, and header cells to make tables easier to understand (and accessible to screen readers).
SVG & Canvas
SVG is vector graphics (crisp at any size). Canvas is a drawing surface controlled by JavaScript (great for games and charts).
Details & Dialog
Build simple UI with pure HTML: collapsible sections with <details> and modal popups with <dialog>.
<dialog> and its backdrop.Scripts & Noscript
For external JS files, prefer defer so HTML loads first. Use type="module" for modern JavaScript. Use <noscript> for graceful fallback.
defer for external files.Data & Microdata
Use data-* attributes to attach custom info to elements for JavaScript. Microdata adds extra meaning for things like people/products.
data-* for your app logic. Microdata is optional and often handled by SEO tooling.Links Advanced
Links are more than just "go to another page". You can create phone/email links, download links, open in a new tab safely, and jump to sections on the same page.
New tab: use target="_blank" and add rel="noopener noreferrer" for security.
Same page: link to an element id like #contact.
Phone/email: use tel: and mailto:.
target="_blank", always add rel="noopener" for safety.Paths & URLs
A path tells the browser where to find a file (image, page, CSS, JS). Beginners often break links because of wrong relative paths.
| Type | Example | Meaning |
|---|---|---|
| Absolute URL | https://site.com/page | Works from anywhere |
| Root-relative | /assets/logo.png | From website root |
| Relative | images/pic.jpg | From current folder |
| Go up | ../css/style.css | One folder up |
images/pic.jpg and /images/pic.jpg are not the same.Global Attributes
Global attributes can be used on almost any element. They help with styling (class), linking (id), accessibility, and interactivity.
#id) and JavaScript.id unique. Repeating the same id breaks JS and links.Audio/Video Advanced
HTML media tags support posters, looping, multiple sources, and captions. Captions are important for accessibility.
controls shows play/pause UI.
poster shows an image before video starts.
muted is often required for autoplay in browsers.
<track> adds captions/subtitles.
Iframes Security
Iframes embed another page inside your page. Real websites often block being embedded. Use security attributes like sandbox and good defaults like loading="lazy".
| Attribute | Why |
|---|---|
sandbox | Restricts what the iframe can do (recommended for untrusted content) |
loading="lazy" | Loads iframe only when near the viewport |
referrerpolicy | Controls referrer information sent |
allow | Permissions for camera, microphone, fullscreen, etc. |
sandbox without values is very strict. Add permissions only if needed.Template Element
The <template> tag stores HTML that is NOT shown until JavaScript clones it. This is useful for repeating UI like cards, rows, or list items.
<template> content does not render until you use JavaScript.Forms Upload & Method
When you upload files, the form needs enctype="multipart/form-data". Also learn action, method, and different button types.
method="post" is used for sending data.
action is the URL that receives form data.
name on inputs becomes the key in submitted data.
enctype="multipart/form-data", the file input will not send the file.Input Types & Validation
HTML has many input types: number, date, range, email, url, password. The browser can validate these automatically and show the right keyboard on mobile.
Images: srcset & sizes
Use srcset and sizes so the browser downloads the best image for the user's screen. This makes sites faster on mobile.
alt. It helps accessibility and SEO.SEO: JSON-LD Basics
Structured data helps search engines understand your page (like "This is an article" or "This is a product"). The most common format is JSON-LD inside a script tag.
Accessibility: ARIA Basics
ARIA attributes help assistive technologies when HTML alone is not enough. First prefer semantic HTML. Use ARIA mainly to label controls and describe relationships.
Mini Project: Semantic Page
Build a simple page using semantic elements used in real sites: header, nav, main, article, aside, and footer.
Head Deep Dive
The <head> contains important info for browsers and search engines: charset, viewport, title, description, icons, and social previews.
Debugging & Validation
When HTML doesn't work, don't guess. Use debugging steps: validate HTML, inspect elements, and read console/network errors.
Performance Basics
Fast pages feel professional. HTML has simple performance helpers: lazy loading, proper image sizes, and non-blocking scripts.
| Tip | HTML example | Why |
|---|---|---|
| Lazy images | loading="lazy" | Loads only when needed |
| Decode async | decoding="async" | Better loading behavior |
| Non-blocking JS | <script src="app.js" defer> | HTML renders faster |
| Give sizes | width + height | Prevents layout shift |
HTML HOME
This page is a complete HTML tutorial + reference. Use the left sidebar search to jump to any topic instantly.
#taglist, #events, and #httpmethods.#forms, #seo, and #performance.HTML Editors
You can write HTML in any text editor, but a code editor makes you faster with autocomplete, formatting, and live previews.
ul>li*5 and expand into HTML instantly.HTML Basic
A basic HTML page needs a doctype, <html>, <head> and <body>. Everything visible goes in the body.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First Page</title> </head> <body> <h1>Hello HTML</h1> <p>This is a paragraph.</p> </body> </html>
<header> and <main>) as your page grows.HTML Elements
An HTML element is the full thing: opening tag + content + closing tag (some elements are void/self-closing like <img>).
| Type | Example | Notes |
|---|---|---|
| Normal | <p>Text</p> | Has opening + closing tags |
| Void | <img>, <br> | No closing tag |
| Nesting | <a><span>...</span></a> | Elements can contain other elements |
HTML Styles
HTML uses CSS for styling. The quickest way is the style attribute, but real projects prefer external CSS files.
<h2 style="color:#00e5ff;margin:0">Styled heading</h2> <p style="color:#7986cb">Inline styles work, but don't scale well.</p>
class="card" + CSS in a stylesheet.HTML CSS
There are 3 ways to add CSS: inline, internal <style>, and external <link>. External is best for real sites.
| Method | Example | Best for |
|---|---|---|
| Inline | style="..." | Small demos only |
| Internal | <style>...</style> | Single page prototypes |
| External | <link rel="stylesheet" href="style.css"> | Production websites |
HTML Favicon
A favicon is the small icon shown in the browser tab. It helps branding and looks more professional.
<link rel="icon" href="/favicon.png"> <!-- optional --> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
HTML Page Title
The <title> shows in the browser tab and is one of the most important SEO signals for the page.
- 1Put the main keyword first (example:
HTML Tutorial). - 2Keep it readable; avoid keyword stuffing.
- 3Make each page title unique.
HTML Buttons
Use <button> for actions, and <a> for navigation. Always set the type inside forms.
| Button type | What it does | Example |
|---|---|---|
| submit | Submits the form | type="submit" |
| button | Does nothing by default (use JS) | type="button" |
| reset | Resets form fields | type="reset" |
<button> defaults to type="submit". Set type="button" for JS buttons.HTML Layout
HTML layout is mostly semantic structure. CSS (grid/flex) handles the visual layout.
#miniproject for a full semantic page structure example.HTML Responsive
Responsive design means the page works on phones, tablets, and desktops. HTML starts it with the viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
Use flexible layouts (CSS grid/flex), responsive images (srcset), and avoid fixed widths.
max-width: 100% on images/videos/iframes to prevent horizontal scrolling.HTML Emojis
Emojis work automatically if your page uses UTF-8: <meta charset="UTF-8">. You can also use numeric entities.
Direct: 😀 🚀 🎉
Entity: 🚀 → 🚀
HTML Charsets
Charset tells the browser how to decode text. Use UTF-8 for modern websites. Put it near the top of <head>.
<meta charset="utf-8">
HTML URL Encode
URLs can't contain spaces and some special characters. Encoding replaces them with safe sequences like %20.
| Character | Encoded | Example |
|---|---|---|
| space | %20 | Hello%20World |
| & | %26 | a%26b |
| ? | %3F | q%3F |
encodeURIComponent() for query parameter values.HTML vs XHTML
HTML5 is forgiving. XHTML is stricter XML-style markup (must be well-formed). Most modern web pages use HTML5.
HTML Form Attributes
Form attributes control where data goes and how it's sent. They live on the <form> tag.
| Attribute | Meaning | Example |
|---|---|---|
| action | URL that receives data | action="/signup" |
| method | HTTP method | method="post" |
| enctype | Encoding (uploads) | multipart/form-data |
| autocomplete | Browser autofill | autocomplete="on" |
HTML Form Elements
Forms are built from inputs, selects, textareas, and buttons. Use <label> for accessibility.
<fieldset> + <legend> to group related inputs.HTML Input Attributes
Input attributes add constraints and improve UX (validation, keyboards, autofill). They also help accessibility.
| Attribute | Use | Example |
|---|---|---|
| required | Must be filled | required |
| placeholder | Hint text | placeholder="Email" |
| min / max | Numeric bounds | min="1" |
| pattern | Regex pattern | pattern="\\d{10}" |
| autocomplete | Autofill hint | autocomplete="email" |
HTML Plug-ins
Modern HTML5 supports audio/video without plug-ins. Legacy plug-ins like Flash are obsolete and blocked in modern browsers.
<video>, <audio>, and modern embeds. Avoid old <embed>/<object> unless you have a specific need.HTML YouTube
YouTube videos are embedded using an <iframe>. Use lazy loading for performance.
<iframe width="560" height="315" loading="lazy" style="border:0;border-radius:12px;max-width:100%" src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
HTML Web APIs
Web APIs are JavaScript features built into the browser (not HTML tags). HTML provides the UI; JS APIs add advanced capabilities.
HTML Geolocation
Geolocation is a browser API (JavaScript). It requires user permission and usually works only on HTTPS.
navigator.geolocation.getCurrentPosition( (pos) => console.log(pos.coords.latitude, pos.coords.longitude), (err) => console.error(err) );
HTML Drag & Drop
Drag and drop can be built using the HTML Drag and Drop API, but many apps use simpler pointer/touch interactions for better mobile support.
dragstart, dragover, and drop. For production: test well on touch devices.HTML Web Storage
Web Storage provides localStorage (persistent) and sessionStorage (tab session). Great for small preferences.
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');
HTML Web Workers
Web Workers run JavaScript in a background thread so heavy work doesn't freeze the UI.
postMessage.HTML SSE (Server-Sent Events)
SSE lets the server stream updates to the browser over a single HTTP connection. It's great for live notifications and dashboards.
const es = new EventSource('/events');
es.onmessage = (e) => console.log('Update:', e.data);
HTML Quiz
Test yourself after every 5–10 topics. Quizzes help you remember tags and rules faster.
HTML Exercises
Exercises are small tasks like “create a form with labels†or “build a table with a captionâ€. Do them with a timer.
srcset.HTML Challenges
Challenges are bigger than exercises: build a mini landing page, a resume page, or a product card layout using only semantic HTML.
HTML Syllabus
A solid HTML syllabus: structure → text → links/media → tables/lists → forms → semantics → SEO/a11y → performance.
HTML Study Plan
A simple plan: 30–45 minutes/day. Learn 1 topic, edit the example, and write your own version from memory.
| Week | Focus | Goal |
|---|---|---|
| 1 | Basics + text | Write a full page without copy/paste |
| 2 | Links/media + tables/lists | Build a small blog-like page |
| 3 | Forms + semantics | Build a signup/contact page |
| 4 | SEO + a11y + perf | Make it shareable + accessible |
HTML Interview Prep
Common interview areas: semantic HTML, forms + validation, accessibility (labels/aria), and performance basics.
<button> vs <a>).HTML Certificate
A certificate is useful only if you can build real pages. Focus on projects: semantic layout, forms, and responsive images.
HTML Summary
HTML gives structure. CSS gives style. JavaScript gives behavior. Learn semantic HTML first, then enhance with CSS/JS.
HTML Tag List
A quick list of common tags you will use daily. Use this as a memory refresh.
| Category | Tags |
|---|---|
| Text | <h1>…<h6>, <p>, <strong>, <em>, <small> |
| Links/media | <a>, <img>, <video>, <audio>, <iframe> |
| Layout | <header>, <nav>, <main>, <section>, <article>, <footer> |
| Forms | <form>, <label>, <input>, <textarea>, <select>, <button> |
HTML Browser Support
Most core HTML works everywhere. Newer elements/attributes may differ across browsers. Always test on at least Chrome + Firefox + Safari.
HTML Events
Events are JavaScript hooks for user actions like clicks and typing. HTML provides attributes (like onclick), but modern code uses addEventListener.
| Event | When it fires |
|---|---|
click | User clicks an element |
input | User changes an input value |
submit | Form is submitted |
keydown | A key is pressed |
load | Page/resources finished loading |
HTML Doctypes
The doctype tells the browser to use standards mode. For HTML5, it's always the same.
<!doctype html>
HTML Lang Codes
Set lang on the <html> element for accessibility and proper text handling. Use BCP47 language tags.
| Example | Meaning |
|---|---|
en | English |
en-US | English (United States) |
hi-IN | Hindi (India) |
lang improves screen reader pronunciation.HTTP Messages
HTTP messages are requests and responses between browser and server. HTML pages are delivered in HTTP responses.
HTTP Methods
Methods describe what you want to do. Forms mainly use GET and POST.
| Method | Typical use |
|---|---|
| GET | Fetch data / search (form values in URL) |
| POST | Create/submit data (form values in request body) |
| PUT | Replace an existing resource |
| PATCH | Update part of a resource |
| DELETE | Remove a resource |
PX to EM Converter
Convert pixels to em units: em = px / base. A common base is 16px.
Keyboard Shortcuts
Use <kbd> to display shortcuts in documentation and tutorials.
| Shortcut | Action |
|---|---|
| Ctrl + S | Save |
| Ctrl + F | Find |
| Ctrl + Z | Undo |
| Ctrl + Shift + Z | Redo |