HTML5 Introduction

What is New in HTML5? The DOCTYPE declaration for HTML5 is very simple: <!DOCTYPE html> The character encoding (charset) declaration is also very simple: <meta charset=”UTF-8″> HTML5 Example: <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Title of the document</title> </head><body> Content of the document…… </body></html> Try it Yourself » The default character encoding in HTML5 is UTF-8. New HTML5 Elements […]

HTML <acronym> Tag

Not Supported in HTML5 Example An acronym is marked up as follows: Can I get this <acronym title=”as soon as possible”>ASAP</acronym>? Try it Yourself » Definition and Usage The <acronym> tag is not supported in HTML5. Use the <abbr> tag instead. The <acronym> tag defines an acronym. An acronym must spell out another word. For example: NASA, ASAP, GUI. […]

HTML DOM Section Object

Section Object  The Section Object is new in HTML5. The Section object represents an HTML <section> element. Note: The <section> element is not supported in Internet Explorer 8 and earlier versions. Access a Section Object You can access a <section> element by using getElementById(): Example var x = document.getElementById(“mySection”); Try it Yourself » Create a Section Object […]

HTML <section> Tag

Example A section in a document, explaining what WWF is: <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is….</p> </section> Try it Yourself » Definition and Usage The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document. Browser Support The numbers in the table […]

HTML <select> Attributes

HTML <select> autofocus Attribute A drop-down list with autofocus: <select autofocus> <option value=”volvo”>Volvo</option> <option value=”saab”>Saab</option> <option value=”opel”>Opel</option> <option value=”audi”>Audi</option> </select> Try it Yourself » Definition and Usage The autofocus attribute is a boolean attribute. When present, it specifies that the drop-down list should automatically get focus when the page loads. HTML <select> disabled Attribute A disabled drop-down list: <select disabled> <option value=”volvo”>Volvo</option> <option value=”saab”>Saab</option> <option value=”mercedes”>Mercedes</option> <option value=”audi”>Audi</option> </select> […]

HTML DOM Select Object

The Select object represents an HTML <select> element. Access a Select Object You can access a <select> element by using getElementById(): Example var x = document.getElementById(“mySelect”); Try it Yourself » Tip: You can also access a Select object by searching through the elements collection of a form. Create a Select Object You can create a <select> element by using […]

HTML DOM Small Object

Small Object The Small object represents an HTML <small> element. Access a Small Object You can access a <small> element by using getElementById(): Example var x = document.getElementById(“mySmall”); Try it Yourself » Create a Small Object You can create a <small> element by using the document.createElement() method: Example var x = document.createElement(“SMALL”); Try it Yourself » Standard […]

HTML <small> Tag

Example Define a smaller text: <p>DW Faisalabad</p> <p><small> – the world’s largest web development site.</small></p> Try it Yourself » Definition and Usage The <small> tag defines smaller text (and other side comments). Browser Support Element <small> Yes Yes Yes Yes Yes Differences Between HTML 4.01 and HTML5 NONE.   Related Pages HTML tutorial: HTML Text Formatting […]

HTML DOM Source Object

Source Object  The Source Object is new in HTML5. The Source object represents an HTML <source> element. Access a Source Object You can access a <source> element by using getElementById(): Example var x = document.getElementById(“mySource”); Try it Yourself » Create a Source Object You can create a <source> element by using the document.createElement() method: Example var x […]

HTML <source> Attributes

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 […]

HTML DOM Script Object

The Script object represents an HTML <script> element. Access a Script Object You can access a <script> element by using getElementById(): Example var x = document.getElementById(“myScript”); Try it Yourself » Tip: You can also access a <script> element by using the scripts collection. Create a Script Object You can create a <script> element by using the document.createElement() method: Example […]

HTML DOM Samp Object

Samp Object The Samp object represents an HTML <samp> element. Access a Samp Object You can access a <samp> element by using getElementById(): Example var x = document.getElementById(“mySamp”); Try it Yourself » Create a Samp Object You can create a <samp> element by using the document.createElement() method: Example var x = document.createElement(“SAMP”); Try it Yourself » Standard […]

HTML DOM S Object

S Object The S object represents an HTML <s> element. Access a S Object You can access a <s> element by using getElementById(): Example var x = document.getElementById(“myS”); Try it Yourself » Create a S Object You can create a <s> element by using the document.createElement() method: Example var x = document.createElement(“S”); Try it Yourself » Standard […]

HTML <rp> Tag

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 […]

HTML <rt> Tag

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 […]

HTML <ruby> Tag

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 […]

HTML <span> Tag

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 […]

HTML DOM Progress Object

Progress Object  The Progress Object is new in HTML5. The Progress object represents an HTML <progress> element. The <progress> element represents the progress of a task. Access a Progress Object You can access a <progress> element by using getElementById(): Example var x = document.getElementById(“myProgress”); Try it Yourself » Create a Progress Object You can create a […]

HTML <pre> Tag

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 […]

HTML DOM Pre Object

Pre Object The Pre object represents an HTML <pre> element. Access a Pre Object You can access a <pre> element by using getElementById(): Example var x = document.getElementById(“myPre”); Try it Yourself » Create a Pre Object You can create a <pre> element by using the document.createElement() method: Example var x = document.createElement(“PRE”); Try it Yourself » Pre […]