HTML5 is a modern iteration of the HyperText Markup Language, primarily designed to support multimedia content natively on mobile devices, eliminating heavy reliance on plugins like Flash through elements such as , , and .

Key enhancements in HTML5 include:

• Removal of outdated presentation tags (e.g., , )
• Introduction of new form controls for improved user input
• Semantic tags that clarify document structure
• Canvas for dynamic graphics rendering
• Local storage solutions for persistent data
• Enhanced APIs for device and data interaction

Advantages:

• Cross-platform compatibility: HTML5 applications (e.g., games) can be easily ported to various platforms (UC Open Platform, Opera Game Center, Facebook App Center) or packaged for distribution on App Store/Google Play.

Limitations:

• Inconsistent support across older desktop browsers may degrade user experience.

Semantic Structure Tags

HTML5 introduced semantic tags to improve document readability and accessibility. Key layout elements include:

For broad browser compatibility (especially older versions of IE), use the following aproach:

<!-- Include HTML5 Shiv for IE8 and below -->
<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

<header role="banner">Page Header</header>
<nav role="navigation">Main Navigation</nav>
<article role="article">Article Content</article>
<aside role="complementary">Sidebar</aside>
<footer role="contentinfo">Page Footer</footer>

Multimedia Elements

HTML5 natively supports audio and video playback without plugins.

Video Element

<video controls autoplay loop>
  <source src="promo.mp4" type="video/mp4">
  <source src="promo.ogg" type="video/ogg">
  <source src="promo.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Attributes:

• controls: Displays playback controls (play, pause, volume)
• autoplay: Starts playback automatical
• loop: Repeats the video continuously

Audio Element

<audio controls autoplay loop>
  <source src="podcast.mp3" type="audio/mpeg">
  <source src="podcast.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

Enhanced Form Controls and Attributes

HTML5 introduced new input types and attributes to streamline form handling.

Smart Input Types

<form action="/submit" method="post">
  <input type="email" placeholder="Enter your email" required>
  <input type="url" placeholder="Enter a valid URL" required>
  <input type="number" min="1" max="100" value="50">
  <input type="range" min="0" max="10" step="0.5">
  <input type="color" value="#ff0000">
  <input type="date">
  <input type="month">
  <input type="week">
  <input type="time">
  <input type="text" list="suggestions">
  <datalist id="suggestions">
    <option value="Option 1">First Option</option>
    <option value="Option 2">Second Option</option>
    <option value="Option 3">Third Option</option>
  </datalist>
  <input type="file" multiple>
  <button type="submit">Submit</button>
</form>

Key Attributes:

• placeholder: Displays temporary input hints
• required: Marks fields as mandatory
• multiple: Allows selecting multiple files
• list: Associates inputs with a for suggestions

Core HTML5 APIs

DOM Selection and Class Manipulation

// Select DOM elements using CSS selectors
const firstSection = document.querySelector('.section');
const allCards = document.querySelectorAll('.card');

// Class manipulation with classList
firstSection.classList.add('active');
firstSection.classList.remove('inactive');
console.log(firstSection.classList.contains('active')); // true
firstSection.classList.toggle('highlight');

Custom Data Attributes

HTML5 allows custom attributes prefixed with data-.

<div id="product" data-price="99" data-category="electronics"></div>

<script>
const product = document.getElementById('product');
console.log(product.dataset.price); // 99
console.log(product.dataset.category); // electronics

product.dataset.stock = 'in-stock';
console.log(product.outerHTML); // <div id="product" data-price="99" data-category="electronics" data-stock="in-stock"></div>
</script>

File Reading API (FileReader)

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', handleFileSelect);

function handleFileSelect(event) {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();

  reader.onload = function(e) {
    const result = e.target.result;
    console.log('File content:', result);
  };

  reader.onerror = function() {
    console.error('Error reading file');
  };

  reader.readAsText(file);
}

Network Status Detection

console.log('Online:', navigator.onLine);

window.addEventListener('online', function() {
  console.log('Network connection restored');
});

window.addEventListener('offline', function() {
  console.log('Network connection lost');
});

Geolocation API

