HTML Element Style Specimen

This page is a practical specimen of native HTML elements for stylesheet auditing. It includes most standard HTML5 elements and several deprecated ones that still reveal inherited styling. It is not a literal inventory of every historical or browser-specific tag ever shipped on the web, because that would turn into archaeology.

HTML Element Style Specimen

Use case: upload this file to a site, view it in the front end, and inspect what the theme or global CSS styles by default.

Text-level semantics

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

This is a paragraph with a link, emphasis, strong importance, small print, ~~struck text~~, a citation, an inline quote, definition text, HTML, data element, March 9, 2026, marked text, inline code, variable, H₂O, x², idiomatic text, stylistic offset, unarticulated annotation, plain span, مرحبا, This text is reversed., 漢 kan, ~~deleted text~~, inserted text, and wordbreakopportunity.

Ctrl + S saves. Sample terminal output. 42.

This is a blockquote. Themes often make interesting decisions here. Not always good ones.

Address block
123 Example Road
Somewhere, NY 10000

function hello() {
  console.log('Hello, world');
}

Grouping content and page structure

Section header

Regular section content.

Article header

Article content.

Generic div container

Horizontal rule below:

Line break here
and here.

Lists

Unordered list

Item one
Item two
- Nested item
Item three

Ordered list

First
Second
Third

Description list

Term A: Definition A
Term B: Definition B

Figures and media

Placeholder image — Figure caption under an image.

Tables

Sample table caption
Column A	Column B	Column C
Row 1	Cell B1	Cell C1
Row 2	Spanning cell
Table footer

Forms

Common inputs

Text

Password

URL

Telephone

Number

Range 35

Date

Month

Week

Time

Datetime-local

Color

File

Hidden input is present but invisible

Choices and textareas

Checkbox one
Checkbox two

Radio one
Radio two

Textarea
Textarea content

Select

Multiple select

Datalist

Buttons and indicators

Meter 35%

Progress 35%

Interactive elements

Details / summary example

Hidden until opened. A favorite target for theme CSS and occasional accidental icon crimes.

Embedded content

<h2>SVG and Canvas</h2> <p> <svg viewBox="0 0 240 120" role="img" aria-label="Simple SVG graphic"> <title>SVG title</title> <desc>Example inline SVG with shapes and text.</desc> <rect x="10" y="10" width="220" height="100" rx="12"></rect> <circle cx="60" cy="60" r="24"></circle> <line x1="100" y1="90" x2="200" y2="30" stroke="currentColor" stroke-width="4"></line> <text x="110" y="80">Inline SVG text</text> </svg></p> <p> <canvas id="demoCanvas" width="320" height="120">Canvas fallback text.</canvas><br /> </section> <section id="legacy"> <h2>Deprecated and obsolete elements</h2> <p>These are included only because legacy CSS sometimes still targets them.</p> <div class="demo-box"> <p><tt>Teletype text</tt></p> <p><big>Big text</big> and <small>small text</small></p> <p><strike>Strike element</strike></p> <p> <center>Centered text using obsolete <code>center</code></center><br /> <font color="red" size="4">Font element example</font></p> <p><acronym title="Cascading Style Sheets">CSS</acronym></p> </p></div> </section> <p> </main></p> <footer> <div class="wrap"> <p><a href="#top">Back to top</a></p> <p>Generated as a broad HTML style specimen for theme inspection.</p> </p></div> </footer> <p> <script> const canvas = document.getElementById('demoCanvas'); if (canvas && canvas.getContext) { const ctx = canvas.getContext('2d'); ctx.fillStyle = '#e9eef5'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#333'; ctx.font = '18px sans-serif'; ctx.fillText('Canvas element example', 20, 35); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(20, 90); ctx.lineTo(300, 90); ctx.stroke(); ctx.beginPath(); ctx.arc(70, 70, 20, 0, Math.PI * 2); ctx.stroke(); } </script></p> </div> </div> </main> <footer class="wp-block-template-part"> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)"> <div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow"> <div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-e5edad21 wp-block-group-is-layout-flex"> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"><h2 class="wp-block-site-title"><a href="https://trh.vctrs.io" target="_self" rel="home">trh.vctrs.io</a></h2> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div style="height:var(--wp--preset--spacing--40);width:0px" aria-hidden="true" class="wp-block-spacer"></div> </div> </div> <div class="wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-570722b2 wp-block-group-is-layout-flex"> <nav class="is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-fe9cc265 wp-block-navigation-is-layout-flex"><ul class="wp-block-navigation__container is-vertical wp-block-navigation"><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Blog</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">About</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">FAQs</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Authors</span></a></li></ul></nav> <nav class="is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-fe9cc265 wp-block-navigation-is-layout-flex"><ul class="wp-block-navigation__container is-vertical wp-block-navigation"><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Events</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Shop</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Patterns</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Themes</span></a></li></ul></nav> </div> </div> <div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-91e87306 wp-block-group-is-layout-flex"> <p class="has-small-font-size">Twenty Twenty-Five</p> <p class="has-small-font-size"> Designed with <a href="https://wordpress.org" rel="nofollow">WordPress</a> </p> </div> </div> </div> </footer> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/twentytwentyfive/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="module" src="https://trh.vctrs.io/wp-includes/js/dist/script-modules/block-library/navigation/view.min.js?ver=b0f909c3ec791c383210" id="@wordpress/block-library/navigation/view-js-module" fetchpriority="low" data-wp-router-options="{"loadOnClientNavigation":true}"></script> <script id="wp-block-template-skip-link-js-after"> ( function() { var skipLinkTarget = document.querySelector( 'main' ), sibling, skipLinkTargetID, skipLink; // Early exit if a skip-link target can't be located. if ( ! skipLinkTarget ) { return; } /* * Get the site wrapper. * The skip-link will be injected in the beginning of it. */ sibling = document.querySelector( '.wp-site-blocks' ); // Early exit if the root element was not found. if ( ! sibling ) { return; } // Get the skip-link target's ID, and generate one if it doesn't exist. skipLinkTargetID = skipLinkTarget.id; if ( ! skipLinkTargetID ) { skipLinkTargetID = 'wp--skip-link--target'; skipLinkTarget.id = skipLinkTargetID; } // Create the skip link. skipLink = document.createElement( 'a' ); skipLink.classList.add( 'skip-link', 'screen-reader-text' ); skipLink.id = 'wp-skip-link'; skipLink.href = '#' + skipLinkTargetID; skipLink.innerText = 'Skip to content'; // Inject the skip link. sibling.parentElement.insertBefore( skipLink, sibling ); }() ); //# sourceURL=wp-block-template-skip-link-js-after </script> <script id="hostinger-reach-subscription-block-view-js-extra"> var hostinger_reach_subscription_block_data = {"endpoint":"https://trh.vctrs.io/wp-json/hostinger-reach/v1/contact","nonce":"cf2fa60e0f","translations":{"thanks":"Thanks for subscribing.","error":"Something went wrong. Please try again."}}; //# sourceURL=hostinger-reach-subscription-block-view-js-extra </script> <script src="https://trh.vctrs.io/wp-content/plugins/hostinger-reach/frontend/dist/blocks/subscription-view.js?ver=1776271173" id="hostinger-reach-subscription-block-view-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://trh.vctrs.io/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}} </script> <script type="module"> /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://trh.vctrs.io/wp-includes/js/wp-emoji-loader.min.js </script> </body> </html>