Below is Listed Some html/html5 tags descriptions and corresponding example use:
| SL | Tag Name | Description | Example |
| 1 | <bdo> | bdo stands for Bi-Directional Override. The <bdo> tag is used to override the current text direction. |
<bdo dir=”rtl”>This text will go right-to-left.</bdo> |
| 2 | <bdi> | bdi stands for Bi-directional Isolation. The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it. This element is useful when embedding user-generated content with an unknown directionality. |
<ul> <li>User <bdi>hrefs</bdi>: 60 points</li> <li>User <bdi>jdoe</bdi>: 80 points</li> <li>User <bdi>إيان</bdi>: 90 points</li> </ul> |
| 3 | <canvas> | The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> tag is only a container for graphics, you must use a script to actually draw the graphics. |
<canvas id=”myCanvas”></canvas>
<script type=”text/javascript”> |
| 4 | <cite> | The <cite> tag defines the title of a work (e.g. a book, a song, a movie, a TV show, a painting, a sculpture, etc.). |
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p> |
| 5 | <code> | The <code> tag is a phrase tag. It defines a piece of computer code. |
<em>Emphasized text</em><br> <strong>Strong text</strong><br> <dfn>Definition term</dfn><br> <code>A piece of computer code</code><br> <samp>Sample output from a computer program</samp><br> <kbd>Keyboard input</kbd><br> <var>Variable</var> |
| 6 | <datalist> | The <datalist> tag specifies a list of pre-defined options for an <input> element.
The <datalist> tag is used to provide an “autocomplete” feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data. Use the <input> element’s list attribute to bind it together with a <datalist> element. |
<input list=”browsers”>
<datalist id=”browsers”> |
| 7 | <del> | The <del> tag defines text that has been deleted from a document. |
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> |
| 8 | <figcaption> <figure> |
The <figcaption> tag defines a caption for a <figure> element.
The <figcaption> element can be placed as the first or last child of the <figure> element. |
<figure> <img src=”img_pulpit.jpg” alt=”The Pulpit Rock” width=”304″ height=”228″> <figcaption>Fig1. – A view of the pulpit rock in Norway.</figcaption> </figure> |
| 9 | <header> | Defines a header for a document or section |
|
| 10 | <footer> | Defines a footer for a document or section | |
| 11 | <keygen> | The <keygen> tag specifies a key-pair generator field used for forms.
When the form is submitted, the private key is stored locally, and the public key is sent to the server. |
<form action=”demo_keygen.asp” method=”get”> Username: <input type=”text” name=”usr_name”> Encryption: <keygen name=”security”> <input type=”submit”> </form> |
| 12 | <legend> | The <legend> tag defines a caption for the <fieldset> element. |
<form> <fieldset> <legend>Personalia:</legend> Name: <input type=”text” size=”30″><br> Email: <input type=”text” size=”30″><br> Date of birth: <input type=”text” size=”10″> </fieldset> </form> |
| 13 | <map> | The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.
The required name attribute of the <map> element is associated with the <img>’s usemap attribute and creates a relationship between the image and the map. The <map> element contains a number of <area> elements, that defines the clickable areas in the image map. |
<img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”>
<map name=”planetmap”> |
| 14 | <mark> | The <mark> tag defines marked text.
Use the <mark> tag if you want to highlight parts of your text. |
<p>Do not forget to buy <mark>milk</mark> today.</p> |
| 15 | <meter> | The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.
Examples: Disk usage, the relevance of a query result, etc. Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag. |
<meter value=”2″ min=”0″ max=”10″>2 out of 10</meter><br> <meter value=”0.6″>60%</meter> |
| 16 | <noscript> | The <noscript> tag defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn�t support script.
The <noscript> element can be used in both <head> and <body>. When used inside the <head> element: <noscript> must contain <link>, <style>, and <meta> elements. The content inside the <noscript> element will be displayed if scripts are not supported, or are disabled in the user�s browser. |
<script> document.write(“Hello World!”) </script> <noscript>Sorry, your browser does not support JavaScript!</noscript><p>A browser without support for JavaScript will show the text inside the noscript element.</p> |
| 17 | <progress> | The <progress> tag represents the progress of a task. |
<progress value=”22″ max=”100″></progress> |
| 18 | <output> | The <output> tag represents the result of a calculation (like one performed by a script). |
<form oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>0 <input type=”range” id=”a” value=”50″>100 +<input type=”number” id=”b” value=”50″> =<output name=”x” for=”a b”></output> </form> |
| 19 | <s> | The <s> tag specifies text that is no longer correct, accurate or relevant.
The <s> tag should not be used to define replaced or deleted text, use the <del> tag to define replaced or deleted text. |
<p><s>My car is blue.</s></p> <p>My new car is silver.</p> |
| 20 | <svg> | SVG is a language for describing 2D graphics in XML.
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element. In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape. |
<svg width=”300″ height=”200″> <polygon points=”100,10 40,180 190,60 10,60 160,180″ style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;” /> </svg> |
No Comments