function getCurrentLocation() {
  if (!navigator.geolocation) {
    console.error('Geolocation not supported');
    return;
  }

  navigator.geolocation.getCurrentPosition(
    position => {
      console.log('Latitude:', position.coords.latitude);
      console.log('Longitude:', position.coords.longitude);
    },
    error => {
      console.error('Geolocation error:', error.message);
    }
  );

  const watchId = navigator.geolocation.watchPosition(
    position => {
      console.log('Updated position:', position.coords.latitude, position.coords.longitude);
    }
  );

  // Stop watching after 30 seconds
  setTimeout(() => navigator.geolocation.clearWatch(watchId), 30000);
}

Local Storage

HTML5 provides two storage mechanisms:

• localStorage: Persistent storage (remains after browser close)
• sessionStorage: Session-based storage (clears on browser close)

// Local Storage
localStorage.setItem('username', 'john_doe');
console.log(localStorage.getItem('username')); // john_doe
localStorage.removeItem('username');
// localStorage.clear();

// Session Storage
sessionStorage.setItem('cart', JSON.stringify({ items: ['item1', 'item2'] }));
console.log(JSON.parse(sessionStorage.getItem('cart'))); // { items: ['item1', 'item2'] }

Canvas API

The element enables dynamic graphics rendering using JavaScript.

Basic Setup

<canvas id="canvas" width="400" height="200"></canvas>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
</script>

Drawing Basics

// Draw a line
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 150);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.lineCap = 'round';
ctx.stroke();

// Draw a filled rectangle
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 150, 50);

// Draw a stroked rectangle
ctx.strokeStyle = 'green';
ctx.strokeRect(50, 100, 150, 50);

// Clear a region
ctx.clearRect(75, 125, 100, 25);

Gradients

// Linear gradient
const linearGrad = ctx.createLinearGradient(0, 0, 400, 0);
linearGrad.addColorStop(0, 'blue');
linearGrad.addColorStop(0.5, 'green');
linearGrad.addColorStop(1, 'red');

ctx.fillStyle = linearGrad;
ctx.fillRect(0, 0, 400, 100);

// Radial gradient
const radialGrad = ctx.createRadialGradient(200, 100, 20, 200, 100, 100);
radialGrad.addColorStop(0, 'yellow');
radialGrad.addColorStop(1, 'orange');

ctx.fillStyle = radialGrad;
ctx.fillRect(0, 0, 400, 200);

Drawing Text

ctx.font = '30px Arial';
ctx.fillStyle = 'purple';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Hello Canvas', 200, 100);

ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.strokeText('Hello Canvas', 200, 100);

Drawing Images

const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
  // Draw entire image
  ctx.drawImage(img, 50, 50);

  // Draw scaled image
  ctx.drawImage(img, 150, 50, 100, 50);

  // Draw cropped image
  ctx.drawImage(img, 0, 0, 50, 50, 250, 50, 100, 50);
};

Drawing Arcs and Circles

// Draw a full circle
ctx.beginPath();
ctx.arc(200, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'cyan';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();

// Draw a quarter circle
ctx.beginPath();
ctx.arc(200, 100, 75, 0, Math.PI / 2);
ctx.strokeStyle = 'magenta';
ctx.lineWidth = 2;
ctx.stroke();

Transformations

// Translate origin
ctx.save();
ctx.translate(200, 100);
ctx.fillStyle = 'blue';
ctx.fillRect(-25, -25, 50, 50);
ctx.restore();

// Rotate
ctx.save();
ctx.translate(200, 100);
ctx.rotate(Math.PI / 4);
ctx.fillStyle = 'red';
ctx.fillRect(-25, -25, 50, 50);
ctx.restore();

// Scale
ctx.save();
ctx.translate(200, 100);
ctx.scale(2, 0.5);
ctx.fillStyle = 'green';
ctx.fillRect(-25, -25, 50, 50);
ctx.restore();

Animation

let x = 0;

function animate() {
  // Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw moving rectangle
  ctx.fillStyle = 'blue';
  ctx.fillRect(x, 50, 50, 50);

  // Update position
  x += 1;
  if (x > canvas.width) x = -50;

  // Request next frame
  requestAnimationFrame(animate);
}

animate();