tabindex attribute removes the element from the tabbing order.
Avoid unless you really know what you're doing.tabindex values greater than 0, as they override the natural source order, which is maintenance nightmare.<input type="text" autofocus>
</div>
</div>
</div>
</ul>
</nav>
</header>
</div>
</div>
</div>
</article>
</section>
</main>
</div>
</div>
</div>
</article>
</section>
</aside>
article or li?
<li>
HTML elements are <strong>objects</strong>,
with a hierarchy called
<em><abbr title="Document Object Model">DOM</abbr>
tree</em>
</li>
Document:
This is the root node, and does not correspond to any HTML element.HTMLElement:
Every HTML element, such as html, body, or em
is of this type. Usually, they merely inherit from HTMLElement,
and are an instance of a more specific type such as
HTMLHtmlElement,
HTMLBodyElement and so on.Text:
Text nodes, such as "Hello ", "world", and "!" in our example.
These never contain any other element, they are always leaves.
Comment:
HTML comments (<!-- like this -->) are represented by objects of this type.
button element creates buttons.form elements.action attribute of form elements controls which file will receive the submission. By default it's the current file.name attribute.target="_blank" works here too, to submit the form in a new tab<input type="text" placeholder="YYYY-MM-DD">
<input type="number" name="day">
<select name="month">
<option>Jan</option>
<option>Feb</option>
...
</select>
<input type="text" name="year">
<input type="date" />
<input type="text">
<input type="email">
<label><input type="radio" name="letter"> A</label>
<label><input type="radio" name="letter"> B</label>
<select name="letter">
<option>A</option>
<option>B</option>
...
</select>
<input list="letters" />
<datalist id="letters">
<option>A</option>
<option>B</option>
...
</datalist>
Depending on the number of options, different form controls are more appropriate for usability:
<select> menus are ideal<select> menus becomes longer than typing the first few characters.
In those cases, use <input> with <datalist for autocomplete)
<body>
<h1>My tasks</h1>
<p>0 done of 1 total</p>
<ul>
<li>
<input type="checkbox" />
<span>Do stuff</span>
</li>
</ul>
</body>
<body mv-app="todo" mv-storage="local">
<h1>My tasks</h1>
<p>[count(done)] done of [count(task)] total</p>
<ul>
<li property="task" mv-multiple>
<input property="done" type="checkbox" />
<span property="taskTitle">Do stuff</span>
</li>
</ul>
</body>
<body mv-app="todo" mv-storage="local">
<h1>My tasks</h1>
<p>[count(done)] done of [count(task)] total</p>
<ul>
<li property="task" mv-multiple>
<input property="done" type="checkbox" />
<span property="taskTitle">Do stuff</span>
</li>
</ul>
<button mv-action="delete(task where done)">
Clear completed
</button>
</body>
<link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
<script src="https://get.mavo.io/mavo.js"></script>
or just visit play.mavo.io and start coding!
<title>
<nextid>
<a>
<isindex>
<plaintext>
<listing>
<p>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<address>
<dl>
<dt>
<dd>
<ul>
<li>
reserved for future use.