HTML Code Generator

What this HTML code generator does

Most snippets you copy from the web are missing the parts that make a control usable: the <label>, the name the server needs, the autocomplete token password managers look for, or the rel that keeps a new tab safe. This tool writes those for you. Choose a group above, pick an element, change its attributes, and the markup and a live preview update as you type. Text you enter is escaped, so a stray < or & can never break the output.

Features

• 36 elements in three tabs: every input type, textarea, button and a form builder; 12 text formatting tags; video, details, dialog, meter, progress and links.
• Attribute controls for each element, including validation (required, min, max, pattern, maxlength), autocomplete tokens and state (disabled, checked, open).
• Accessible defaults: label/for pairs, fieldset and legend for groups, help text wired with aria-describedby, aria-labelledby on dialogs and a required alt on image buttons.
• Warnings when a value would not work, such as a date in the wrong format, a meter value outside its range or autoplay without muted.
• Live preview in a sandboxed frame, and Copy HTML in one click.
• Shareable state: the address bar keeps ?mode= for the element you are on, so a link opens the same generator.

HTML input generator

The Form inputs tab covers every <input type> that has its own behaviour. The type changes the keyboard shown on phones, the built-in validation and which attributes apply.

<textarea> is the multi-line control. It has no value attribute: its starting text sits between the tags, and a line break straight after the opening tag is dropped by the parser. Size it with rows and cols or CSS, cap it with maxlength (and enforce the same limit on the server), and add wrap="hard" with cols only if the submitted text must keep the visible line breaks.

HTML button generator

A <button> is focusable, works with Enter and Space and is announced as a button, none of which a styled <div onclick> gets without tabindex, role and key handling. Inside a form a button with no type submits, so the generator defaults to type="button". Set aria-label for icon-only buttons, and use Toggle to add aria-pressed for on/off buttons. A disabled button leaves the tab order and stops firing clicks, so for a short loading state aria-busy="true" plus a visual style is often the better choice.

HTML form generator

The Form builder turns one line per field into a complete, labelled form. Write Label | type | required, for example Email | email | required. Use select: A, B, C or radio: A, B as the type for choices, and textarea or checkbox for those controls. The builder adds matching autocomplete tokens for names, email, phone and URLs, switches to multipart/form-data when there is a file field, and ends with a submit button.

<form action="/contact" method="post">
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" autocomplete="email" required>
  </div>
  <button type="submit">Send message</button>
</form>

HTML link generator

The link generator writes an <a> for a web address, an email (mailto: with an optional subject), a phone number (tel:, which opens the dialer on phones) or a section of the same page (#id). Opening in a new tab adds target="_blank" with rel="noopener noreferrer", which blocks reverse tabnabbing and hides the Referer. You can add nofollow, sponsored or ugc for paid and user-generated links, and download for files. Write link text that makes sense on its own: screen reader users often jump through a list of links, where “click here” says nothing.

HTML text formatting tags

The Text formatting tab wraps your text in the right element and escapes it. Tick Wrap each line separately to tag a list of lines at once.

<bdo> only changes the visual order: the characters stay in logical order in the source, so screen readers and copy and paste still get the original text. CSS direction: rtl changes layout and alignment but still lets the browser reorder mixed-script runs; <bdo> suppresses that reordering.

Media and interactive elements

• Video: <source> elements with the right MIME type, an optional WebM fallback, a poster, a captions <track> and fallback text. Browsers only autoplay muted video, so turning on autoplay also adds muted and playsinline. MP4 (H.264) plays everywhere.
• Details and summary: a disclosure widget that opens and closes without JavaScript. Give several <details> the same name to make an exclusive accordion.
• Dialog: a modal opened with showModal() gets a backdrop, focus trapping and Escape to close. The generated dialog has aria-labelledby pointing at its heading and a <form method="dialog"> that closes it and reports which button was pressed in dialog.returnValue.
• Meter shows a measurement in a known range, such as disk usage or a score, and colours itself using low, high and optimum. Progress shows how far a task has got; leave out value for an indeterminate, animated bar.

Need an embed or a data table? Use the HTML iframe generator for YouTube, Vimeo and Google Maps embeds, and the HTML table generator for tables built from a grid or pasted CSV.

Frequently asked questions