Recursive HTML Save file Light mode ☰

Sidebar

Document Structure

Example

<html>

Example of html:

html

Add

Root element of an HTML docum ...:

<head>

Example of head:

head

Add

Container for document metada ...:

<body>

Example of body:

body

Add

Document body ...:

Metadata

Example

<title>

Example of title:

title

Add

Document title ...:

<link>

Example of link:

Add

External resource link ...:

<meta>

Example of meta:

Add

Metadata about the document ...:

<style>

Example of style:

Add

Embedded CSS styles ...:

Scripting

Example

<script>

Example of script:

Add

Embedded script ...:

<noscript>

Example of element:

Add

Alternative content if script ...:

Sectioning

Example

<main>

Example of element:

main

Add

Main content of the document ...:

<nav>

Example of element:

Add

Section of navigation links ...:

<article>

Example of element:

article

Add

Independent, self-contained c ...:

<section>

Example of element:

section

Add

Section of content ...:

<aside>

Example of element:

Add

Sidebar content ...:

Headings

Example

<h1>

Example of heading:

h1

Add

Heading level 1 ...:

<h2>

Example of heading:

h2

Add

Heading level 2 ...:

<h3>

Example of heading:

h3

Add

Heading level 3 ...:

<h4>

Example of heading:

h4

Add

Heading level 4 ...:

<h5>

Example of heading:

h5

Add

Heading level 5 ...:

<h6>

Example of heading:

h6

Add

Heading level 6 ...:

Text Content

Example

<p>

Example of paragraph:

Add

Paragraph ...:

<hr>

Example of hr:

Add

Thematic break ...:

<pre>

Example of pre:

pre

Add

Preformatted text ...:

<blockquote>

Example of quote:

blockquote

Add

Block quotation ...:

<ol>

Example of olist:

Add

Ordered list ...:

<ul>

Example of ulist:

Add

Unordered list ...:

<li>

Example of li:

Add

List item ...:

<dl>

Example of dlist:

Add

Description list ...:

<dt>

Example of element:

Add

Term in a description list ...:

<dd>

Example of element:

Add

Description of a term in a de ...:

<figure>

Example of element:

figure

Add

Figure with optional caption ...:

<figcaption>

Example of element:

figcaption

Add

Caption for a figure ...:

<div>

Example of div:

div

Add

Generic block container ...:

<address>

Example of element:

address

Add

Contact information ...:

<ins>

Example of mod:

ins

Add

Inserted text ...:

<del>

Example of mod:

~~del~~

Add

Deleted text ...:

Inline Text Semantics

Example

<a>

Example of anchor:

Add

Hyperlink ...:

<em>

Example of element:

Add

Emphasized text ...:

<strong>

Example of element:

strong

Add

Important text ...:

<small>

Example of element:

small

Add

Smaller text ...:

<s>

Example of element:

Add

Strikethrough text ...:

<cite>

Example of element:

cite

Add

Cited title ...:

<q>

Example of quote:

Add

Inline quotation ...:

<dfn>

Example of element:

dfn

Add

Defining instance of a term ...:

<abbr>

Example of element:

abbr

Add

Abbreviation ...:

<data>

Example of data:

data

Add

Machine-readable data ...:

<time>

Example of time:

time

Add

Date and time ...:

<code>

Example of element:

code

Add

Computer code fragment ...:

<var>

Example of element:

var

Add

Variable ...:

<samp>

Example of element:

samp

Add

Sample output from a program ...:

<kbd>

Example of element:

kbd

Add

