Back to Index

HTML Element Inspector

This is a library of core HTML elements influenced only by the CSS stylesheets in this page. Use the dropdown at the top of this page to help you identify these 'opinionated' styles from different frameworks such as Evo, Bootstrap, and Foundation. There's even an option for 'none' so you can see what your browser defaults to. Note that no additional padding or margin spaces have been applied, so you may see the HTML elements colide into one another. This is so we don't mask any opinionated margins or padding that a particular framework applies automatically.

How is this useful? Did you know that CSS frameworks are 'opinionated' and will enforce design styling upon basic HTML element tags. Even CSS 'resets' such as Normalize are opinionated for some colors and sizes. As you perform design QA on your website, you may wonder why your text is gray instead of black. Could be because of Bootstrap's styles? Check out the Bootstrap elements page from the dropdown above, and you'll notice that most of the text is a subtle gray color. Problem identified!

<h1>

Experience Design Made Simple for living design systems

<h2>

Experience Design Made Simple for living design systems

<h3>

Experience Design Made Simple for living design systems

<h4>

Experience Design Made Simple for living design systems

<h5>
Experience Design Made Simple for living design systems
<h6>
Experience Design Made Simple for living design systems
<a> Link text: Pack my box with five dozen liquor jugs.
<a href="#"> Pack my box with five dozen liquor jugs.
<a:link> Pack my box with five dozen liquor jugs.
<a:visited> Pack my box with five dozen liquor jugs.
<a:hover> Pack my box with five dozen liquor jugs.
<a:active> Pack my box with five dozen liquor jugs.
<a:focus> Pack my box with five dozen liquor jugs.
This sentence has no html tag and no css class, other than the <body> and <main> tags.
<div>
This sentence has no css class.
<section>
This sentence has no css class.
<p>

Experience Design Made Simple for living design systems

<q> Experience Design Made Simple for living design systems
<blockquote>
Experience Design Made Simple for living design systems
<mark> Experience Design Made Simple for living design systems
<figcaption>
Experience Design Made Simple for living design systems
<code>
Experience Design Made Simple for living design systems
<pre> 
Experience Design Made Simple for living design systems
<ul>
<ol>
  1. <li>Item 1
  2. Item 2
  3. Item 3
<button>
<img width="50%">
unsplash girl
<hr />
<table>
First Last Age
Kevin Stark 44
Emily Smith 34

Simple table with header

First name Last name
John Doe
Jane Doe

Table with thead, tfoot, and tbody

Header content 1 Header content 2
Footer content 1 Footer content 2
Body content 1 Body content 2

Table with colgroup

Countries Capitals Population Language
USA Washington D.C. 309 million English
Sweden Stockholm 9 million Swedish

Table with colgroup and col

Lime Lemon Orange
Green Yellow Orange

Simple table with caption

Awesome caption
Awesome data
Sample form elements <input type="text" id="text" placeholder="placeholder text" />
<input type="password" name="password" placeholder="password" />
<type="radio" id="radio1" name="radio" value="value" checked /> <label for="radio1">
<input type="checkbox" id="checkbox1" checked /> <label for="checkbox1">
<select id="select">
<select id="select" multiple>
<input type="number" placeholder="number" />
<input type="file" id="file" />
<textarea name="message" placeholder="enter a message" rows="3" cols="auto" />
<input type="date" id="date" placeholder="date">
<input type="range" name="points" min="0" max="10" />
<input type="color" name="yourcolor" />
<input type="button" onclick="alert('Hello World!')" value="submit" />