Example Define the title of a work with the <cite> tag: <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p> Try it Yourself » Definition and Usage 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.). Note: A person’s name is not the […]
Example A form with two submit buttons. The first submit button submits the form data with default target (“_self”), and the second submits the form data to a new window (target=”_blank”): <form action=”/action_page.php” method=”get”> First name: <input type=”text” name=”fname”><br> Last name: <input type=”text” name=”lname”><br> <button type=”submit” >Submit</button> <button type=”submit” formtarget=”_blank”>Submit to a new window</button> </form> Try it Yourself » Definition and Usage The formtarget attribute specifies where […]
Example A clickable button is marked up as follows: <button type=”button”>Click Me!</button> Try it Yourself » Definition and Usage The <button> tag defines a clickable button. Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element. Tip: Always specify the type […]
Example Mark up a short quotation: <p>WWF’s goal is to: <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p> Try it Yourself » Definition and Usage The <q> tag defines a short quotation. Browsers normally insert quotation marks around the quotation. Browser Support Element <q> Yes Yes Yes Yes Yes […]
Example Specify the text direction: <bdo dir=”rtl”> This text will go right-to-left. </bdo> Try it Yourself » Definition and Usage bdo stands for Bi-Directional Override. The <bdo> tag is used to override the current text direction. Browser Support Element <bdo> Yes Yes Yes Yes Yes Differences Between HTML 4.01 and HTML5 NONE. Attributes Attribute Value Description […]
Bdo Object The Bdo object represents an HTML <bdo> element. Access a Bdo Object You can access a <bdo> element by using getElementById(): Example var x = document.getElementById(“myBdo”); Try it Yourself » Create a Bdo Object You can create a <bdo> element by using the document.createElement() method: Example var x = document.createElement(“BDO”); Try it Yourself » Bdo […]
Example Isolate the usernames from the surrounding text-direction settings: <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> Try it Yourself » Definition and Usage 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 […]
Not Supported in HTML5. Example Specify a default text-color and font-size for text on page: <head> <basefont color=”red” size=”5″> </head><body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> Try it Yourself » Definition and Usage The <basefont> tag is not supported in HTML5. Use CSS instead. The <basefont> tag specifies a default text-color, font-size, or font-family […]
Example Specify a default font-color for text on page: <head> <basefont color=”red”> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> Try it Yourself » Definition and Usage The color attribute specifies the default font color for the text in a document. Browser Support Attribute color Not supported Not supported Not supported Not supported […]
Example Specify a default URL and a default target for all links on a page: <head> <base href=”https://www.schools.com/images/” target=”_blank”> </head><body> <img src=”stickman.gif” width=”24″ height=”39″ alt=”Stickman”> <a href=”https://www.schools.com”>Schools</a> </body> Try it Yourself » Definition and Usage The <base> tag specifies the base URL/target for all relative URLs in a document. There can be at maximum one <base> element in a document, and it […]
Example <p>This is normal text – <b>and this is bold text</b>.</p> Try it Yourself » Definition and Usage The <b> tag specifies bold text. Browser Support Element <b> Yes Yes Yes Yes Yes Differences Between HTML 4.01 and HTML5 NONE. Tips and Notes Note: According to the HTML 5 specification, the <b> tag should be used as […]
Example An audio player: <audio src=”horse.ogg” controls> Your browser does not support the audio element. </audio> Try it Yourself » Definition and Usage The src attribute specifies the location (URL) of the audio file. The example above uses an Ogg file, and will work in Firefox, Opera and Chrome. To play the audio file in Internet Explorer […]
Example Author thinks that the sound should NOT be loaded when the page loads: <audio controls preload=”none”> <source src=”https://dwfaisalabad.com/downloads/Wild_Pogo.mp3″ type=”audio/mpeg”> Your browser does not support the audio element. </audio> Try it Yourself » Definition and Usage The preload attribute specifies if and how the author thinks that the audio file should be loaded when the page […]
Example An <audio> element with browser default controls: <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 controls attribute is a boolean attribute. When present, it specifies that audio controls should be displayed. Audio controls should include: Play Pause Seeking Volume Browser Support The numbers […]
Example An audio file that will automatically start playing: <audio controls autoplay> <source src=”horse.mp3″ type=”audio/mpeg”> Your browser does not support the audio element. </audio> Try it Yourself » Definition and Usage The autoplay attribute is a boolean attribute. When present, the audio will automatically start playing as soon as it can do so without stopping. Browser Support The […]
Example <p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside> Try it Yourself » Definition and Usage The <aside> tag defines some content aside from the content it is placed in. The aside content should be related to the […]
Example The type attribute specifies the media type of the target URL: <img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”> <map name=”planetmap”> <area shape=”rect” coords=”0,0,82,126″ alt=”Sun” href=”/images/sun.gif” type=”image/gif”> </map> Try it Yourself » Definition and Usage The type attribute specifies the Internet media type (formerly known as MIME type) of the target URL. This attribute is only used if the href attribute is set. Note: This attribute is […]
Example An image-map with clickable areas that will be downloaded when clicked on: <img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”> <map name=”planetmap”> <area shape=”rect” coords=”0,0,82,126″ alt=”Sun” href=”info_about_the_sun.htm”download=”sun”> <area shape=”circle” coords=”90,58,3″ alt=”Mercury” href=”merglobe.gif”download=”mercury”> <area shape=”circle” coords=”124,58,8″ alt=”Venus”href=”information_about_the_planet_venus.txt” download=”venus”> </map> Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The download attribute specifies that the target will be downloaded when a user clicks on the hyperlink. This attribute is only used if […]
Example An image-map, with clickable areas: <img src =”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”> <map name=”planetmap”> <area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”> <area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”> <area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”> </map> Try it Yourself » Definition and Usage The coords attribute specifies the coordinates of an area in an image-map. The coords attribute is used together with the shape attribute to specify the size, shape, and placement of an area. Tip: The coordinates of the top-left […]
Example An image-map, with clickable areas: <img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”><map name=”planetmap”> <area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”> <area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”> <area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”> </map> Try it Yourself » Definition and Usage The alt attribute specifies an alternate text for an area, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of […]
