Fieldset Object The Fieldset object represents an HTML <fieldset> element. Access a Fieldset Object You can access a <fieldset> element by using getElementById(): Example var x = document.getElementById(“myFieldset”); Try it Yourself » Tip: You can also access a Fieldset object by searching through the elements collection of a form. Create a Fieldset Object You can create a <fieldset> element […]
HTML web storage; better than cookies. What is HTML Web Storage? With web storage, web applications can store data locally within the user’s browser. Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting […]
Locate the User’s Position The HTML Geolocation API is used to get the geographical position of a user. Since this can compromise privacy, the position is not available unless the user approves it. Note: Geolocation is most accurate for devices with GPS, like iPhone. Browser Support The numbers in the table specify the first browser version […]
Multimedia on the web is sound, music, videos, movies, and animations. What is Multimedia? Multimedia comes in many different formats. It can be almost anything you can hear or see. Examples: Images, music, sound, videos, records, films, animations, and more. Web pages often contain multimedia elements of different types and formats. In this chapter you will learn […]
The HTML <canvas> element is used to draw graphics on a web page. The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text. What is HTML Canvas? The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. The <canvas> element is only […]
Semantics is the study of the meanings of words and phrases in a language. Semantic elements = elements with a meaning. What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> – Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content. Browser Support […]
New Elements in HTML5 Below is a list of the new HTML5 elements, and a description of what they are used for. New Semantic/Structural Elements HTML5 offers new elements for better document structure: Tag Description <article> Defines an article <aside> Defines content aside from the page content <audio> Defines sound content <bdi> Isolates a part […]
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 […]
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. […]
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 […]
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 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 set of navigation links: <nav> <a href=”link-tag.html”>HTML</a> | <a href=”link-tag.html”>CSS</a> | <a href=”link-tag.html”>JavaScript</a> | <a href=”link-tag.html”>jQuery</a> </nav> Try it Yourself » Definition and Usage The <nav> tag defines a set of navigation links. Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only […]
Example Use the meter element to measure data within a given range (a gauge): <meter value=”2″ min=”0″ max=”10″>2 out of 10</meter><br> <meter value=”0.6″>60%</meter> Try it Yourself » Definition and Usage 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 […]
HTML <meter> form Attribute Example A <meter> element located outside a form (but still a part of the form): <form action=”/action_page.php” method=”get” id=”form1″> First name: <input type=”text” name=”fname”><br> <input type=”submit” value=”Submit”> </form><meter form=”form1″ name=”x1″ min=”0″ low=”40″ high=”90″ max=”100″ value=”95″></meter> Try it Yourself » Definition and Usage The form attribute specifies one or more forms the <meter> element belongs to. HTML <meter> high Attribute Example A gauge with a current value and min, max, high, […]
Example An HTML form with an input field with a specified legal number intervals: <form action=”/action_page.php”> <input type=”number” name=”points” step=”3″> <input type=”submit”> </form> Try it Yourself » Definition and Usage The step attribute specifies the legal number intervals for an <input> element. Example: if step=”3″, legal numbers could be -3, 0, 3, 6, etc. Tip: The step attribute can be used […]
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”> </form> Try it Yourself » Definition and Usage The src attribute specifies the URL of the image to use as a submit button. Note: The src attribute is required for <input type=”image”>, and can only be used with <input type=”image”>. […]
Example An HTML form with two input fields with a width of 35 and 4 characters: <form action=”/action_page.php”> Email: <input type=”text” name=”email” size=”35″><br> PIN: <input type=”text” name=”pin” maxlength=”4″ size=”4″><br> <input type=”submit” value=”Submit”> </form> Try it Yourself » Definition and Usage The size attribute specifies the visible width, in characters, of an <input> element. Note: The size attribute works with the following input types: text, search, tel, url, email, […]
Example An HTML form with a required input field: <form action=”/action_page.php”> Username: <input type=”text” name=”usrname” required> <input type=”submit”> </form> Try it Yourself » Definition and Usage The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, url, […]
