Document Structure
| Name |
Syntax |
Description |
|
|
<!DOCTYPE html>
HTML5
|
<!DOCTYPE html>
|
Declares the document type and HTML version. Must be the very first line in every HTML document.
|
Details →
|
|
<html>
|
<html lang="en"> ... </html>
|
The root element of an HTML page. All other elements are descendants of this element.
|
Details →
|
|
<head>
|
<head> ... </head>
|
Contains machine-readable metadata about the document such as title, scripts, and stylesheets.
|
Details →
|
|
<body>
|
<body> ... </body>
|
Represents the content of an HTML document. There can be only one <body> element in a document.
|
Details →
|
|
<div>
|
<div class="container"> ... </div>
|
Generic block-level container with no semantic meaning. Used for grouping and styling content.
|
Details →
|
|
<span>
|
<span class="highlight"> ... </span>
|
Generic inline container with no semantic meaning. Used for styling or scripting a part of text.
|
Details →
|
Text Content
| Name |
Syntax |
Description |
|
|
<h1> - <h6>
|
<h1>Heading</h1>
|
Six levels of section headings. <h1> is the highest (most important) and <h6> is the lowest.
|
Details →
|
|
<p>
|
<p> ... </p>
|
Represents a paragraph of text. Browsers automatically add some space before and after each element.
|
Details →
|
|
<strong>
|
<strong> ... </strong>
|
Indicates strong importance, seriousness, or urgency. Browsers typically render this in bold.
|
Details →
|
|
<em>
|
<em> ... </em>
|
Marks text that has stress emphasis. Browsers typically render this in italic.
|
Details →
|
|
<br>
|
<br>
|
Produces a line break in text. Useful in poems or addresses where line divisions are meaningful.
|
Details →
|
|
<hr>
|
<hr>
|
Represents a thematic break between paragraph-level elements. Rendered as a horizontal rule.
|
Details →
|
|
<pre>
|
<pre> ... </pre>
|
Represents preformatted text. Whitespace inside is displayed as written, using a monospace font.
|
Details →
|
|
<code>
|
<code> ... </code>
|
Displays its content in a monospace font, indicating a short fragment of computer code.
|
Details →
|
|
<blockquote>
|
<blockquote cite="url"> ... </blockquote>
|
Indicates that the enclosed text is an extended quotation from another source.
|
Details →
|
|
<abbr>
|
<abbr title="full text">abbrev</abbr>
|
Represents an abbreviation or acronym. The optional title attribute provides the full expansion.
|
Details →
|
|
<mark>
HTML5
|
<mark> ... </mark>
|
Represents text marked or highlighted for reference purposes, like a highlighter pen.
|
Details →
|
|
<small>
|
<small> ... </small>
|
Represents side-comments and small print, like copyright and legal text.
|
Details →
|
|
<sub> & <sup>
|
<sub>subscript</sub> <sup>superscript</sup>
|
<sub> renders text as subscript; <sup> renders text as superscript. Used in math and chemistry.
|
Details →
|
|
<del> & <ins>
|
<del>deleted</del> <ins>inserted</ins>
|
<del> represents deleted text (strikethrough); <ins> represents inserted text (underline).
|
Details →
|
|
<time>
HTML5
|
<time datetime="2024-01-15">January 15</time>
|
Represents a specific time or date. The datetime attribute encodes the value in a machine-readable format.
|
Details →
|
Links
| Name |
Syntax |
Description |
|
|
<a>
|
<a href="url" target="_blank">link text</a>
|
Creates a hyperlink to web pages, files, email addresses, or any other URL.
|
Details →
|
Lists
| Name |
Syntax |
Description |
|
|
<ul>
|
<ul>\n <li>item</li>\n</ul>
|
Represents an unordered list of items, typically rendered with bullet points.
|
Details →
|
|
<ol>
|
<ol type="1" start="1">\n <li>item</li>\n</ol>
|
Represents an ordered list of items, typically rendered with numbers or letters.
|
Details →
|
|
<li>
|
<li>list item</li>
|
Represents an item in a list. Must be a child of <ul>, <ol>, or <menu>.
|
Details →
|
|
<dl>
|
<dl>\n <dt>term</dt>\n <dd>description</dd>\n</d...
|
Represents a description list. Used for glossaries, metadata, or key-value pairs.
|
Details →
|
Tables
| Name |
Syntax |
Description |
|
|
<table>
|
<table> ... </table>
|
Represents tabular data — information presented in a two-dimensional table with rows and columns.
|
Details →
|
|
<thead> / <tbody> / <tfoot>
|
<thead> <tr><th>...</th></tr> </thead>
|
Semantic groups for table rows: header, body, and footer sections.
|
Details →
|
|
<tr>
|
<tr> ... </tr>
|
Defines a row of cells in a table.
|
Details →
|
|
<th>
|
<th scope="col">Header</th>
|
Defines a header cell in a table. Bold and centered by default. Use scope for accessibility.
|
Details →
|
|
<td>
|
<td colspan="2" rowspan="2">Data</td>
|
Defines a data cell in a table. Supports colspan and rowspan for spanning multiple cells.
|
Details →
|
Forms
| Name |
Syntax |
Description |
|
|
<form>
|
<form action="/submit" method="post"> ... </form>
|
Represents a document section containing interactive controls for submitting information.
|
Details →
|
|
<input>
|
<input type="text" name="name" placeholder="Enter...
|
Creates interactive controls in forms. Behavior changes drastically based on the type attribute.
|
Details →
|
|
<textarea>
|
<textarea name="msg" rows="4" cols="50">Default te...
|
A multi-line text input control. Rows and cols set the visible dimensions.
|
Details →
|
|
<select>
|
<select name="choice">\n <option value="a">Option...
|
Represents a control providing a menu of options.
|
Details →
|
|
<button>
|
<button type="submit|reset|button">Click me</butto...
|
Represents a clickable button. Can contain HTML unlike <input type="button">.
|
Details →
|
|
<label>
|
<label for="inputId">Label text</label>
|
Represents a caption for an item in the user interface. Clicking a label focuses its associated input.
|
Details →
|
|
<fieldset>
|
<fieldset>\n <legend>Group Title</legend>\n ...\...
|
Groups related elements within a form. The <legend> element provides a caption for the group.
|
Details →
|
|
<datalist>
HTML5
|
<input list="listId">\n<datalist id="listId"><opti...
|
Provides a list of predefined options for an <input> element as an autocomplete dropdown.
|
Details →
|
Media & Embeds
| Name |
Syntax |
Description |
|
|
<img>
|
<img src="image.jpg" alt="Description" width="300"...
|
Embeds an image into the page. The alt attribute is required for accessibility.
|
Details →
|
|
<video>
HTML5
|
<video src="video.mp4" controls autoplay muted loo...
|
Embeds a media player for video playback. Supports multiple source formats.
|
Details →
|
|
<audio>
HTML5
|
<audio src="audio.mp3" controls>
|
Embeds sound content in documents. Supports multiple source formats.
|
Details →
|
|
<iframe>
|
<iframe src="url" width="600" height="400" title="...
|
Embeds another HTML page within the current page. Commonly used for maps, videos, and external content.
|
Details →
|
|
<canvas>
HTML5
|
<canvas id="myCanvas" width="500" height="300"></c...
|
A container for graphics drawn via JavaScript. Used for games, charts, image manipulation.
|
Details →
|
|
<figure> & <figcaption>
HTML5
|
<figure>\n <img src="img.jpg" alt="...">\n <figc...
|
<figure> wraps self-contained content like images or diagrams; <figcaption> provides a caption.
|
Details →
|
|
<picture>
HTML5
|
<picture>\n <source media="..." srcset="...">\n...
|
Provides multiple image sources for different screen sizes or formats (e.g., WebP with JPEG fallback).
|
Details →
|
Semantic HTML5
| Name |
Syntax |
Description |
|
|
<header>
HTML5
|
<header> ... </header>
|
Represents introductory content or a group of navigational aids. Can be used multiple times per page.
|
Details →
|
|
<nav>
HTML5
|
<nav> ... </nav>
|
Represents a section of a page whose purpose is to provide navigation links.
|
Details →
|
|
<main>
HTML5
|
<main> ... </main>
|
Represents the dominant content of the <body>. There must be only one <main> per page.
|
Details →
|
|
<article>
HTML5
|
<article> ... </article>
|
Represents self-contained content that could stand alone, such as a blog post or news article.
|
Details →
|
|
<section>
HTML5
|
<section> ... </section>
|
Represents a standalone section of content. Should typically have a heading.
|
Details →
|
|
<aside>
HTML5
|
<aside> ... </aside>
|
Represents content tangentially related to the main content, such as a sidebar.
|
Details →
|
|
<footer>
HTML5
|
<footer> ... </footer>
|
Represents a footer for its nearest ancestor, containing information like author, copyright, or links.
|
Details →
|
|
<details> & <summary>
HTML5
|
<details>\n <summary>Click to expand</summary>\n...
|
Creates a native accordion/disclosure widget. <summary> is the visible heading; content expands on click.
|
Details →
|
|
<dialog>
HTML5
|
<dialog id="modal"> ... </dialog>
|
Represents a dialog box or modal window. Can be opened with the open attribute or showModal() method.
|
Details →
|
Metadata & Head
| Name |
Syntax |
Description |
|
|
<meta>
|
<meta name="description" content="...">
|
Represents metadata that cannot be represented by other elements. Used for charset, viewport, SEO, and more.
|
Details →
|
|
<title>
|
<title>Page Title</title>
|
Defines the document title shown in browser tabs, bookmarks, and search engine results.
|
Details →
|
|
<link>
|
<link rel="stylesheet" href="style.css">
|
Specifies relationships between the current document and an external resource. Most used for CSS.
|
Details →
|
|
<style>
|
<style> CSS rules here </style>
|
Contains CSS style rules that apply to the document. Usually placed in <head>.
|
Details →
|
|
<base>
|
<base href="https://example.com/" target="_blank">
|
Specifies the base URL and/or target for all relative URLs in a document.
|
Details →
|
Scripting
| Name |
Syntax |
Description |
|
|
<script>
|
<script src="app.js" defer></script>
|
Embeds or references JavaScript code. Use defer or async to control loading behavior.
|
Details →
|
|
<noscript>
|
<noscript> ... </noscript>
|
Defines alternate content to be displayed when a browser does not support JavaScript.
|
Details →
|
|
<template>
HTML5
|
<template id="myTemplate"> ... </template>
|
Holds client-side content not rendered at load time, but instantiated via JavaScript.
|
Details →
|
|
data-* attributes
HTML5
|
<div data-user-id="42" data-role="admin">
|
Custom data attributes that store extra information on HTML elements. Accessible via JS dataset property.
|
Details →
|
|
<progress>
HTML5
|
<progress value="70" max="100">70%</progress>
|
Displays an indicator showing the completion progress of a task.
|
Details →
|
|
<meter>
HTML5
|
<meter value="0.7" min="0" max="1" low="0.3" high=...
|
Represents a scalar measurement within a known range, like disk usage or a rating.
|
Details →
|
No results found. Try a different search term.