Sometimes you need to define relative path in a html page. HTML provides <base> tag for defining relative urls in a html page. The href attribute of <base> tag specifies the base URL for all relative URLs in the page. There can be at maximum one <base> element in a document, and it must be inside the <head> element. There is no difference between HTML 4.01 and HTML5. See the running example of html <base> tag.
As we had discussed many useful html5 elements and attributes like canvas, placeholders, figure, slider, header, audio etc.
Recently, I have find extremely useful html5 attribute. it’s a html5 download attribute that’s very simple to use. The download attribute allows you to set a separate file name for download using anchor tag. you just need to pass download attribute with this anchor tag to open download dialog box.
HTML5 has provide us with useful and magical HTML attribute: placeholder and many more.
There is another new attribute introduces by HTML5, that’s hidden atribute. This atribute functions just like CSS “display:none;”. According to HTML5 specification, any element which has the hidden attribute should be considered irrelevant and thus should not be rendered by the browser. It’s simply like this:
<canvas> is a HTML5 element which is used to draw graphics using scripting. This element can be used to draw graphs, make photo compositions or do simple animations.
This tutorial describes how to implement the <canvas> element in your HTML pages. The examples provided should give you some clear ideas what you can do with <canvas> and can be used to start building your own implementations.
The markup for the canvas element will be like this:
<canvas id=”myCanvas” width=”480″ height=”90″ style=”border:1px solid #000000;”></canvas>
Like <img> element, canvas has a width and height set in the markup to give it an actual size. And because canvas requires scripting for its full capabilities, I’ve added an id attribute that will allow us to target it using either JavaScript or a JavaScript web development library like jQuery or MooTools.
With the popularity of HTML5 and CSS3, HTML5 templates also getting very popular these days because all professional HTML5 templates are compatible to all browsers with its functionality and features, and with the release of HTML5 / CSS3 it has become even more popular among designers because of the additional and great features. These templates offer qick and easy solution for building modern websites. Here in this post we are presenting popular professional HTML5 and CSS3 templates that are free to download.
Vivid Photo is a modern and elegant Photography Website Template. It is cross browser compatible and created to suit needs of photographers. The template is made using HTML5, jQuery and CSS3 with no external fonts, HTML5 Contact Form and a lot more stuff for various functionalities. You are free to use it for your personal as well as commercial projects. It is released under New BSD License.
HTML5 presents many new features that makes your web forms more functional. Here we will discuss few exciting HTML5 features that definitly improve your forms and also make them more functional and user friendly.
Whenever we deisgn a web form, there is always one or more mandatory fields and we have to impliment functions for that. but HTML5 introduces a “required” attribute to make input field as required:
As you can see above that it will save you a lot of time.
There are two similar attributes are also available: optional and invalid. They work exactly as the required attribute explained above.
HTML5 has introduced many interesting and usefull features like semantic tags , javascipt API’s form, Audio, video and many more. among them one of my favorites is the placeholder attribute to INPUT elements. The placeholder attribute shows text in a field until the field is focused upon, then hides the text.
As we had created placeholders for textboxes using javascript but it had a many probelm. actually when we set the value attribute initially, but, as soon as the user deletes that text and clicks away, the input will be left blank again. The HTML5 placeholder attribute has solved this issues.
HTML5 introduces many interesting elements like audio, video, Canvas, Drag and Drop, SVG, figure, figcaption etc. Here in this article we we’ll discuss figure and figcaption elements. Actually the <figure> element is used in conjunction with <figcaption> element to mark up photos, diagrams etc.
As above mentioned, The <figure> element is used with the element to mark up photos, diagrams etc.
An image within a <figure> element without a caption:
Here we’ll discuss the New HTML5 Doctype. because If you are still using traditional complex, hard to memorize XHTML doctype. it is right time to switch to simple HTML5 Doctype.
Unlike HTML, HTML5 intoduces a new range type of Input. The range type is used for input fields that have values from a range of numbers. So here in this post we will learn how to create smooth slider using HTML5 Range Input type.
There are attributes like max, min, step and value by which we can set restrictions on what numbers are accepted.
So from here we will proceed to the real example of HTML5 Range Input by creating a simple Slider step by step.
