Code Templates - 30 Examples

Styled Button

This code creates a simple button you can use on any page.

<button class="btn">Click Me</button>

HTML Card

A simple HTML card with title and paragraph.

<div class="card"><h3>Title</h3><p>Text</p></div>

Input Field

A basic input field for forms.

<input type="text" placeholder="Enter name">

Email Input

Input field for email addresses.

<input type="email" placeholder="Enter email">

Password Input

Input field for passwords.

<input type="password" placeholder="Enter password">

Textarea

A simple textarea for multi-line text input.

<textarea placeholder="Write something..."></textarea>

Link Button

A clickable link styled as a button.

<a href="#" class="btn">Visit</a>

Image

Display an image with HTML.

<img src="image.jpg" alt="Description">

Unordered List

A simple unordered list with items.

<ul><li>Item 1</li><li>Item 2</li></ul>

Ordered List

A simple ordered list with items.

<ol><li>Item 1</li><li>Item 2</li></ol>

Table

A basic HTML table structure.

<table><tr><th>Header</th></tr><tr><td>Data</td></tr></table>

Div Container

A simple container div.

<div class="container"></div>

Paragraph

A simple paragraph element.

<p>This is a paragraph.</p>

Header

A simple h1 header.

<h1>Main Title</h1>

Span Text

Inline text using span.

<span>Highlighted text</span>

Bold Text

Bold text example.

<b>Bold Text</b>

Italic Text

Italic text example.

<i>Italic Text</i>

Line Break

Insert a line break.

<br>

Horizontal Rule

Insert a horizontal line.

<hr>

Comment

HTML comment example.

<!-- This is a comment -->

Link

Hyperlink example.

<a href="https://example.com">Visit Example</a>

Image with Alt

Image with alt text.

<img src="image.png" alt="Description">

Meta Charset

HTML charset meta tag.

<meta charset="UTF-8">

Meta Viewport

Responsive design meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bold Paragraph

Paragraph with bold text inside.

<p>This is <b>bold</b> text.</p>

HTML Comment Block

Multi-line HTML comment.

<!--
This is a multi-line comment
-->

Simple Div with Class

A div with a class attribute.

<div class="container"></div>

Simple Footer

A simple footer element.

<footer>Footer Content</footer>

Simple Header

A simple header element.

<header>Header Content</header>

Simple Section

A simple section element.

<section>Section Content</section>