initcss v0.5

Left side uses Emmet abbreviations to represent what you actually see on the right side.
Tags always have its own textual representation within.

Legend:

	* - almost stylable; possible unstylable/unhideable controls or slightly unexpected behaviour.
	* - limited stylization; limited number of changable properties due to hard-coded controls.
	* - almost unstylable, due to hard-coded internals or security reasons.
	(nothing) - fully stylable.
	<> - textual HTML5 valid representation of tag within an attribute.
	_ - the duplicating name of the corresponding atrribute.
	.. - the duplicating value of previous atrribute.

Examples:


	input[value="<>"] -> <input value="<input>">

	textarea[placeholder="_"] -> <textarea placeholder="placeholder">`<textarea></textarea>`</textarea>

	input[value="1" placeholder=".."] -> <input value="1" placeholder="1">

	nav -> <nav>`<nav></nav>`</nav>
sections
article
<article>‌</article>
section
<section>‌</section>
nav
aside
h1

<h1>‌</h1>

h2

<h2>‌</h2>

h3

<h3>‌</h3>

h4

<h4>‌</h4>

h5
<h5>‌</h5>
h6
<h6>‌</h6>
header
<header>‌</header>
footer
<footer>‌</footer>
address
<address>‌</address>
 
grouping content
p

<p>‌</p>

hr ‍
pre 
<pre>‌</pre>
blockquote
<blockquote>‌</blockquote>
ol > li
    <ol>
  1. <li>‌</li>
    2. </ol>
ul > li
    <ul>
  • <li>‌</li>
    • </ul>
dl > dt+dd
<dl>
<dt>‌</dt>
<dd>‌</dd>
</dl>
figure > figcation
<figure>
<figcaption>‌</figcaption>
</figure>
main
<main>‌</main>
div
<div>‌</div>
 
text-level semantics
a[href=#] <a>‌</a>
em <em>‌</em>
strong <strong>‌</strong>
small <small>‌</small>
s <s>‌</s>
cite <cite>‌</cite>
q <q>‌</q>
dfn <dfn>‌</dfn>
abbr[title="title"] <abbr title="title">‌</abbr>
data[value="value"] <data value="value">‌</data>
time
code <code>‌</code>
var <var>‌</var>
samp <samp>‌</samp>
kbd <kbd>‌</kbd>
sub <sub>‌</sub>
sup <sup>‌</sup>
i <i>‌</i>
b <b>‌</b>
u <u>‌</u>
mark <mark>‌</mark>
bdi <bdi>‌</bdi>
bdo[dir="ltr"] <bdo dir="ltr">‌</bdo>
span <span>‌</span>
wbr verylong<wbr>longword
 
text-level semantics (ruby)
 
edits
del <del>‌</del>
ins <ins>‌</ins>
 
embedded content
img[src="data/img.png"]
iframe[src="data/frame.html"]
object[data="data/frame.html"]
video[controls src="data/video.mp4"]
audio[controls] > source[src="data/audio.mp3"]
map <map>‌</map>
svg
 
tabular data
table > tr > th <th>‌</th>
table > tr > td <td>‌</td>
 
forms
form
<form>‌</form>
label
input[value="_" placeholder="_"]
input[type="text" value="_" placeholder="_"]*
input[type="search" value="_" placeholder="_"]*
input[type="tel" value="_" placeholder="_"]*
input[type="url" value="http://initcss.io" placeholder=".."]*
input[type="email" value="my@email.com" placeholder=".."]*
input[type="password" value="_" placeholder="_"]*
input[type="datetime" value="1970-01-31T12:00Z" plch=".."]*
input[type="date" value="1970-01-31" placeholder=".."]*
input[type="month" value="1970-01" placeholder=".."]*
input[type="week" value="1970-W01" placeholder=".."]*
input[type="time" value="12:00" placeholder=".."]*
input[type="number" value="100" placeholder=".."]*
input[type="range" min=0 max=100 step=10 value=30]*
input[type="color" value="#999999"]*
input[type="checkbox"]*
input[type="radio"]*
input[type="file"]*
input[type="image" src="data/img.png"]*
input[type="submit" value="<>"]*
input[type="reset" value="<>"]*
input[type="button" value="<>"]*
button
select* > optgroup[label="<>"]* > option*2 *
select[multiple]* > optgroup[label="<>"]* > option*2 *
datalist[id="datalist"] > option[value="<>"]*2* attached to the element below
↳input[value="_" list="datalist"]*
textarea[placeholder="_"]*
output <output>‌</output>
keygen*
progress[max=100 value=30]* <meter>‌</meter>
meter[min=0 max=100 value=30]* <meter>‌</meter>
fieldset > legend
<legend>‌</legend> ↳<fieldset>‌</fieldset>
 
interactive elements
details > summary
<summary>‌</summary> ↳<details>‌</details>
dialog ‍<dialog>‌</dialog>