<body id="frame1body" tabindex="0">

<!--anchor types-->
<a href="#" tabindex="-1" id="a1">anchor</a><br>
<img src ="abe.png" width="76" height="103" alt="honest abe" usemap ="#theMapName" />
<map name="theMapName" id="map1">
  <area shape ="rect" coords ="0,0,76,50" href="#" target ="_blank" alt="rectArea1" tabindex="1" id="area1a"/>
  <area shape ="rect" coords ="0,50,76,103" href="#" target ="_blank" alt="rectArea2" tabindex="0" id="area1b"/>
</map><br>

<!--media elements-->
<div id="div1a" tabindex="-1">
<audio controls src="../../../media/content/test.wav" id="audio1"></audio><br>
<video controls tabindex="2" id="video1">
    <source src="../../../media/content/test.mp4" type="video/mpeg" id="source1">
</video><br>
</div>

<!--embedded elements-->
applet:<br>
<applet width="100" height="100" code="" tabindex="-1" id="applet1"></applet><br>
object:<br>
<object type="application/x-no-such-plugin" width="100" height="100" id="object1"></object><br>
embed:<br>
<embed type="application/x-no-such-plugin" width="100" height="100" tabindex="3" id="embed1"></embed><br>

<!--presentation-related elements-->
<div id="div1b" tabindex="0">
<abbr title="the tooltip" tabindex="-1" id="abbr1">abbr makes a tooltip</abbr><br>
<acronym title="the tooltip" id="acronym1">acronym makes a tooltip</acronym><br>
<bdo dir="rtl" tabindex="3" id="bdo1">text going right-to-left</bdo><br>
a blockquote:<blockquote tabindex="0" id="blockquote1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eu nisi. Fusce aliquet massa non felis. Sed consectetuer. In hac habitasse platea dictumst. Nunc vitae nulla. Quisque tristique sollicitudin libero.</blockquote>
a short quote:<q tabindex="-1" id="q1">Veni, Vidi, Vici</q>
<p id="p1">paragraph</p>
line break:<br tabindex="2" id="br1">
horizontal rule:<hr tabindex="0" id="hr1">
<marquee tabindex="-1" id="marquee1">marquee text</marquee>
<center id="center1">centered text</center>
</div>

<!--font style tags-->
<b tabindex="1" id="b1">Bold text</b><br>
<big tabindex="0" id="big1">Big text</big><br>
<i tabindex="-1" id="i1">Italic text</i><br>
<small id="small1">Small text</small><br>
<tt tabindex="1" id="tt1">Teletype text</tt><br>

<!--canvas element-->
<div id="div1c" tabindex="0">
canvas:<br>
<canvas width='200' height='100' tabindex="-1" id="canvas1"></canvas><br>
</div>

<!--Phrase elements-->
<em id="em1">em</em><br>
<strong tabindex="2" id="strong1">strong</strong><br>
<dfn tabindex="0" id="dfn1">dfn</dfn><br>
<code tabindex="-1" id="code1">code</code><br>
<samp id="samp1">samp</samp><br>
<kbd tabindex="3" id="kbd1">kbd</kbd><br>
<var tabindex="0" id="var1">var</var><br>
<cite tabindex="-1" id="cite1">cite</cite><br>

<!--heading tags-->
<div id="div1d">
<h1 tabindex="3" id="h1_1">Heading 1</h1>
<h2 tabindex="0" id="h2_1">Heading 2</h2>
<h3 tabindex="-1" id="h3_1">Heading 3</h3>
<h4 id="h4_1">Heading 4</h4>
<h5 tabindex="2" id="h5_1">Heading 5</h5>
<h6 tabindex="0" id="h6_1">Heading 6</h6>
</div>

<!--other style-related tags-->
<s tabindex="-1" id="s1">strikethrough (sTag)</s><br>
<strike id="strike1">strikethrough (strikeTag)</strike><br>
<sub tabindex="1" id="sub1">subscript</sub><br>
<sup tabindex="0" id="sup1">superscript</sup><br>
<u tabindex="-1" id="u1">underlined</u><br>
<del id="del1">delete</del><br>
<ins tabindex="1" id="ins1">insert</ins><br>
<pre tabindex="0" id="pre1">preformatted</pre>
basic usage of <font tabindex="-1" id="font1">font</font> tag<br>
basic usage of <span id="span1">span</span> tag<br>

