Column Object The Column object represents an HTML <col> element. Access a Column Object You can access a <col> element by using getElementById(): Example var x = document.getElementById(“myCol”); Try it Yourself » Create a Column Object You can create a <col> element by using the document.createElement() method: var x = document.createElement(“COL”); Column Object Properties Property Description span […]
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 […]
Server-Sent Events allow a web page to get updates from a server. Server-Sent Events – One Way Messaging A server-sent event is when a web page automatically gets updates from a server. This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates […]
A web worker is a JavaScript running in the background, without affecting the performance of the page. What is a Web Worker? When executing scripts in an HTML page, the page becomes unresponsive until the script is finished. A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting […]
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 […]
Drag and Drop Drag and drop is a very common feature. It is when you “grab” an object and drag it to a different location. In HTML5, drag and drop is part of the standard: Any element can be draggable. Browser Support The numbers in the table specify the first browser version that fully supports […]
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 […]
Bold Object The Bold object represents an HTML <b> element. Access a Bold Object You can access a <b> element by using getElementById(): Example var x = document.getElementById(“myB”); Try it Yourself » Create a Bold Object You can create a <b> element by using the document.createElement() method: Example var x = document.createElement(“B”); Try it Yourself » Standard […]
Audio Object The Audio Object is new in HTML5. The Audio object represents an HTML <audio> element. Note: The <audio> element is not supported in Internet Explorer 8 and earlier versions. Access an Audio Object You can access an <audio> element by using getElementById(): Example var x = document.getElementById(“myAudio”); Try it Yourself » Create an Audio Object […]
Style object The Style object represents an individual style statement. Style Object Properties The “CSS” column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3). Property Description CSS alignContent Sets or returns the alignment between the lines inside a flexible container when the items do not use all available space 3 […]
The easiest way to play videos in HTML, is to use YouTube. Struggling with Video Formats? Earlier in this tutorial, you have seen that you might have to convert your videos to different formats to make them play in all browsers. Converting videos to different formats can be difficult and time-consuming. An easier solution is […]
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 […]
What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define graphics for the Web SVG is a W3C recommendation The HTML <svg> Element The HTML <svg> element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images. Browser Support The numbers in the table […]
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 […]
Migration from HTML4 to HTML5 This chapter is entirely about how to migrate from HTML4 to HTML5. This chapter demonstrates how to convert an HTML4 page into an HTML5 page, without destroying anything of the original content or structure. You can migrate from XHTML to HTML5, using the same recipe. Typical HTML4 Typical HTML5 <div id=”header”> <header> <div id=”menu”> […]
You can teach older browsers to handle HTML5 correctly. HTML5 Browser Support HTML5 is supported in all modern browsers. In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements. Because of this, you can “teach” older browsers to handle “unknown” HTML elements. You can even teach IE6 (Windows XP 2001) how […]
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. […]
