Tag: html5

  • How to create a custom element (HTML tag) in HTML?

    Until HTML5 , reusing a piece of html code was not straightforward. Thanks to HTML5 , web components came into picture. Now you can create your own custom components and include them in your HTML code using custom tags. And you can reuse them anywhere else in your application by declaring the custom tags just…

  • How to add Google/Bing Search to your web page?

    Let’s say you have created a website. And you want your users to be able to do Google search or Bing search within your website. How do you do that? Just by including the below code: For Google search: For Bing search: The above two are basically html forms which make “GET” requests to the…

  • How to drag and drop a file into a HTML page using HTML5?

    As mentioned in the previous post, drag and drop got easier with HTML5. You just mark the element to be dragged as draggable and then drag and drop it on a HTML element. But how can files be dragged from , say your desktop , and then dropped on a HTML element, say a text…

  • How to implement drag and drop in HTML5?

    Dragging and dropping content in your html document got easier with HTML5. You just need to mark the element you want to drag as “draggable”, drag it and drop it using some simple javascript. Here are the steps: STEP1: Mark the HTML element to drag as draggable STEP2: Write a javascript function for the event…

  • How to show edits in a HTML document?

    Let’s say you created a HTML document with some content . You published it and your users have already started viewing it. And then suddenly you wanted to make some changes. You want to insert new data and delete old ones. You want to do this without affecting the user experience. How do you that?…

  • How to create an accordion in HTML5?

    Creating an accordion got easier in HTML5. You don’t need to use div element and javascript anymore. You just need to use the <details> element. The label in the accordion can be represented using <summary> element nested inside the <details> element and the data inside the accordion can then be represented using <p> (paragraph) element…

  • How to track your website link clicks using a single HTML attribute?

    Let’s say you have created a web app. You have lots of hyperlinks in your app, either to your own web pages or to external resources. You want to track those links: Who clicked it? When was it clicked? How many times a particular link was clicked? Until HTML5, you had to write javascript code…