<!--tables-->
<div id="div1e" tabindex="2">
<table border="1" tabindex="0" id="table1">
<caption tabindex="-1" id="caption1">table caption</caption>
<colgroup span="2" id="colgroup1">
<col width="100" tabindex="3" id="col1a"></col>
<col width="250" tabindex="0" id="col1b"></col>
</colgroup>
<thead tabindex="-1" id="thead1"><tr><th id="th1">
table header
</th></tr></thead><tbody tabindex="3" id="tbody1">
<tr tabindex="0" id="tr1">
<td tabindex="-1" id="td1a">table cell 1</td>
<td id="td1b">table cell 2</td>
<td tabindex="2" id="td1c">table cell 3</td>
</tr></tbody>
<tfoot tabindex="0" id="tfoot1"><tr><td>
table footer
</td></tr></tfoot>
</table>
</div>

<!--definition list-->
<dl tabindex="-1" id="dl1">definition list
<dt id="dt1a">term1</dt>
<dd tabindex="1" id="dd1a">definition1</dd>
<dt tabindex="0" id="dt1b">term2</dt>
<dd tabindex="-1" id="dd1b">definition2</dd>
</dl>
    
<!--lists -->
<div id="div1f">
<ul tabindex="1" id="ul1">unordered list
<li tabindex="0" id="li1a"> ul li
</ul>
<ol tabindex="-1" id="ol1">ordered list
<li id="li1b"> ol li
</ol>
<menu tabindex="2" id="menu1">menu list
<li tabindex="0" id="li1c"> menu li
</menu>
<dir tabindex="-1" id="dir1">directory list
<li id="li1d"> dir li
</dir>
</div>

<!--images-->
<image src="abe.png" tabindex="3" id="image1"><br>
<img src="abe.png" tabindex="0" id="img1"><br>

<!--forms-->
<div id="div1g" tabindex="-1">
<form id="form1">
<fieldset tabindex="3" id="fieldset1">
    <legend id="legend1" tabindex="0">legend1</legend>
</fieldset>
<select id="select1">
    <optgroup label="group1" tabindex="2" id="optgroup1">
        <option tabindex="0" id="option1a">option1</option>
        <option>option2</option>
    </optgroup>
    <optgroup label="group2">
        <option>option3</option>
        <option tabindex="-1" id="option1b">option4</option>
    </optgroup>
</select><br>
<textarea id="textarea1">textarea1</textarea><br>
<input type="text" id="text1" value="text1" tabindex="1"><br>
<isindex id="isindex1" prompt="isindex1" tabindex="0"/><br>
<input type="checkbox" id="checkbox1"><br>
<input type="radio" id="radioChoice1a" name="radio1" tabindex="0"><br>
<label id="label1" tabindex="-1"><input type="radio" name="radio1">label for radioChoice B</label><br>
<input type="file" id="file1" tabindex="2"><br>
input type="hidden"<input type="hidden" id="hidden1" tabindex="-1"><br>
input type="image"<input type="image" id="inputImage1" src="abe.png" tabindex="3"><br>
<button id="button1" tabindex="0">button1</button><br>
<input type="button" id="inputButton1" value="inputButton1" tabindex="-1"><br>
<input type="search" id="search1" placeholder="search1"><br>
<input type="password" id="password1" tabindex="-1"><br>
<input type="range" id="range1" tabindex="3"><br>
<input type="submit" id="submit1" tabindex="0">
<input type="reset" id="reset1" tabindex="-1"><br>
</form>
</div>

<iframe width="100%" height="75%" src="tabindex-focus-blur-all-iframe1.html" id="iframe1a" tabindex="-1"></iframe>
<iframe src="tabindex-focus-blur-all-frame3.html" id="iframe1b"></iframe>

</body>