HTML Visual Testbench
Here is an HTML file that includes a wide range of visually-oriented tags, ready for you to test with any .css file. You can save and open this ready-to-run HTML document in your browser to see how CSS enhances visual presentation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=yes">
<title>HTML Visual Testbench · CSS Ready</title>
<!--
🔧 HOW TO USE:
Replace the href below with your own .css file to see instant changes.
Example: <link rel="stylesheet" href="mystyle.css">
Currently uses NO external CSS – pure semantic HTML ready for styling.
-->
<link rel="stylesheet" href="test.css">
</head>
<body>
<!-- ===== MAIN CONTAINER (commonly styled) ===== -->
<div class="page-wrapper" align="justify">
<!-- ===== HEADER REGION ===== -->
<header class="main-header">
<h1 class="site-title">📋 HTML Visual Elements</h1>
<p class="subtitle">A single file to test <strong>any CSS</strong> - all common tags included.</p>
<nav class="top-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<hr class="separator">
<!-- ===== TYPOGRAPHY & TEXT ===== -->
<section class="text-section">
<h2>1. Headings and Text</h2>
<br>
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
<p>This is a <strong>paragraph</strong> with <b>bold</b>, <i>italic</i>, <em>emphasized</em>, and <u>underlined</u> text.
Here is <mark>highlighted text</mark> and <small>small print</small>. You can also use <del>deleted</del> and <ins>inserted</ins> text.
<br>Line break example. <span class="highlight">A span element for inline styling.</span></p>
<blockquote cite="https://example.com">
<p>"This is a blockquote. It can be styled with CSS to stand out as a quotation."</p>
<footer> - Someone Famous</footer>
</blockquote>
<pre>
// Preformatted text (code block)
function greet() {
console.log("Hello, CSS!");
}
</pre>
<p><code>Inline code: const x = 42;</code> and <kbd>Ctrl + S</kbd> keyboard input.</p>
<address>
Written by <a href="mailto:test@example.com">John Doe</a>.<br>
Visit us at: 123 CSS Lane, Web City
</address>
</section>
<hr class="separator">
<!-- ===== LISTS (ordered, unordered, description) ===== -->
<section class="list-section">
<h2>2. Lists</h2>
<div style="display: flex; flex-wrap: wrap; gap: 2rem;">
<div>
<h4>Unordered List</h4>
<ul>
<li>Item one</li>
<li>Item two
<ul>
<li>Nested item</li>
<li>Another nested</li>
</ul>
</li>
<li>Item three</li>
</ul>
</div>
<div>
<h4>Ordered List</h4>
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
</div>
<div>
<h4>Description List</h4>
<dl>
<dt>HTML</dt>
<dd>Structure of the web</dd>
<dt>CSS</dt>
<dd>Visual presentation</dd>
</dl>
</div>
</div>
</section>
<hr class="separator">
<!-- ===== TABLE (visual structure) ===== -->
<section class="table-section">
<h2>3. Table</h2>
<table>
<caption>Monthly Savings Report</caption>
<thead>
<tr>
<th>Month</th>
<th>Income</th>
<th>Expenses</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$3,200</td>
<td>$2,100</td>
<td>$1,100</td>
</tr>
<tr>
<td>February</td>
<td>$3,500</td>
<td>$2,300</td>
<td>$1,200</td>
</tr>
<tr>
<td>March</td>
<td>$3,100</td>
<td>$2,400</td>
<td>$700</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Total</strong></td>
<td><strong>$9,800</strong></td>
<td><strong>$6,800</strong></td>
<td><strong>$3,000</strong></td>
</tr>
</tfoot>
</table>
</section>
<hr class="separator">
<!-- ===== IMAGE & FIGURE ===== -->
<section class="media-section">
<h2>4. Image & Figure</h2>
<figure>
<img src="https://placehold.co/400x200/0057b3/white?text=Sample+Image"
alt="Placeholder image for CSS testing"
width="400" height="200">
<figcaption>Fig.1 - A placeholder image with caption.</figcaption>
</figure>
</section>
<hr class="separator">
<!-- ===== FORM ELEMENTS (all commonly styled) ===== -->
<section class="form-section">
<h2>5. Form Elements</h2>
<form action="#" method="post">
<!-- Text input -->
<p>
<label for="text1">Text Input:</label>
<input type="text" id="text1" name="text1" placeholder="Enter your name" size="25">
</p>
<!-- Number input -->
<p>
<label for="num1">Number Input:</label>
<input type="number" id="num1" name="num1" placeholder="Age" min="1" max="120">
</p>
<!-- Email input -->
<p>
<label for="email1">Email:</label>
<input type="email" id="email1" name="email1" placeholder="user@example.com">
</p>
<!-- Password -->
<p>
<label for="pass1">Password:</label>
<input type="password" id="pass1" name="pass1">
</p>
<!-- Search -->
<p>
<label for="search1">Search:</label>
<input type="search" id="search1" name="search1">
</p>
<!-- Date -->
<p>
<label for="date1">Date:</label>
<input type="date" id="date1" name="date1">
</p>
<!-- File upload -->
<p>
<label for="file1">Choose file:</label>
<input type="file" id="file1" name="file1">
</p>
<!-- Checkbox -->
<p>
<input type="checkbox" id="check1" name="check1" value="agree">
<label for="check1">I agree to terms</label>
</p>
<!-- Radio buttons -->
<p>
<input type="radio" id="radio1" name="radioGroup" value="option1" checked>
<label for="radio1">Option 1</label>
<input type="radio" id="radio2" name="radioGroup" value="option2">
<label for="radio2">Option 2</label>
</p>
<!-- Select dropdown -->
<p>
<label for="citySelect">City:</label>
<select id="citySelect" name="city">
<option value="london">London</option>
<option value="newyork">New York</option>
<option value="losangeles" selected>Los Angeles</option>
<option value="paris">Paris</option>
<option value="beijing">Beijing</option>
</select>
</p>
<!-- Multiple select -->
<p>
<label for="multiCity">Multiple Cities:</label>
<select id="multiCity" name="multiCity" multiple size="4">
<option value="dhaka" selected>Dhaka</option>
<option value="barisal">Barisal</option>
<option value="khulna">Khulna</option>
<option value="chittagong">Chittagong</option>
</select>
</p>
<!-- Textarea -->
<p>
<label for="message1">Message:</label>
<textarea id="message1" name="message" rows="5" cols="25" placeholder="Write your message..."></textarea>
</p>
<!-- Fieldset & Legend -->
<fieldset>
<legend>Group Box (fieldset + legend)</legend>
<p>
<label for="insideField">Input inside fieldset:</label>
<input type="text" id="insideField" name="insideField" placeholder="Example">
</p>
</fieldset>
<!-- Buttons -->
<p>
<button type="button" name="btnNormal">Normal Button</button>
<input type="button" value="Input Button" name="btnInput">
<button type="submit" name="btnSubmit">Submit</button>
<button type="reset" name="btnReset">Reset</button>
</p>
<!-- Disabled button & input -->
<p>
<button type="button" disabled>Disabled Button</button>
<input type="text" placeholder="Disabled input" disabled>
</p>
<!-- Datalist (suggestion input) -->
<p>
<label for="browserChoice">Choose browser:</label>
<input list="browsers" id="browserChoice" name="browserChoice" placeholder="Type or select">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
</p>
<!-- Range slider -->
<p>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="70">
</p>
<!-- Color picker -->
<p>
<label for="colorPick">Favorite color:</label>
<input type="color" id="colorPick" name="colorPick" value="#691983">
</p>
<!-- Progress & Meter -->
<p>
<label for="fileProgress">File progress:</label>
<progress id="fileProgress" value="32" max="100">32%</progress>
</p>
<p>
<label for="diskUsage">Disk usage:</label>
<meter id="diskUsage" value="0.6" min="0" max="1">60%</meter>
</p>
</form>
</section>
<hr class="separator">
<!-- ===== DETAILS & SUMMARY (interactive) ===== -->
<section class="interactive-section">
<h2>6. Details / Summary</h2>
<details>
<summary>Click to expand more info</summary>
<p>This hidden content can be revealed. CSS can style the marker and the open state.</p>
</details>
<details open>
<summary>Already open by default</summary>
<p>Another details block. Use <code>details[open]</code> selector in CSS.</p>
</details>
</section>
<hr class="separator">
<!-- ===== DIALOG (modal trigger) ===== -->
<section class="dialog-section">
<h2>7. Dialog (modal)</h2>
<button type="button" id="openDialog">Open Dialog Box</button>
<dialog id="demoDialog">
<p>Hello! This is a <strong><dialog></strong> element.</p>
<p>It can be styled with CSS (backdrop, border, etc.).</p>
<form method="dialog">
<button type="submit" value="close">Close</button>
</form>
</dialog>
</section>
<hr class="separator">
<!-- ===== INLINE TEXT SEMANTICS ===== -->
<section class="inline-section">
<h2>8. Inline Semantic Tags</h2>
<p>
<abbr title="Cascading Style Sheets">CSS</abbr> is used with
<cite>HTML5 specifications</cite>.
The term <dfn>box model</dfn> defines layout.
Time: <time datetime="2025-03-15">March 15, 2025</time>.
Subscript H<sub>2</sub>O and superscript E=mc<sup>2</sup>.
<s>Strikethrough text</s> and <var>variable</var>.
</p>
</section>
<hr class="separator">
<!-- ===== ARTICLE / ASIDE (structural) ===== -->
<section class="structural-section">
<h2>9. Article & Aside</h2>
<article>
<h3>Article Title</h3>
<p>This is an independent article block. It could contain a blog post, comment, or widget.</p>
</article>
<aside>
<h4>Side note (aside)</h4>
<p>This is an aside – typically for callouts or supplementary info.</p>
</aside>
</section>
<br>
<hr class="separator">
<br>
<!-- ===== FOOTER ===== -->
<footer class="main-footer">
<p>CSS Visual Testbench ·
<a href="#">Privacy</a> ·
<a href="#">Terms</a>
</p>
<p><small>All common HTML tags ready for your CSS file.</small></p>
</footer>
</div><!-- end page-wrapper -->
<!-- Simple script to control the dialog element (no CSS needed) -->
<script>
(function() {
const openBtn = document.getElementById('openDialog');
const dialog = document.getElementById('demoDialog');
if (openBtn && dialog) {
openBtn.addEventListener('click', function() {
dialog.showModal();
});
// Close is handled by form method="dialog" inside
}
})();
</script>
</body>
</html>
This HTML file includes a comprehensive collection of visually-oriented tags:
- Headings (h1–h6)
- Paragraphs, bold, italic, underline, highlight, small, deleted, inserted text
- Blockquote, pre, code, kbd, address
- Lists (ul, ol, dl with dt/dd)
- Table (thead, tbody, tfoot, caption)
- Image & figure with figcaption
- All common form elements (text, number, email, password, search, date, file, checkbox, radio, select, textarea, fieldset/legend, datalist, range, color, progress, meter)
- Buttons (normal, disabled, submit, reset)
- Details/Summary (expandable content)
- Dialog (modal popup)
- Inline semantics (abbr, cite, dfn, time, sub, sup, var, s)
- Article & Aside (structural sections)
All of these are pure HTML ready for CSS styling. When you link your .css file, you'll immediately see how each element responds to your styles.