User input (typically keyboar ...:

<sub>

Example of element:

_sub

Add

Subscript text ...:

<sup>

Example of element:

^sup

Add

Superscript text ...:

<i>

Example of element:

Add

Text in an alternate voice or ...:

<b>

Example of element:

Add

Stylistically offset text (bo ...:

<u>

Example of element:

Add

Unarticulated annotation (und ...:

<mark>

Example of element:

mark

Add

Marked or highlighted text ...:

<bdi>

Example of element:

bdi

Add

Isolate text direction ...:

<bdo>

Example of element:

bdo

Add

Override text direction ...:

<span>

Example of span:

span

Add

Generic inline container ...:

<br>

Example of br:

Add

Line break ...:

<wbr>

Example of element:

Add

Optional line break opportuni ...:

<ruby>

Example of element:

ruby

Add

Ruby annotation (for East Asi ...:

<rt>

Example of element:

Add

Ruby text (annotation) ...:

<rp>

Example of element:

Add

Fallback parentheses for ruby ...:

Image and Multimedia

Example

<img>

Example of image:

Add

Image (use 'alt' attribute fo ...:

<picture>

Example of picture:

Add

Container for multiple image ...:

<iframe>

Example of iframe:

Add

Inline frame (embedded browsi ...:

<embed>

Example of embed:

Add

Embedded external content ...:

<object>

Example of object:

Add

Embedded object ...:

<video>

Example of video:

Add

Video content ...:

<audio>

Example of audio:

Add

Audio content ...:

<source>

Example of source:

Add

Media source for video or aud ...:

<track>

Example of track:

Add

Timed text tracks for media e ...:

<map>

Example of map:

map

Add

Image map ...:

<area>

Example of area:

Add

Clickable area within an imag ...:

<canvas>

Example of canvas:

Add

Canvas for dynamic graphics ...:

Graphics / Embedded

Example

<svg>

Example of unknown:

Add

SVG (Scalable Vector Graphics ...:

<math>

Example of unknown:

math

Add

Mathematical markup ...:

Table Content

Example

<table>

Example of table:

table

Add

Table container ...:

<caption>

Example of tablecaption:

caption

Add

Table caption ...:

<colgroup>

Example of tablecol:

colgroup

Add

Grouping of table columns ...:

<col>

Example of tablecol:

Add

Column within a colgroup ...:

<tbody>

Example of tablesection:

tbody

Add

Table body section ...:

<thead>

Example of tablesection:

thead

Add

Table header section ...:

<tfoot>

Example of tablesection:

tfoot

Add

Table footer section ...:

<tr>

Example of tablerow:

Add

Table row ...:

<td>

Example of tablecell:

Add

Table data cell ...:

<th>

Example of tablecell:

Add

Table header cell ...:

Forms

Example

<form>

Example of form:

Add

Form container ...:

<label>

Example of label:

label

Add

Caption for a form control ...:

<input>

Example of input:

Add

Form input control ...:

<button>

Example of button:

Add

Clickable button ...:

<select>

Example of select:

Add

Drop-down list control ...:

<datalist>

Example of datalist:

datalist

Add

List of predefined options fo ...:

<optgroup>

Example of optgroup:

optgroup

Add

Group of options within a sel ...:

<option>

Example of option:

Add

Option in a select element or ...:

<textarea>

Example of textarea:

Add

Multiline text input control ...:

<output>

Example of output:

output

Add

Result of a calculation or us ...:

<progress>

Example of progress:

progress

Add

Progress indicator ...:

<meter>

Example of meter:

meter

Add

Scalar measurement within a k ...:

<fieldset>

Example of fieldset:

fieldset

Add

Group of form controls ...:

<legend>

Example of legend:

legend

Add

Caption for a fieldset ...:

Interactive Elements

Example

<details>

Example of details:

details

Add

Disclosure widget for additio ...:

<summary>

Example of element:

summary

Add

Summary or caption for a deta ...:

<dialog>

Example of dialog:

Add

Dialog box or window ...:

Web Components

Example

<template>

Example of template:

Add

Container for client-side con ...:

<slot>

Example of slot:

slot

Add

Placeholder inside a web comp ...:

xxxxxxxxxx
 
<!Doctype html>
<html>
<head>
 <title>Hello, World!</title>
</head>
​
<body>
  <style>
    h2 {
      color:white;
      text-decoration:underline;
      text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.8);
    }
    span {
      display: inline-block;
      background:CornflowerBlue;
      padding:10px 8px;
      margin-bottom:10px;
      font-size:18px;
      border-radius: 10px;
    }
   </style>
​
   <h2>Recursive HTML</h2>
​
   <span>
     Write your code up here.
   </span>
   <br/>

X: 0 | Y: 0

Updating Shadow DOM with content: Hello, World!

Recursive HTML

Write your code up here.
And watch the result right there.

Recursive HTML

Element: