Skip to content

Instantly share code, notes, and snippets.

@PrashantSinghGour
Created December 10, 2022 08:32
Show Gist options
  • Save PrashantSinghGour/400413d7b4a9f56e463ba9fd84d0ca5f to your computer and use it in GitHub Desktop.
Save PrashantSinghGour/400413d7b4a9f56e463ba9fd84d0ca5f to your computer and use it in GitHub Desktop.
Newly included features in HTML5.

HTML5

One can identify if the file is html or html5 if on the top of the html tag. there is a below declaration.

<!DOCTYPE html>

Earlier in HTML there was not media implementaion, HTML5 introduced media tags such as <video>, <audio>, <object>.

Video tag

  • It supports only 3 video formats i.e, MP4, WebM and ogg.
<video>
<source src="someVideo.itsExtension"></source>
Video is not supported in your browser.
</video>
  • The text written between video tags is only visible in browser if your browser doesn't support the tag.

Audio tag

  • It supports mp3, wav and ogg formats.
<audio>
  <source src="someAudio.itsExtension"></source>
  Audio is not supported in your brower.
</audio>

Object Tag

  • It is introduced to include plug-ins like Java Applet, PDF reader and Flash player.
  • One can use it for previewing html inside html or images.
<object data="image.jpg"> 

Vector Graphics

  • Initially in HTML to show graphics Flash, VML and silverlight was used.
  • HTML5 introduced 2 tags for the same i.e, <canvas>, <svg>.
  • With the help of canvas tag we can design or draw a graphics with the help of javascript.
  • svg stands for Scalable vector Graphics, it uses XML for creation of graphics.

WebStorage APIs

  • They are introduced in HTML5 such as localStorage and sessionStorage.
  • Both are used for persisting the data, but sessionStorage data gets cleared if tab or browser is closed, which is not the case with localStorage.

-- Session Storage

  // Save data to sessionStorage
  sessionStorage.setItem("key", "value");

  // Get saved data from sessionStorage
  let data = sessionStorage.getItem("key");

  // Remove saved data from sessionStorage
  sessionStorage.removeItem("key");

  // Remove all saved data from sessionStorage
  sessionStorage.clear();

-- Local Storage

// Save data to localStorage
localStorage.setItem('myCat', 'Tom');

 // Get saved data from localStorage
const cat = localStorage.getItem('myCat');

// Remove saved data from localStorage
localStorage.removeItem('myCat');

// Remove all saved data from localStorage
localStorage.clear();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment