HTML <source> src Attribute An audio player with two source files. The browser should choose which file (if any) it has support for: <audio controls> <source src=”horse.mp3″ type=”audio/mpeg”> Your browser does not support the audio element. </audio> Try it Yourself » Definition and Usage The src attribute specifies the URL of the media file to play. This attribute is required […]
Example A ruby annotation:www. <ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby> Try it Yourself » Definition and Usage The <rp> tag can be used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations. Use the <rp> tag together with the <ruby> and the <rt> tags: The <ruby> element consists of one or more characters […]
Example A ruby annotation: <ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> Try it Yourself » Definition and Usage The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation. Use the <rt> tag together with the <ruby> and the <rp> tags: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an […]
Example A ruby annotation: <ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> Try it Yourself » Definition and Usage The <ruby> tag specifies a ruby annotation. A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. This kind of annotation is often used in Japanese publications. Use […]
Example A <span> element used to color a part of a text: <p>My mother has <span style=”color:blue”>blue</span> eyes.</p> Try it Yourself » Definition and Usage The <span> tag is used to group inline-elements in a document. The <span> tag provides no visual change by itself. The <span> tag provides a way to add a hook to a part […]
Example Preformatted text: <pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre> Try it Yourself » Definition and Usage The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces […]
Not Supported in HTML5 Example Strikethrough text can be marked up as follows: <p>Version 2.0 is <strike>not yet available!</strike> now available!</p> Try it Yourself » Definition and Usage The <strike> tag is not supported in HTML5. Use <del> or <s> instead. The <strike> tag defines strikethrough text. Browser Support Element <strike> Yes Yes Yes Yes Yes
Example Mark up text that is no longer correct: <p><s>My car is blue.</s></p> <p>My new car is silver.</p> Try it Yourself » Definition and Usage 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 […]
Example How to use the <picture> tag: <picture> <source media=”(min-width: 650px)” srcset=”img_pink_flowers.jpg”> <source media=”(min-width: 465px)” srcset=”img_white_flower.jpg”> <img src=”img_orange_flowers.jpg” alt=”Flowers” style=”width:auto;”> </picture> Try it Yourself » Definition and Usage The <picture> tag gives web developers more flexibility in specifying image resources. The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that […]
Example A paragraph is marked up as follows: <p>This is some text in a paragraph.</p> Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The <p> tag defines a paragraph. Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the […]
HTML <output> for Attribute Perform a calculation and show the result in an <output> element: <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> Try it Yourself » Definition and Usage The for attribute specifies the relationship between the result of the calculation, and the elements used in the calculation. HTML <output> form Attribute An <output> element located outside a form (but […]
Example Perform a calculation and show the result in an <output> element: <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> Try it Yourself » Definition and Usage The <output> tag represents the result of a calculation (like one performed by a script). Browser Support The numbers in the table specify the first browser version that fully supports […]
HTML <option> disabled Attribute A drop-down list with one disabled option: <select> <option value=”volvo” disabled>Volvo</option> <option value=”saab”>Saab</option> <option value=”vw”>VW</option> <option value=”audi”>Audi</option> </select> Try it Yourself » Definition and Usage The disabled attribute is a boolean attribute. When present, it specifies that an option should be disabled. A disabled option is unusable and un-clickable. The disabled attribute can be set to keep a […]
Example Subscript text: <p>This text contains <sub>subscript</sub> text.</p> Try it Yourself » Definition and Usage The <sub> tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O. Tip: Use the <sup> tag to define superscripted text.
Example Superscript text: <p>This text contains <sup>superscript</sup> text.</p> Try it Yourself » Definition and Usage The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]. Tip: Use the <sub> tag to define subscript text. Browser Support Element […]
Example Draw a circle: <svg width=”100″ height=”100″> <circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” /> </svg> Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The <svg> tag defines a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images. To learn more about SVG, please read our SVG Tutorial. Browser Support Element <svg> […]
Example A simple HTML table, containing two columns and two rows: <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The <table> tag defines an HTML table. An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements. The […]
HTML <optgroup> disabled Attribute A disabled option-group: <select> <optgroup label=”German Cars” disabled> <option value=”mercedes”>Mercedes</option> <option value=”audi”>Audi</option> </optgroup> </select> Try it Yourself » Definition and Usage The disabled attribute is a boolean attribute. When present, it specifies that an option-group should be disabled. A disabled option-group is unusable and un-clickable. The disabled attribute can be set to keep a user from selecting […]
HTML <ol> compact Attribute Use of the compact attribute in an ordered HTML list: <ol compact> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Try it Yourself » Definition and Usage The compact attribute is a boolean attribute. When present, it specifies that the list should render smaller than normal, by reducing the space between lines and the indentation of the list. […]
The purpose of a plug-in is to extend the functionality of a web browser. HTML Helpers (Plug-ins) Helper applications (plug-ins) are computer programs that extend the standard functionality of a web browser. Examples of well-known plug-ins are Java applets. Plug-ins can be added to web pages with the <object> tag or the <embed> tag. Plug-ins can be used for […]
