Module 7: Advanced HTML & HTML5 APIs

1. Advanced HTML Elements

Iframes (<iframe>)

An iframe (inline frame) is used to embed another document (like a map or another webpage) within the current HTML document.

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Embed and Object Tags

While often replaced by HTML5's native <audio> and <video> tags, these are still used to embed external applications or interactive content (like PDF viewers).

<!-- Embedding a PDF file -->
<object data="resume.pdf" type="application/pdf" width="100%" height="500px">
  <p>It appears you don't have a PDF plugin for this browser. <a href="resume.pdf">Click here to download the PDF file.</a></p>
</object>

Data Attributes

HTML5 allows you to store extra information in standard, semantic HTML elements without needing non-standard hacks. You can create custom attributes prefixed with data-.

<article data-author="John Doe" data-category="web-dev" data-id="4923">
  <h3>Understanding Data Attributes</h3>
</article>

These attributes are completely invisible to the user but can be easily accessed and manipulated by JavaScript (using element.dataset).

HTML Entities

Reserved characters in HTML must be replaced with character entities. For example, if you use the < or > signs in your text, the browser might mix them up with tags.

• Non-breaking space:  
• Less than (<): <
• Greater than (>): >
• Ampersand (&): &
• Copyright (©): ©

2. HTML5 APIs

APIs (Application Programming Interfaces) allow HTML to interact with the device's hardware and browser features natively, usually paired with JavaScript.

The Canvas API

The <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). It can be used to draw graphs, combine photos, or create simple animations and games.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

Geolocation API

This API is used to get the geographical position of a user. Since this compromises privacy, the position is not available unless the user explicitly approves it.

Drag and Drop API

In HTML5, drag and drop is part of the standard: any element can be draggable by setting the draggable="true" attribute, and JavaScript handles the drag events.

Web Storage API (Local Storage)

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 website performance.

• window.localStorage: Stores data with no expiration date.
• window.sessionStorage: Stores data for one session (data is lost when the browser tab is closed).

3. Web Security Basics

As a front-end developer, you must ensure the HTML you write does not expose your users or your server to malicious attacks.

Cross-Site Scripting (XSS)

XSS occurs when an attacker injects malicious executable scripts into the code of a trusted application or website. If a form allows a user to input a comment, and they type <script>maliciousCode()</script>, the browser might execute it when displaying the comment.

Safe Input Handling

• Never trust user input. Always validate input on both the client side (HTML/JS) and the server side.
• Sanitize data: Strip out dangerous tags (like <script>) before saving it to a database.
• Escape output: When displaying user-generated content, encode it (convert < to <) so the browser renders it as plain text instead of executing it as code.

Form Security

Use the POST method for sensitive data (like passwords) rather than GET, as GET appends form data to the URL, making it visible in browser history and server logs.