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>
<section>
<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>
<code>
Experience Design Made Simple for living design systems
<pre>
Experience Design Made Simple for living design systems
<ul>
<li>
Item 1- Item 2
- Item 3
<ol>
<li>
Item 1- Item 2
- Item 3
<button>
<img width="50%">
<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 data |