Django 3 Web Development Cookbook - Fourth Edition

Using HTML5 data attributes

HTML5 introduces data-* attributes for passing data about a specific HTML element from the webserver to JavaScript and CSS. In this recipe, we will see a way to attach data efficiently from Django to custom HTML5 data attributes and then describe how to read the data from JavaScript with a practical example: we will render a Google Map with a marker at a specified geographical position; when we click on the marker, we will display the address in an information window.