Home » HTML5

HTML5

How To Create A Cross Browser Compatible HTML Progress Bar?

One of the key elements of any modern website that you would have come across on the internet is an HTML progress bar. HTML5 progress elements have become a fundamental part of web design that is used for a wide array of tasks be it to display file download/upload status, file transfer, registration, installation or any task which is in ...

Read More »

Are Your HTML5 Input Fields Cross Browser Compatible?

Forms are integral part of your online business. Being the primary source of data collection for your visitors, their appearance on the internet matters more than you can think of! Keep in mind though, that even if you do design them neat and catchy, they may end up looking absurd when accessed through different browsers and browser versions. In this ...

Read More »

HTML5 – Styling a Progress Bar

The progress tag introduced in HTML5 can be used to represent the progress of a task. For example, the following code: <progress value="80" max="100"></progress> displays: Unsupported browser Different browsers display the progress bar in different styles: Changing the colour of the progress bar: Now let’s say that you wish to change the colour of the progress bar so that it ...

Read More »

HTML5 Keyboard Input Element Example

In this post we will take a look at the kbd Html tag. This tag allows us to stylize keyboard input in a way that highlights the semantics of the enclosed text. What I meant there was that the text would stand out from surrounding text and would indicate as an input provided by the user using an input device ...

Read More »

HTML5 360 Viewer Example

In this article we will look at something interesting that has a lot of fun. We look at how to build a 360 degree product viewer and a 360 degree panoramic image viewer. You must have noticed the 360 degrees viewer on popular e-Commerce sites where you can rotate and view the product from all around. Also, new smartphones these ...

Read More »

HTML5 Viewport Example

In this article we will take a look at what the Viewport is and how we can tweak it using the meta tag. To demonstrate the concept we will be building a sample application. I will take things one step at a time by first listing the tools & technologies used before moving on to other details. Finally ending with ...

Read More »

HTML5 noscript Tag Example

In this article we look at how to use the noscript tag. This tag enables us to present alternate content to the user if they have JavaScript disabled in their browsers. The tag presents content wrapped inside in case JavaScript is disabled. If JavaScript is enabled then the content of this tag is not displayed. So let’s get going with ...

Read More »

HTML5 Internationalization Example

In this post we will look at Internationalization in HTML5. We will be translating the web page to use the language chosen by the user. At the same time we will keep the process passive, in the sense that, instead of making the decision on language ourselves, we will let the user choose a language of choice from a set ...

Read More »

HTML5 Text Editor Example

In this post, we will take a look at the implementation of an In-browser text editor. The editor will provide basic editing functionality like making the text bold, italic, underline, strikeout and indentation, alignment of blocks of text. A text editor provides useful functionality that can be leveraged in blog comments section apart from other kinds of websites. 1. Introduction ...

Read More »