Basic HTML

Home / Topic / Basic HTML / HTML5 APIs and Advanced Elements

HTML5 APIs and Advanced Elements

Introduction to HTML5 APIs

HTML5 introduces new APIs that allow adding advanced functionalities directly in the browser. These tools enrich the user experience and make web applications more interactive and efficient.

Enhancements in Audio and Video (`<audio>`, `<video>`, `<source>`)

With HTML5, the integration of audio and video has become more versatile. You can use the <source> tag within <audio> and <video> to provide different formats, ensuring compatibility across all browsers.

html

"This video code uses two sources with different formats. If the browser doesn't support the first, it will try the second, enhancing compatibility."

Geolocation API

The Geolocation API allows obtaining the user’s location, with their consent, to display relevant content. It is ideal for map applications or location-based services.

javascript

"This example uses the Geolocation API to obtain the user's location. Latitude and longitude are displayed in the console if the user grants permission."

Drag and Drop API

The Drag and Drop API allows moving elements on a web page interactively. With draggable and drag events, you can create dynamic interfaces.

html

"In this example, the div is draggable. When the drag starts, the setData event sets the content to be dragged, in this case, the text that says 'Dragged content'."

Basic HTML Canvas (`<canvas>`)

The <canvas> tag allows creating 2D graphics and animations using JavaScript. It is useful for graphics, games, and visualizations.

html

"Here we use the canvas tag with JavaScript to draw a blue rectangle. First, we select the canvas and then define the color and size of the rectangle."

Web Storage (Local and Session Storage)

HTML5 includes localStorage and sessionStorage to store data in the browser. localStorage persists even after closing the browser, while sessionStorage is cleared when the session ends.

javascript

"This code uses localStorage to store and retrieve the name 'John'. The stored information remains available even after closing the browser."

Chapter Closure

Now you know how to use some of the advanced APIs and elements HTML5 has to offer. In the next chapter, we will explore how to embed external content on your website via iFrames and other embedding techniques.

Back to previous chapter

Mark as read and continue

Ask me anything