What did you find? Did the nested anchor tag got created?
Let me tell you the answer. NO
The actual DOM structure is as follows:
|
To make the small story even more smaller, I suggest open web console (press f12) in a new tab in your browser and run the following script code: document.write('<a>OUTER LINK<a>INNER LINK</a><</a>'); After you have run the code, inspect the DOM. What did you find? Did the nested anchor tag got created? Let me tell you the answer. NO The actual DOM structure is as follows: Remember if you do the following, still it is not going to work: document.write('<a>OUTER LINK<div><a>INNER LINK</a></div></a>'); Now the DOM structure created is: In w3 specification it is mentioned: Links and anchors defined by the A element may not be nested.
1 Comment
Everyone who might have written even a single HTML document would have used a void element.In HTML4 they were described as empty elements but in HTML5 these elements have been renamed as "void elements". Most HTML elements have a start tag and an end tag that indicate where the element begins and where it ends. There is a group of elements that are exceptions to this rule. These elements are called empty or void and only have a start tag since they can’t have any content. According to the HTML5 specification void elements are not allowed to contain text, character data or comments under any circumstances and must have a start tag but are not allowed to have an end tag. These elements can have attributes but can’t have any content. Examples of such elements are: img, br, hr, and meta elements. One thing that may confuse people is that just because an element does not have any content in a specific example does not make it a void element. So, for example, if you have a paragraph tag without any content inside it like this: <p></p>, then that does not mean the p tag is a void element. Example: <input type="submit" value="Ok" /> We do not do the folowing: <input type="submit" value="Ok"></input> <!-- Bad! --> Everybody knows about web forms, right? Well and might be aware of the fact that these days creating a form in not just about creating a few <input > elements, an <input type="password"> with an <input > button. The web has expanded and forms have become even more complex with them. Let's face it – HTML forms have always been a pain. If there was a need for really sophisticated forms, the developers have to use JavaScript libraries and frameworks. I myself have widely used jQuery’s datepicker in forms because HTML 4 had no support for any input type that would take a date as input. Developers have been using such certainly matured solutions for the overall functionality and look and feel of the forms. HTML5 aims to standardize some of the most common rich form controls, making them render natively in the browser and obviating the need for these script-heavy workarounds. Though I am pretty sure that almost everyone is aware of what an input type is, yet I would like to mention here that the INPUT element defines a form control for the user to enter input. HTML5 has added a whole bunch of new values for the input element’s type attribute, making some big improvements in form creations. Let us look at the input types that HTML 5 has come up with, there are nearly 23 input types support in HTML5 out of which 13 are new introduced, isn’t that great. Not all browsers support all the new input types introduced in HTML5, but the good thing is that when viewed in a browser that doesn't support them, these input types fall back to text input. Input Types Supported in HTML5
Also one important point to know is that an input element with no type attribute specified represents the same thing as an input element with its type attribute set to "text". The good things about HTML 5 input types are not just finished with addition of over a dozen of them, but rather it’s much more than that… Let us look at some really great attributes that HTML5 has come up with: Placeholder texts One big improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder is actually a hint to the user of what can be entered in the input field. As soon as the user click on (or tab to) the input field and start typing, the placeholder text disappears. In HTML 4 this illusion of texts residing inside an empty HTML input type is done using scripts. But with HTML5 this has become so easy; this is how you can use a placeholder attribute: <input name="q" placeholder="Go to a Website"> Browsers that don’t support the placeholder attribute will simply ignore it. This is how it appears in firefox Autofocus Fields There is another great attribute of HTML5 that can help you save some time from writing script for delegating focus to a particular input type field as soon as the page loads. HTML5 introduces an autofocus attribute on all web form controls. Well what autofocus attribute does is as soon as the page loads, it moves the input focus to a particular input field. But because it’s just markup instead of script, the behavior will be consistent across all web sites. Here is how you can set a form field to autofocus: <input name="q" autofocus> As not every browser available today do support autofocus attribute therefore the browsers that don’t support the autofocus attribute will simply ignore it. Required Fields What do you do if you have to specify that a certain field in your form is required and should not be left blank before submitting the form? Absolutely you use script for that, don’t you? With HTML5 we do not have to do so!!! Here is how you can do so using HTML5: <input name="q" required> This is how it appears in Firefox if the user tries to submit the form without filling the field Further Form Validation Support: Now let us talk about the most exciting part of HTML 5 forms. This is the automatic input validation. When you create your user interface you always provide a client side validation for the various input field, like if your form has a field for email then you need to make sure that user enters a correct pattern of email for it similarly for urls also or for any numeric field you have to make sure that user does not enter a non-numeric values etc. There are always such validations to be implemented. For such validation you again have to write some scripts, don’t you have to? Even if you have created scripts with so much of toil yet there are chances that some of the visitors of the web page may have JavaScript disabled in their browsers. But with HTML 5 new input types most modern browsers validate the type of input. Example: if your form has <input type="email"> field, the browser automatically offers RFC compliant email validation. The good thing is that this validation works even if scripting is disabled. Now you may get how useful is that. Screenshots of email type validation and validation of numbers that take min-max attributes in Opera 11 is shown below: This mark up validation is active in HTML 5 by default. However HTML 5 also allows that you can disable these validations. All you have to do is to use the “novalidate” attribute with the form: <form novalidate> <input type="email" id="addr"> <input type="email" id="addr"> <form> That is all for now about the wonderful input types provided by HTML 5. Hope you too would have enjoyed exploring the good facts about HTML 5 input types.
I have always loved HTML5 for its amazing features support. No doubt web is never going to remain the same after HTML5. But it is unfortunate that not a single available browser today supports all the features of HTML5. When the HTML5 audio and video tags were first introduced, codec and browser incompatibilities made them difficult to use and unrealistic to deploy on large-scale.
While using HTML5 for one of my projects, I came across interesting information regarding how to make my HTMl5 audio and video tags work in major browsers available today. But before going ahead let us know how was a video or an audio embedded in a web page, prior to HTML5 and how is it done using HTML5? Embedding audio and video prior to HTML5: Prior to HTML5, we have to rely on third party plugins such as Silverlight or Flash to play an audio or video in on a website. In HTML4, if developers wanted to include video in a web page, they had to make use of the <object> element, which is a generic container for “foreign objects.” The code would have looked something like this: <object width="640" height="385"> <param name="movie" value="http://www.youtube.com/v/EdDc7sWjCL4?fs=1&hl=en_US"> </param> <param name="allowFullScreen" value="true"> </param> <param name="allowscriptaccess" value="always"> </param> <embed src="http://www.youtube.com/v/EdDc7sWjCL4?fs=1&hl=en_US" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"> </embed> </object> How does a browser treats an embedded plugin: Whenever a developer includes a plugin in his/her page, he/she is actually reserving a certain drawing area that the browser delegates to the plugin. The browser doesn't process or interpret anything happening in the plugin’s area. Normally, this is not a problem, but issues can arise, since a plugin sits in the front of a web page. For instance, if we have a drop down menu that overlaps the plug-in drawing area, the menu will appear behind the drawing area of the plug-in. This is not convenient and not user friendly at all Let us look at some more drawback of this using plug-ins:
HTML5 Solution HTML5 provides a competing, open standard for delivery of multimedia on the Web with its native video and audio elements and APIs. HTML5 specification comes with the native integration of video and audio in the browser using the <video> and <audio> elements. HTML5 video and audio tags were designed to make embedding a video as easy as embedding an image (remember the <img> tag in HTML4). They were also designed to give users a faster experience. How to embed video using HTML5: we can embed video into your page using the following code. <video src="video.mp4" width="320" height="200" controls preload></video> How to embed audio using HTML5: we can embed audio into your page using the following code. <audio src="audio.mp3" controls preload></audio> Do all browsers support this audio and video tags of HTML5? Unfortunately, older browsers don't support HTML5 video and audio tags, and even modern browsers don't support a consistent set of video codecs, making embedding a video rather difficult. Cross browser Solutions for playing Videos using HTML5 video and audio tags: 1.) Using Fallback: In order to ensure that older browsers can view our videos, we should rely on an Adobe Flash fallback. HTML included between, for example, the opening and closing tags of media elements is processed by browsers that don't support HTML5 media. We can take advantage of this fact to provide alternative fallback media for those browsers.To allow visitors with non-HTML5-ready browsers to play the video, we can provide an alternative with Flash embedded that plays the same MP4 we supply for Internet Explorer 9, Safari and Chrome. <video id="video1" width="640" height="360" > <source src="video.mp4" > <source src="video.webm" > <object width="640" height="360" classid ="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=8,0,0,0" > <param name="SRC" value="player.swf?file=video.mp4"> <embed src="player.swf?file=video.mp4" width="640"height="360"></embed> <p>Please update your browser or install Flash</p> </object> </video> This markup presents all browsers with some way to play back video. For more information on how and why this nested markup works, see Kroc Camen’s “Video for Everybody” (camendesign.com/code/video_for_everybody). But the drawback with this approach is that we have to encode and store at least two media files. 2.)HTML5 Video and Audio JavaScript Libraries: There are several libraries and scripts online that can help us in making sure that older browsers can view our videos. Some of the best open source libraries that make HTML5 video and audio easier by integrating all of the relevant code into a single package are MediaElement.js, jPlayer, VideoJS, Projekktor, Playr and LeanBack. For example by using MediaElement.js. Instead of offering an HTML5 player to modern browsers and a totally separate Flash player to older browsers, MediaElement.js upgrades them with custom Flash and Silverlight plugins that mimic the HTML5 MediaElement API. It makes IE6-8 supports <video> and <audio>, Firefox and Opera support h.264, and Safari and IE9 support WebM. After downloading the latest source code from http://github.com/johndyer/mediaelement/ Add Scripts and Stylesheet as : <code><script src="jquery.js"></script> <script src="mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="mediaelementplayer.css" /></code> To support IE6-8, this code must appear in the <head> tag. Explore this library at http://mediaelementjs.com/ The HTML5 history API is a standardized way to manipulate the browser history via script. window.history returns a reference to the History object, which provides an interface for manipulating the browser session history (pages visited in the tab or frame that the current page is loaded in).
Syntax var historyObj = window.history; Using history history.back(); // equivalent to clicking back button history.go(-1); // equivalent to history.back(); History Interface interface History { readonly attribute long length; readonly attribute any state; void go(optional long delta); void back(); void forward(); void pushState(any data, DOMString title, optional DOMString url); void replaceState(any data, DOMString title, optional DOMString url); }; Previous version of HTML had a part of this API which included navigating the history. The new parts in HTML5 support a way to add entries to the browser history, to visibly change the URL in the browser location bar without triggering page refresh, and an event that fires when those entries are removed from the stack by the user pressing the browser’s back button. The support for HTML5 history API is currently limited to the very latest versions of a few browsers. Explore more about this API : http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#the-history-interface http://diveintohtml5.info/history.html |
Raksha Singh
Software Developer Categories
All
Archives
February 2017
|