example
codes:
<img src="../pics/vangogh.jpg" title="Vincent van Gogh">
revision:
The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
The tabindex attribute is part of the global attributes and can be used on any HTML element.
<element tabindex="number"></element>
number specifies the tabbing order of the element (1 is first)
Note: Try navigating the elements by using the "Tab" button on your keyboard.
HTML codes:
<div style="margin-left:3vw;" tabindex="1">Fox</div><br>
<div style="margin-left:3vw;" tabindex="3">Google</div><br>
<div style="margin-left:3vw;" tabindex="2">Microsoft</div>
<p class="spec" tabindex="4"><b>Note:</b> Try navigating the elements by using the "Tab"
button on your keyboard.</p>
<script>
document.getElementsByTagName('div')[0].focus();
</script>
Click anywhere in this pane, then try tabbing through the elements.
HTML codes:
<p class="spec">Click anywhere in this pane, then try tabbing through the elements.</p>
<label style="margin-left:3vw;">First in tab order:<input type="text"></label>
<div style="margin-left:3vw;" tabindex="0">Tabbable due to tabindex.</div>
<div style="margin-left:3vw;">Not tabbable: no tabindex.</div>
<label style="margin-left:3vw;">Third in tab order:<input type="text"></label>
The target attribute specifies where to open the linked document.
The target attribute can be used on following elements: <a>, <area>, <base>, <form>.
For <a> and <area> elements, the target attribute specifies where to open the linked document.
For <base> elements, the target attribute specifies the default target for all hyperlinks and forms in the page.
For <form> elements, the target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
<element target="_blank | _self | _parent | _top | framename"></element>
attribute values:
_blank: opens the linked document in a new window or tab.
_self: opens the linked document in the same frame as it was clicked (this is default).
_parent: opens the linked document in the parent frame.
_top: opens the linked document in the full body of the window
framename: opens the linked document in the named iframe
Open link in a new window or tab: Visit my website!
codes:
<p class="spec">Open link in a new window or tab: <a href="https://www.lwitters.com"
target="_blank">Visit my website!</a></p>
codes:
<form style="margin-left:3vw;" action="/action_page.php" method="get" target="_blank">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
The title attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).
<element title="text"></element>
text: a tooltip text for an element.
WHO was founded in 1948.
Click to visit home page.codes:
<p class="spec"><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<a style="margin-left:3vw;" href="https://www.lwitters.com/coding.php" title="my coding webpage"
>Click to visit home page.</a>
codes:
<img src="../pics/vangogh.jpg" title="Vincent van Gogh">
The translate attribute specifies whether the content of an element should be translated or not.
The translate attribute is part of the global attributes and can be used on any HTML element.
<element translate=" yes | no"></element>
yes specifies that the content of the element should be translated;
no specifies that the content of the element must not be translated.
Don't translate this!
This can be translated to any language.
codes:
<h3><strong >translate attribute</strong></h3>
<p class="spec" translate="no">Don't translate this!</p>
<p class="spec">This can be translated to any language.</p>
Content of the element should not translated.
Content of the element should be translated.
codes:
<p class="spec" translate="no">Content of the element should not translated.</p>
<p class="spec" translate="yes">Content of the element should be translated.</p>
The type attribute can be used on the following elements: <a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style>.
For <button> elements, the type attribute specifies the type of button.
For <input> elements, the type attribute specifies the type of <input> element to display.
For <embed>, <link>, <object>, <script>, <source>, <style> elements, the type attribute specifies the Internet media type (formerly known as MIME type).
<element type=" "></element>
HTML codes:
<form style="margin-left:3vw;" action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
HTML codes:
<object style="margin-left:3vw;" data="car2.jpg" type="image/jpg" width="500"
height="300"></object>