Tag: html5 tutorial

HTML <input> autofocus Attribute

Example Let the “First name” input field automatically get focus when the page loads: <form action=”/action_page.php”> First name: <input type=”text” name=”fname” autofocus><br> Last name: <input type=”text” name=”lname”><br> <input type=”submit”> </form> Try it Yourself » Definition and Usage The autofocus attribute is a boolean attribute. When present, it specifies that an <input> element should automatically get focus when the page loads. Browser Support The numbers […]

HTML <input> autocomplete Attribute

Example An HTML form with autocomplete on (and off for one input field): <form action=”/action_page.php” autocomplete=”on”> First name:<input type=”text” name=”fname”><br> Last name: <input type=”text” name=”lname”><br> E-mail: <input type=”email” name=”email” autocomplete=”off”><br> <input type=”submit”> </form> Try it Yourself » Definition and Usage The autocomplete attribute specifies whether or not an input field should have autocomplete enabled. Autocomplete allows the browser to predict the value. When a user starts to […]

HTML <input> alt Attribute

Example An HTML form with an image that represents the submit button: <form action=”/action_page.php”> First name: <input type=”text” name=”fname”><br> <input type=”image” src=”submit.gif” alt=”Submit” width=”48″ height=”48″> </form> Try it Yourself » Definition and Usage The alt attribute provides an alternate text for the user, if he/she for some reason cannot view the image (because of slow connection, an error in the src attribute, or if […]

HTML <input> accept Attribute

Example Specify that the server accepts only image files in the file upload: <form action=”/action_page.php”> <input type=”file” name=”pic” accept=”image/*”> <input type=”submit”> </form> Try it Yourself » Definition and Usage The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload). Note: The accept attribute can only be used with <input type=”file”>. Tip: Do […]

HTML <th> Tag

Example A simple HTML table with two header cells and two data cells: <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 <th> tag defines a header cell in an HTML table. An HTML table has two kinds of cells: […]

HTML <track> src Attribute

Example A video with two subtitle tracks: <video width=”320″ height=”240″ controls> <source src=”forrest.mp4″ type=”video/mp4″>  <track src=”subtitles_en.vtt” kind=”subtitles” srclang=”en” label=”English”> <track src=”subtitles_no.vtt” kind=”subtitles” srclang=”no” label=”Norwegian”> </video> Definition and Usage The required src attribute specifies the URL of the track file. Browser Support The numbers in the table specify the first browser version that fully supports the attribute. Attribute src 18.0 10.0 31.0 6.0 15.0 Differences Between HTML 4.01 and […]

HTML <track> kind Attribute

Example A video with two subtitle tracks: <video width=”320″ height=”240″ controls> <source src=”forrest.mp4″ type=”video/mp4″> <track src=”subtitles_en.vtt” kind=”subtitles” srclang=”en” label=”English”> <track src=”subtitles_no.vtt” kind=”subtitles” srclang=”no” label=”Norwegian”> </video> Definition and Usage The kind attribute specifies the kind of text track. Browser Support The numbers in the table specify the first browser version that fully supports the attribute. Attribute kind 18.0 10.0 31.0 6.0 15.0 Differences Between HTML 4.01 and HTML5 The […]

HTML <u> Tag

Example Underline a misspelled word with the <u> tag: <p>This is a <u>parragraph</u>.</p> Try it Yourself » Definition and Usage The <u> tag represents some text that should be stylistically different from normal text, such as misspelled words or proper nouns in Chinese. Browser Support Element <u> Yes Yes Yes Yes Yes Tips and Notes Tip: Avoid […]

HTML <video> Tag

Example Play a video: <video width=”320″ height=”240″ controls> <source src=”movie.mp4″ type=”video/mp4″> <source src=”movie.ogg” type=”video/ogg”> Your browser does not support the video tag. </video> Try it Yourself » Definition and Usage The <video> tag specifies video, such as a movie clip or other video streams. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg: Browser MP4 WebM […]

HTML <video> width Attribute

Example A video player with a specified width and height: <video width=”320″ height=”240″ controls> <source src=”movie.mp4″ type=”video/mp4″> Your browser does not support the video tag. </video> Try it Yourself » Definition and Usage The width attribute specifies the width of a video player, in pixels. Tip: Always specify both the height and width attributes for videos. If height and width are […]

HTML <video> poster Attribute

Example A video player with a poster image: <video controls poster=”/images/w3html5.gif”> <source src=”movie.mp4″ type=”video/mp4″> Your browser does not support the video tag. </video> Try it Yourself » Definition and Usage The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the […]

HTML <video> muted Attribute

Example A muted video: <video controls muted> <source src=”movie.mp4″ type=”video/mp4″> Your browser does not support the video tag. </video> Try it Yourself » Definition and Usage The muted attribute is a boolean attribute. When present, it specifies that the audio output of the video should be muted. Browser Support The numbers in the table specify the first browser […]

HTML <video> controls Attribute

Example A <video> element with browser default controls: <video controls> <source src=”movie.mp4″ type=”video/mp4″> Your browser does not support the video tag. </video> Try it Yourself » Definition and Usage The controls attribute is a boolean attribute. When present, it specifies that video controls should be displayed. Video controls should include: Play Pause Seeking Volume Fullscreen toggle Captions/Subtitles (when […]

HTML <video> autoplay Attribute

Example A video that will automatically start playing: <video controls autoplay> <source src=”movie.mp4″ type=”video/mp4″> Your browser does not support the video tag. </video> Try it Yourself » Definition and Usage The autoplay attribute is a boolean attribute. When present, the video will automatically start playing as soon as it can do so without stopping. Browser Support The numbers […]

HTML <wbr> Tag

Example A text with word break opportunities: <p> To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object. </p> Try it Yourself » Definition and Usage The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break. Tip: When a word is too long, or you are […]

HTML <dd> Tag

Example A description list, with terms and descriptions: <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> Try it Yourself » Definition and Usage The <dd> tag is used to describe a term/name in a description list. The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names). Inside a <dd> tag […]

HTML <datalist> Tag

Example An <input> element with pre-defined values in a <datalist>: <input list=”browsers”> <datalist id=”browsers”> <option value=”Internet Explorer”> <option value=”Firefox”> <option value=”Chrome”> <option value=”Opera”> <option value=”Safari”> </datalist> Try it Yourself » Definition and Usage 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 […]

HTML <colgroup> width Attribute

Example A <colgroup> element that specifies that the first column should have a predefined width of 200 pixels: <table> <colgroup width=”200″> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Try it Yourself » Definition and Usage The width attribute specifies the width of a column group. Normally, a column group takes […]

HTML <colgroup> char Attribute

Example In the example below, the content of the second column should be aligned to the “.” character: <table style=”width:100%”> <colgroup align=”left”></colgroup> <colgroup align=”char” char=”.”></colgroup> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100.00</td> </tr> <tr> <td>February</td> <td>$10.00</td> </tr> </table> Try it Yourself » Definition and Usage The <colgroup> char attribute is not supported in HTML5. The char attribute specifies the […]

HTML <kbd> Tag

Example Format text in a document: <kbd>Keyboard input</kbd> Try it Yourself » Definition and Usage The <kbd> tag is a phrase tag. It defines keyboard input. Tip: This tag is not deprecated, but it is possible to achieve richer effect with CSS. All phrase tags: Tag Description <em> Renders as emphasized text <strong> Defines important text […]