Why Does HTML Think “chucknorris" Is A Color? And 10 More FAQs, Answered

HTML, Hypertext Markup Language, is the standard markup language used mainly for creating pages to display on World Wide Web (WWW). It is very simple, easy to learn, and allows you to create amazing websites. So, today we will be checking out the 11 most asked questions about HTML. 11 Most Asked Questions About HTML 1. Why does HTML think “chucknorris” is a color? Answer: It’s a holdover from the Netscape days: Missing digits are treated as 0[…]. An incorrect digit is simply interpreted as 0. For example the values #F0F0F0, F0F0F0, F0F0F, #FxFxFx and FxFxFx are all the same. It is from the blog post which covers it in great detail, including varying lengths of color values, etc. If we apply the rules in turn from the blog post, we get the following: A little rant about Microsoft Internet Explorer’s color parsing Replace all nonvalid hexadecimal characters with 0’s class pln chucknorris becomes c00c0000000 span code Pad out to the next total number of characters divisible by 3 (11 -> 12) class pln c00c span span class lit 0000 span span class lit 0000 span code Split into three equal groups, with each component representing the corresponding color component of an RGB color: ( , , ) class pln RGB span span class pun span span class pln c00c span span class pun span span class lit 0000 span span class pun span span class lit 0000 span span class pun span code Truncate each of the arguments from the right down to two characters Which gives the following result: ( , , ) = # ( ) class pln RGB span span class pun span span class pln c0 span span class pun span span class lit 00 span span class pun span span class lit 00 span span class pun span span class pun span span class com C00000 or RGB 192, , 0 0 span code Here’s an example demonstrating the attribute in action, to produce this “amazing” color swatch: bgcolor &lt;tr&gt; &lt;td cellpadding width align &lt;td cellpadding width align style &lt;td cellpadding width align style &lt; span> &lt;td cellpadding width align &lt;td cellpadding width align &lt;td cellpadding width align &lt; span> &lt;table&gt; span class "tag" span class "tag" span class "tag" /span> bgcolor span class "pun" span "chucknorris" span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span &gt; span class "tag" span chuck norris span class "pln" span &lt;/td&gt; span class "tag" span class "tag" /span> bgcolor span class "pun" span "mrt" span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span color span class "kwd" span : span class "pun" span #ffffff span class "lit" span " span class "atv" span &gt; span class "tag" span Mr T span class "pln" span &lt;/td&gt; span class "tag" span class "tag" /span> bgcolor span class "pun" span "ninjaturtle" span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span color span class "kwd" span : span class "pun" span #ffffff span class "lit" span " span class "atv" span &gt; span class "tag" span ninjaturtle span class "pln" span &lt;/td&gt; span class "tag" span class "tag" /tr&gt; span class "tag" span class "tag" /span> bgcolor span class "pun" span "sick" span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span &gt; span class "tag" span sick span class "pln" span &lt;/td&gt; span class "tag" span class "tag" /span> bgcolor span class "pun" span "crap" span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span &gt; span class "tag" span crap span class "pln" span &lt;/td&gt; span class "tag" span class "tag" /span> bgcolor span class "pun" span "grass" span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span &gt; span class "tag" span grass span class "pln" span &lt;/td&gt; span class "tag" span class "tag" /tr&gt; span class "tag" span code Why does produce a yellow color? Well, if we apply the rules, the string is: bgcolor="chucknorr" =&gt; [ c00c00000 span class "pln" span =&gt; span class "pun" span c00 c00 span class "pln" span 000 span class "lit" span class "pun" span c0 c0 span class "pln" span 00 span class "lit" span class "pun" span RGB span class "pln" span ( span class "pun" span 192 span class "lit" span , span class "pun" span class "lit" 192 /span> , span class "lit" span )] span class "pun" span code Which gives a light yellow gold color. As the string starts off as 9 characters, we keep the second C this time around hence it ends up in the final color value. We originally encountered this when someone pointed out you could do and, well, it comes out brown. color="crap" 2. How do you disable browser Autocomplete on a web form field/input tag? Answer: Firefox 30 ignores for passwords, opting to prompt the user instead of whether the password should be stored on the client. Note the following from May 5, 2014: autocomplete="off" commentary The password manager prompts if it wants to save a password. Passwords are not saved without permission from the user. always We are the third browser to implement this change, after IE and Chrome. According to the documentation, the Boolean form element attribute prevents form data from being cached in older browsers. Mozilla Developer Network autocomplete &lt;input type = name = autocomplete = /&gt; class "tag" class "atn" class "pun" class "atv" "text" class "atn" class "pun" class "atv" "foo" class "atn" class "pun" class "atv" "off" class "tag" Alternative Answer: In addition to , you could also have your form field names be randomized by the code that generates the page, perhaps by adding some session-specific string to the end of the names. When the form is submitted, you can strip that part off before processing them on the server-side. This would prevent the web browser from finding context for your field and also might help prevent XSRF attacks because an attacker wouldn’t be able to guess the field names for a form submission. autocomplete=off 3. How to change a class of an HTML element in response to an event using JavaScript? onclick Answer: Modern HTML5 Techniques for changing classes Modern browsers have added which provides methods to make it easier to manipulate classes without needing a library: classList document . getElementById ( ). classList . ( ); document . getElementById ( ). classList . ( ); ( document . getElementById ( ). classList . contains ( ) ) document . getElementById ( ). classList . toggle ( ); class "pln" class "pun" class "pln" class "pun" class "str" "MyElement" class "pun" class "pln" class "pun" class "pln" add class "pun" class "str" 'MyClass' class "pun" class "pln" class "pun" class "pln" class "pun" class "str" "MyElement" class "pun" class "pln" class "pun" class "pln" remove class "pun" class "str" 'MyClass' class "pun" class "kwd" if class "pun" class "pln" class "pun" class "pln" class "pun" class "str" "MyElement" class "pun" class "pln" class "pun" class "pln" class "pun" class "str" 'MyClass' class "pun" class "pun" class "pln" class "pun" class "pln" class "pun" class "str" "MyElement" class "pun" class "pln" class "pun" class "pln" class "pun" class "str" 'MyClass' class "pun" Unfortunately, these do not work in Internet Explorer prior to v10, though there is a to add support for it to IE8 and IE9, available from . It is, though, getting more and more . shim this page supported Simple cross-browser solution The standard JavaScript way to select an element is using , which is what the following examples use – you can, of course, obtain elements in other ways, and in the right situation may simply use this instead – however, going into detail on this is beyond the scope of the answer. document.getElementById("Id") To change all classes for an element: To replace all existing classes with one or more new classes, set the className attribute: document span class "pln" span . span class "pun" span getElementById span class "pln" span ( span class "pun" span "MyElement" span class "str" span ). span class "pun" span className span class "pln" span = span class "pun" span class "str" "MyClass" /span> ; code (You can use a space-delimited list to apply multiple classes.) To add an additional class to an element: To add a class to an element, without removing/affecting existing values, append a space and the new class name, like so: document span class "pln" span . span class "pun" span getElementById span class "pln" span ( span class "pun" span "MyElement" span class "str" span ). span class "pun" span className span class "pln" span += span class "pun" span class "str" " MyClass" /span> ; code To remove a class from an element: To remove a single class to an element, without affecting other potential classes, a simple regex replace is required: document span class "pln" span . span class "pun" span getElementById span class "pln" span ( span class "pun" span "MyElement" span class "str" span ). span class "pun" span className span class "pln" span = span class "pun" span document span class "pln" span . span class "pun" span getElementById span class "pln" span ( span class "pun" span "MyElement" span class "str" span ). span class "pun" span className span class "pln" span . span class "pun" span replace span class "pln" span ( span class "pun" span class "str" /(?:^|\s)MyClass(?!\S)/ span g span class "pln" span , span class "pun" span class "str" '' /span> ) span class "com" span code An explanation of this regex is as follows: (?:^| \s ) # Match the start of the string , or any single whitespace character MyClass # The literal text for the classname to remove (?! \S ) # Negative lookahead to verify the above is the whole classname # Ensures there is no non - space character following # ( i . e . must be end of string or a space ) code span class "pun" span span class "pln" span span class "pun" span span class "pun" span span class "typ" span span class "pln" span span class "kwd" span span class "pln" span span class "pun" span span class "pln" span span class "typ" span span class "pun" span span class "typ" span span class "pln" span span class "kwd" span span class "pln" span span class "pun" span span class "pln" span span class "pun" span span class "pun" span span class "typ" span span class "pln" span span class "pun" span span class "typ" span span class "pln" span span class "pun" span span class "pln" span span class "pun" span span class "pun" span span class "pln" span span class "pun" span span class "pln" span span class "pun" span span class "pln" span span class "kwd" span span class "pln" span span class "pun" span code The flag tells the replace to repeat as required, in case the class name has been added multiple times. g To check if a class is already applied to an element: The same regex used above for removing a class can also be used as a check as to whether a particular class exists: ( ) if span class "kwd" span class "pun" span document span class "pln" span . span class "pun" span getElementById span class "pln" span ( span class "pun" span "MyElement" span class "str" span ). span class "pun" span className span class "pln" span . span class "pun" span match span class "pln" span ( span class "pun" span /(?:^|\s)MyClass(?!\S)/ span class "str" span ) span class "pun" span class "pun" /span></ Assigning these actions to onclick events: Whilst it is possible to write JavaScript directly inside the HTML event attributes (such as ) this is not recommended behavior. Especially on larger applications, more maintainable code is achieved by separating HTML markup from JavaScript interaction logic. onclick="this.className+=' MyClass'" The first step to achieving this is by creating a function, and calling the function in the onclick attribute, for example: &lt; script type = &gt; function changeClass (){ } &lt;/ script &gt; ... &lt; button onclick = &gt; My Button &lt;/ button &gt; class "pun" class "pln" class "pun" class "str" "text/javascript" class "pun" class "kwd" class "pln" class "pun" class "com" // Code examples from above class "pun" class "pun" class "pln" class "pun" class "pun" class "pun" class "pln" class "pun" class "str" "changeClass()" class "pun" class "typ" class "typ" class "pun" class "pln" class "pun" (It is not required to have this code in script tags, this is simply for the brevity of example, and including the JavaScript in a distinct file may be more appropriate.) The second step is to move the onclick event out of the HTML and into JavaScript, for example using addEventListener. &lt; script type = &gt; function changeClass (){ } window . onload = function (){ document . getElementById ( ). addEventListener ( , changeClass ); } &lt;/ script &gt; ... &lt; button id = &gt; My Button &lt;/ button &gt; class "pun" class "pln" class "pun" class "str" "text/javascript" class "pun" class "kwd" class "pln" class "pun" class "com" // Code examples from above class "pun" class "pln" class "pun" class "pln" class "pun" class "kwd" class "pun" class "pln" class "pun" class "pln" class "pun" class "str" "MyElement" class "pun" class "pln" class "pun" class "str" 'click' class "pun" class "pln" class "pun" class "pun" class "pun" class "pln" class "pun" class "pun" class "pun" class "pln" class "pun" class "str" "MyElement" class "pun" class "typ" class "typ" class "pun" class "pln" class "pun" (Note that the window.onload part is required so that the contents of that function are executed the HTML has finished loading – without this, the MyElement might not exist when the JavaScript code is called, so that line would fail.) after JavaScript Frameworks and Libraries The above code is all in standard JavaScript, however, it is common practise to use either a framework or a library to simplify common tasks, as well as benefit from fixed bugs and edge cases that you might not think of when writing your code. Whilst some people consider it overkill to add a ~50 KB framework for simply changing a class, if you are doing any substantial amount of JavaScript work, or anything that might have unusual cross-browser behavior, it is well worth considering. The examples above have been reproduced below using , probably the most commonly used JavaScript library (though there are others worth investigating too). (Very roughly, a library is a set of tools designed for a specific task, whilst a framework generally contains multiple libraries and performs a complete set of duties.) jQuery (Note that here is the jQuery object.) $ y: Changing Classes with jQuer ) $ span class "pln" span ( span class "pun" span '#MyElement' span class "str" span ). span class "pun" span addClass span class "pln" span ( span class "pun" span 'MyClass' span class "str" span ); span class "pun" span $ span class "pln" span ( span class "pun" span '#MyElement' span class "str" span ). span class "pun" span removeClass span class "pln" span ( span class "pun" span 'MyClass' span class "str" span ); span class "pun" span class "kwd" if /span> ( span class "pln" span ( span class "pun" span '#MyElement' span class "str" span ). span class "pun" span hasClass span class "pln" span ( span class "pun" span 'MyClass' span class "str" span ) span class "pun" span class "pun" /span> $ span class "pln" span ( span class "pun" span '#MyElement' span class "str" span ). span class "pun" span toggleClass span class "pln" span ( span class "pun" span 'MyClass' span class "str" span ); span class "pun" span code Assigning a function to a click event with jQuery: $ span class "pln" span ( span class "pun" span '#MyElement' span class "str" span ). span class "pun" span click span class "pln" span ( span class "pun" span changeClass span class "pln" span ); span class "pun" span code or, without needing an id: $ span class "pln" span ( span class "pun" span ':button:contains(My Button)' span class "str" span ). span class "pun" span click span class "pln" span ( span class "pun" span changeClass span class "pln" span ); span class "pun" span code 4. How to store Objects in HTML5 localStorage? Answer: Looking at the , , and documentation, the functionality seems to be limited to handle only string key/value pairs. Apple Mozilla Mozilla again A workaround can be to your object before storing it, and later parse it when you retrieve it: stringify { var span class "kwd" span testObject span class "pln" span = span class "pun" span class "pun" /span> 'one' span class "pun" span class "lit" 1 /span> , span class "str" span : span class "pun" span class "lit" 2 /span> , span class "str" span : span class "pun" span class "lit" 3 /span> }; span class "com" span localStorage span class "pln" span . span class "pun" span setItem span class "pln" span ( span class "pun" span 'testObject' span class "str" span , span class "pun" span JSON span class "pln" span . span class "pun" span stringify span class "pln" span ( span class "pun" span testObject span class "pln" span )); span class "pun" span class "com" // Retrieve the object from storage class "kwd" var /span> retrievedObject span class "pun" span localStorage span class "pln" span . span class "pun" span getItem span class "pln" span ( span class "pun" span 'testObject' span class "str" span ); span class "pun" span console span class "pln" span . span class "pun" span log span class "pln" span ( span class "pun" span 'retrievedObject: ' span class "str" span , span class "pun" span JSON span class "pln" span . span class "pun" span parse span class "pln" span ( span class "pun" span retrievedObject span class "pln" span )); span class "pun" span code Alternative Answer: A minor improvement on a : variant Storage . prototype . setObject = function ( key , ) { . setItem ( key , JSON . stringify ( )); } Storage . prototype . getObject = function ( key ) { = . getItem ( key ); &amp;&amp; JSON . parse ( ); } class "typ" class "pun" class "pln" class "pun" class "pln" class "pun" class "kwd" class "pun" class "pln" class "pun" class "pln" value class "pun" class "pun" class "kwd" this class "pun" class "pln" class "pun" class "pln" class "pun" class "pln" class "pun" class "pln" class "pun" class "pln" value class "pun" class "pun" class "typ" class "pun" class "pln" class "pun" class "pln" class "pun" class "kwd" class "pun" class "pln" class "pun" class "pun" class "kwd" var class "pln" value class "pun" class "kwd" this class "pun" class "pln" class "pun" class "pln" class "pun" class "kwd" return class "pln" value class "pun" class "pln" class "pun" class "pln" class "pun" class "pln" value class "pun" class "pun" Because of , will return if is not in Storage. It also will not throw a exception if is (the empty string; cannot handle that). short-circuit evaluation getObject() immediately null key SyntaxError value "" JSON.parse() 5. How to make a div not larger than its contents? Answer: The solution is to set to . div display: inline-block 6. Is it , , or in HTML 5? Answer: Simply is sufficient. The other forms are there for compatibility with XHTML; to make it possible to write the same code as XHTML, and have it also work as HTML. Some systems that generate HTML may be based on XML generators, and thus do not have the ability to output just a bare tag; if you’re using such a system, it’s fine to use , it’s just not necessary if you don’t need to do it. Very few people actually use XHTML, however. You need to serve your content as for it to be interpreted as XHTML, and that will not work in old versions of IE – it will also mean that any small error you make will prevent your page from being displayed in browsers that do support XHTML. So, most of what looks like XHTML on the web is actually being served, and interpreted, as HTML. See for some more information. application/xhtml+xml Serving XHTML as text/html Considered Harmful Alternative Answer: This quote from the provides the answer: HTML 5 Reference Draft The term is used to designate elements that must be . These requirements only apply to the HTML syntax. In XHTML, all such elements are treated as normal elements, but must be marked up as empty elements. These elements are forbidden from containing any content at all. In HTML, these elements have a only. The syntax may be used. The must be omitted because the element is automatically closed by the parser. 3.2.2.2 Void Elements void elements empty start tag self-closing tag end tag HTML Example: A void element in the HTML syntax. This is not permitted in the XHTML syntax. ;hr ; &lt &gt Example: A void element using the HTML- and XHTML-compatible self-closing tag syntax. ;hr/ ; &lt &gt XHTML Example: A void element using the XHTML-only syntax with an explicit end tag. This is not permitted for void elements in the HTML syntax. ;hr ; ;/hr ; &lt &gt &lt &gt 7. What are valid values for the id attribute in HTML? Answer: For , the answer is technically: HTML 4 ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and periods (“.”). is even more permissive, saying only that id must contain at least one character and may not contain any space characters. HTML 5 The id attribute is case sensitive in . XHTML As a purely practical matter, you may want to avoid certain characters. Periods, colons, and ‘#’ have special meaning in CSS selectors, so you will have to escape those characters using a or a double backslash in a . Think about how often you will have to escape a character in your stylesheets or code before you go crazy with periods and colons in ids. backslash in CSS selector string passed to jQuery For example, the HTML declaration is valid. You can select that element in CSS as and in jQuery like so: . But if you forget the backslash, , you will have a perfectly valid selector looking for an element with id and also having class . This is a bug that is easy to overlook. You might be happier, in the long run, choosing the id (a hyphen rather than a period), instead. #first\.name $('#first\\.name') $('#first.name') first name first-name You can simplify your development tasks by strictly sticking to a naming convention. For example, if you limit yourself entirely to lower-case characters and always separate words with either hyphens or underscores (but not both, pick one and never use the other), then you have an easy-to-remember pattern. You will never wonder “was it or ?” because you will always know that you should type . Prefer camel case? Then limit yourself to that, no hyphens or underscores, and always, consistently use either upper-case or lower-case for the first character, don’t mix them. firstName FirstName first_name A now very obscure problem was that at least one browser, Netscape 6, . That meant that if you had typed in your HTML (lower-case ‘f’) and in your CSS (upper-case ‘F’), that buggy browser would have failed to set the element’s color to red. incorrectly treated id attribute values as case-sensitive id="firstName" #FirstName { color: red } 8. How to vertically align text next to an image? Answer: Actually, in this case, it’s quite simple: apply the vertical-align to the image. Since it’s all in one line, it’s really the image you want to be aligned, not the text. &lt;div&gt; &lt;img src &lt;span &lt; span> &lt;!-- moved "vertical-align:middle" style from span to img --&gt; span class "com" span class "tag" span class "tag" /span> style span class "pun" span " span class "atv" span vertical-align span class "kwd" span : span class "pun" span middle span class "pln" span " span class "atv" span class "atn" /span> = span class "atv" span &gt; span class "tag" span class "tag" /span> style span class "pun" span "" span class "atv" span &gt; span class "tag" span Works. span class "pln" span &lt;/span&gt; span class "tag" span class "tag" /div&gt; code Tested in FF3. Now you can use flexbox for this type of layout. display align-items } . span class "pun" span box span class "pln" span { span class "pun" span class "kwd" /span> : span class "pln" span ; span class "pun" span class "kwd" /span> : span class "pln" span ; span class "pun" span class "pun" /span> = >= &lt;img &lt;span &lt; span> &lt;div span class "tag" span class "atn" span "box" span class "atv" span &gt; span class "tag" span class "tag" /span> src span class "pun" span "https://placehold.it/60x60" span class "atv" span &gt; span class "tag" span class "tag" /span> style span class "pun" span "" span class "atv" span &gt; span class "tag" span Works. span class "pln" span &lt;/span&gt; span class "tag" span class "tag" /div&gt; code Alternative Answer: Here are some simple techniques for vertical-align: One-line vertical-align:middle This one is easy: set the line-height of the text element to equal that of the container. &lt;img height &lt;span &lt; span> &lt;div&gt; span class "tag" span class "tag" /span> style span class "pun" span " span class "atv" span width span class "kwd" span : span class "pun" span 30px span class "lit" span ; span class "pun" span class "kwd" /span> : span class "lit" span ; span class "pun" span " span class "atv" span &gt; span class "tag" span class "tag" /span> style span class "pun" span " span class "atv" span line-height span class "kwd" span : span class "pun" span 30px span class "lit" span ; span class "pun" span " span class "atv" span &gt; span class "tag" span Doesn't work. span class "pln" span &lt;/span&gt; span class "tag" span class "tag" /div&gt; code Multiple-lines vertical-align:bottom Absolutely position an inner div relative to its container. style &lt;div &lt; span> &lt;div span class "tag" span class "atn" /span> = span class "atv" span position span class "kwd" span : span class "pun" span relative span class "pln" span ; span class "pun" span width span class "kwd" span : span class "pun" span 30px span class "lit" span ; span class "pun" span height span class "kwd" span : span class "pun" span 60px span class "lit" span ; span class "pun" span " span class "atv" span &gt; span class "tag" span class "tag" /span> style span class "pun" span " span class "atv" span position span class "kwd" span : span class "pun" span absolute span class "pln" span ; span class "pun" span bottom span class "kwd" span : span class "pun" span 0 span class "lit" span " span class "atv" span &gt; span class "tag" span This is positioned on the bottom span class "pln" span &lt;/div&gt; span class "tag" span class "tag" /div&gt; code Multiple-lines vertical-align:middle style &lt;div &lt; span> &lt;div span class "tag" span class "atn" /span> = span class "atv" span display span class "kwd" span : span class "pun" span table span class "pln" span ; span class "pun" span width span class "kwd" span : span class "pun" span 30px span class "lit" span ; span class "pun" span height span class "kwd" span : span class "pun" span 60px span class "lit" span ; span class "pun" span " span class "atv" span &gt; span class "tag" span class "tag" /span> style span class "pun" span " span class "atv" span display span class "kwd" span : span class "pun" span table-cell span class "pln" span ; span class "pun" span height span class "kwd" span : span class "pun" span 30px span class "lit" span ; span class "pun" span " span class "atv" span &gt; span class "tag" span This is positioned in the middle span class "pln" span &lt;/div&gt; span class "tag" span class "tag" /div&gt; code If you must support ancient versions of IE <= 7 In order to get this to work correctly across the board, you’ll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting on the container and on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn’t support: advanced CSS selectors. top:50% top:-50% &lt;style type = "text/css" &gt; # container { width : 30px ; height : 60px ; position : relative ; } # wrapper &gt; # container { display : table ; position : static ; } # container div { position : absolute ; top : 50% ; } # container div div { position : relative ; top : - 50% ; } # container &gt; div { display : table-cell ; vertical-align : middle ; position : static ; } &lt;/style&gt; &lt;div id = "wrapper" &gt; &lt;div id = "container" &gt; &lt;div&gt;&lt;div&gt;&lt;p&gt; Works in everything! &lt;/p&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; code span class "tag" span span class "atn" span span class "pun" span span class "atv" span span class "tag" span span class "pun" span span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "lit" span span class "pun" span span class "kwd" span span class "pun" span span class "lit" span span class "pun" span span class "kwd" span span class "pun" span span class "pln" span span class "pun" span span class "pun" span span class "pun" span span class "pln" span span class "pun" span span class "pun" span span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "pln" span span class "pun" span span class "pun" span span class "pun" span span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "lit" span span class "pun" span span class "pun" span span class "pun" span span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "pun" span span class "lit" span span class "pun" span span class "pun" span span class "pun" span span class "pln" span span class "pun" span span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "pln" span span class "pun" span span class "pun" span span class "tag" span span class "tag" span span class "atn" span span class "pun" span span class "atv" span span class "tag" span span class "tag" span span class "atn" span span class "pun" span span class "atv" span span class "tag" span span class "tag" span span class "pln" span span class "tag" span span class "tag" span span class "tag" span code Variable container height vertical-align:middle This solution requires a slightly more modern browser than the other solutions, as it makes use of the property. ( ) transform: translateY http://caniuse.com/#feat=transforms2d Applying the following 3 lines of CSS to an element will vertically center it within its parent regardless of the height of the parent element: position span class "pln" span : span class "pun" span relative span class "pln" span ; span class "pun" span top span class "pln" span : span class "pun" span class "lit" 50 /span> %; span class "pln" span : span class "pun" span translateY span class "pln" span (- span class "pun" span 50 span class "lit" span %); span class "pun" span code 9. How to create an HTML button that acts like a link? Answer: HTML The plain HTML way is to put it in a wherein you specify the desired target URL in the attribute. action &lt;form action = &gt; &lt;input type = = /&gt; &lt;/form&gt; class "tag" class "atn" class "pun" class "atv" "https://google.com" class "tag" class "tag" class "atn" class "pun" class "atv" "submit" class "atn" value class "pun" class "atv" "Go to Google" class "tag" class "tag" If necessary, set CSS on the form to keep it in the flow with the surrounding text. Instead of in the above example, you can also use . The only difference is that the element allows children. display: inline; You’d intuitively expect to be able to use analogous with the element, but unfortunately no, this attribute does not exist according to . HTML specification CSS If CSS is allowed, simply use an which you style to look like a button using among others the property ( ). appearance it’s only not supported in Internet Explorer href = >= &lt;a span class "tag" span class "atn" /span> = span class "atv" span class "atn" span "button" span class "atv" span &gt; span class "tag" span Go to Google span class "pln" span &lt;/a&gt; span class "tag" span code - - } a span class "pln" span . span class "pun" span button span class "pln" span { span class "pun" span class "pun" span webkit span class "pln" span - span class "pun" span appearance span class "pln" span : span class "pun" span button span class "pln" span ; span class "pun" span class "pun" span moz span class "pln" span - span class "pun" span appearance span class "pln" span : span class "pun" span button span class "pln" span ; span class "pun" span appearance span class "pln" span : span class "pun" span button span class "pln" span ; span class "pun" span text span class "pln" span - span class "pun" span decoration span class "pln" span : span class "pun" span none span class "pln" span ; span class "pun" span color span class "pln" span : span class "pun" span initial span class "pln" span ; span class "pun" span class "pun" /span> href = >= &lt;a span class "tag" span class "atn" /span> = span class "atv" span class "atn" span "btn btn-primary" span class "atv" span &gt; span class "tag" span Go to Google span class "pln" span &lt;/a&gt; span class "tag" span code JavaScript If JavaScript is allowed, set the . window.location.href type onclick value span> &lt;input span class "tag" span class "atn" /span> = span class "atv" span class "atn" /span> = span class "atv" span location span class "pln" span . span class "pun" span href span class "pln" span = span class "pun" span 'https://google.com' span class "str" span ; span class "pun" span " span class "atv" span class "atn" /span> = span class "atv" span class "tag" /&gt; code Instead of in the above example, you can also use . The only difference is that the element allows children. Alternative Answer: You can also do as: onclick type &lt;button span class "tag" span class "atn" /span> = span class "atv" span location span class "pln" span . span class "pun" span href span class "pln" span = span class "pun" span 'http://www.example.com' span class "str" span " span class "atv" span class "atn" /span> = span class "atv" span &gt; span class "tag" span www.example.com span class "pln" span &lt;/button&gt; span class "tag" span code Note that the attribute is important, since . type="button" its missing value default is the Submit Button state 10. How to move an element into another element? Answer: You can use destination.appendChild(source); { } onclick span class "pln" span = span class "pun" span class "kwd" ( ) function span span class pun /span> destination span class "pun" span appendChild span class "pln" span ( span class "pun" span source span class "pln" span ); span class "pun" span class "pun" /span> code span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "lit" span span class "pun" span span class "pun" span span class "pun" span span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "pln" span span class "lit" span span class "pln" span span class "pun" span span class "pun" span span class "pun" span span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "pln" span span class "lit" span span class "pln" span span class "pun" span span class "pun" span code &lt;html&gt; &lt;body&gt; &lt;div &lt;div &lt; span> &lt;!DOCTYPE html&gt; span class "dec" span class "tag" span class "tag" span class "tag" /span> id span class "pun" span "destination" span class "atv" span &gt; span class "tag" span ### span class "pln" span &lt;/div&gt; span class "tag" span class "tag" /span> id span class "pun" span "source" span class "atv" span &gt; span class "tag" span *** span class "pln" span &lt;/div&gt; span class "tag" span class "tag" /body&gt; span class "tag" span code 11. How to create a checkbox with a clickable label? Answer: Method 1: Wrap Label Tag Wrap the checkbox within a tag: label &lt;label&gt;&lt;input type = name = = &gt; Text &lt;/label&gt; class "tag" class "atn" class "pun" class "atv" "checkbox" class "atn" class "pun" class "atv" "checkbox" class "atn" value class "pun" class "atv" "value" class "tag" class "pln" class "tag" Method 2: Use the for Attribute Use the attribute (match the checkbox id): for &lt;input type = name = id = = &gt; &lt;label = &gt; Text &lt;/label&gt; class "tag" class "atn" class "pun" class "atv" "checkbox" class "atn" class "pun" class "atv" "checkbox" class "atn" class "pun" class "atv" "checkbox_id" class "atn" value class "pun" class "atv" "value" class "tag" class "tag" class "atn" for class "pun" class "atv" "checkbox_id" class "tag" class "pln" class "tag" : ID must be unique on the page! Note Explanation A label can include up to 1 input and omit the attribute, and it will be assumed that it is for the input within it. Excerpt from : for w3.org [The for attribute] explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. To associate a label with another control implicitly, . In this case, the LABEL may only contain control element. The label itself may be positioned before or after the associated control. When absent, the label being defined is associated with the element’s contents. the control element must be within the contents of the LABEL element one Using this method has some advantages over : for No need to assign an to every checkbox (great!). id No need to use the extra attribute in the . The input’s clickable area is also the label’s clickable area, so there aren’t two separate places to click that can control the checkbox – only one, no matter how far apart the and actual label text is, and no matter what kind of CSS you apply to it. Demo with some CSS: label { border : 1px solid #ccc ; padding : 10px ; margin : 0 0 10px ; display : block ; } label : hover { background : #eee ; cursor : pointer ; } code span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "lit" span span class "pln" span span class "lit" span span class "pun" span span class "kwd" span span class "pun" span span class "lit" span span class "pun" span span class "kwd" span span class "pun" span span class "lit" span span class "lit" span span class "lit" span span class "pun" span span class "kwd" span span class "pun" span span class "pln" span span class "pun" span span class "pun" span span class "kwd" span span class "pun" span span class "pln" span span class "pun" span span class "kwd" span span class "pun" span span class "lit" span span class "pun" span span class "kwd" span span class "pun" span span class "pln" span span class "pun" span span class "pun" span code type span> &lt;label&gt;&lt;input span> &lt;label&gt;&lt;input span> &lt;label&gt;&lt;input span class "tag" span class "atn" /span> = span class "atv" span class "tag" /&gt; span class "pln" span &lt;/label&gt; span class "tag" span class "tag" /span> type span class "pun" span "checkbox" span class "atv" span class "tag" /&gt; span class "pln" span &lt;/label&gt; span class "tag" span class "tag" /span> type span class "pun" span "checkbox" span class "atv" span class "tag" /&gt; span class "pln" span &lt;/label&gt; span class "tag" span code Alternative Answer: Just make sure the label is associated with the input. &lt;fieldset&gt; &lt;legend&gt; What metasyntactic variables you like? &lt;/legend&gt; &lt;input type = name = = id = &gt; &lt;label = &gt; Bar &lt;/label&gt; &lt;input type = name = = id = &gt; &lt;label = &gt; Baz &lt;/label&gt; &lt;/fieldset&gt; class "tag" class "tag" class "pln" do class "tag" class "tag" class "atn" class "pun" class "atv" "checkbox" class "atn" class "pun" class "atv" "foo" class "atn" value class "pun" class "atv" "bar" class "atn" class "pun" class "atv" "foo_bar" class "tag" class "tag" class "atn" for class "pun" class "atv" "foo_bar" class "tag" class "pln" class "tag" class "tag" class "atn" class "pun" class "atv" "checkbox" class "atn" class "pun" class "atv" "foo" class "atn" value class "pun" class "atv" "baz" class "atn" class "pun" class "atv" "foo_baz" class "tag" class "tag" class "atn" for class "pun" class "atv" "foo_baz" class "tag" class "pln" class "tag" class "tag" These are the 11 most commonly asked questions about HTML. If you have any suggestions or any confusion, please comment below. If you need any help, we will be glad to help you. In Conclusion Hope this article helped you! This post was also posted on DevPostbyTruemark .