318 reads

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

by KiranSeptember 24th, 2020

Too Long; Didn't Read

Why does HTML think “chucknorris” is a color? It’s a holdover from the Netscape days: missing digits are treated as 0[…]. An incorrect digit is simply interpreted as 0. HTML is the standard markup language used mainly for creating pages to display on the World Wide Web (WWW) It isvery 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.

Companies Mentioned

Coin Mentioned

featured image - 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 A little rant about Microsoft Internet Explorer’s color parsing 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:

Replace all nonvalid hexadecimal characters with 0’s

<code><span class="pln">chucknorris becomes c00c0000000</span></code>

Pad out to the next total number of characters divisible by 3 (11 -> 12)

<code><span 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:

<code><span 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:

<code><span 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

bgcolor

attribute in action, to produce this “amazing” color swatch:

<code><span class="tag">&lt;table&gt;</span>
  <span class="tag">&lt;tr&gt;</span>
    <span class="tag">&lt;td</span> <span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"chucknorris"</span> <span class="atn">cellpadding</span><span class="pun">=</span><span class="atv">"8"</span> <span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span> <span class="atn">align</span><span class="pun">=</span><span class="atv">"center"</span><span class="tag">&gt;</span><span class="pln">chuck norris</span><span class="tag">&lt;/td&gt;</span>
    <span class="tag">&lt;td</span> <span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"mrt"</span>         <span class="atn">cellpadding</span><span class="pun">=</span><span class="atv">"8"</span> <span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span> <span class="atn">align</span><span class="pun">=</span><span class="atv">"center"</span> <span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">color</span><span class="pun">:</span><span class="lit">#ffffff</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">Mr T</span><span class="tag">&lt;/td&gt;</span>
    <span class="tag">&lt;td</span> <span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"ninjaturtle"</span> <span class="atn">cellpadding</span><span class="pun">=</span><span class="atv">"8"</span> <span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span> <span class="atn">align</span><span class="pun">=</span><span class="atv">"center"</span> <span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">color</span><span class="pun">:</span><span class="lit">#ffffff</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">ninjaturtle</span><span class="tag">&lt;/td&gt;</span>
  <span class="tag">&lt;/tr&gt;</span>
  <span class="tag">&lt;tr&gt;</span>
    <span class="tag">&lt;td</span> <span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"sick"</span>  <span class="atn">cellpadding</span><span class="pun">=</span><span class="atv">"8"</span> <span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span> <span class="atn">align</span><span class="pun">=</span><span class="atv">"center"</span><span class="tag">&gt;</span><span class="pln">sick</span><span class="tag">&lt;/td&gt;</span>
    <span class="tag">&lt;td</span> <span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"crap"</span>  <span class="atn">cellpadding</span><span class="pun">=</span><span class="atv">"8"</span> <span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span> <span class="atn">align</span><span class="pun">=</span><span class="atv">"center"</span><span class="tag">&gt;</span><span class="pln">crap</span><span class="tag">&lt;/td&gt;</span>
    <span class="tag">&lt;td</span> <span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"grass"</span> <span class="atn">cellpadding</span><span class="pun">=</span><span class="atv">"8"</span> <span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span> <span class="atn">align</span><span class="pun">=</span><span class="atv">"center"</span><span class="tag">&gt;</span><span class="pln">grass</span><span class="tag">&lt;/td&gt;</span>
  <span class="tag">&lt;/tr&gt;</span>
<span class="tag">&lt;/table&gt;</span></code>

Why does

bgcolor="chucknorr"

produce a yellow color? Well, if we apply the rules, the string is:

<code><span class="pln">c00c00000 </span><span class="pun">=&gt;</span><span class="pln"> c00 c00 </span><span class="lit">000</span> <span class="pun">=&gt;</span><span class="pln"> c0 c0 </span><span class="lit">00</span> <span class="pun">[</span><span class="pln">RGB</span><span class="pun">(</span><span class="lit">192</span><span class="pun">,</span> <span class="lit">192</span><span class="pun">,</span> <span class="lit">0</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

color="crap"

and, well, it comes out brown.

2. How do you disable browser Autocomplete on a web form field/input tag?

Answer:

Firefox 30 ignores

autocomplete="off"

for passwords, opting to prompt the user instead of whether the password should be stored on the client. Note the following commentary from May 5, 2014:

The password manager always prompts if it wants to save a password.
Passwords are not saved without permission from the user.

We are the third browser to implement this change, after IE and Chrome.

According to the Mozilla Developer Network documentation, the Boolean form element attribute

autocomplete

prevents form data from being cached in older browsers.

<code><span class="tag">&lt;input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span> <span class="atn">name</span><span class="pun">=</span><span class="atv">"foo"</span> <span class="atn">autocomplete</span><span class="pun">=</span><span class="atv">"off"</span> <span class="tag">/&gt;</span></code>

Alternative Answer:

In addition to

autocomplete=off

, 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.

3. How to change a class of an HTML element in response to an

onclick

event using JavaScript?

Answer:

Modern HTML5 Techniques for changing classes

Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library:

<code><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"MyElement"</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'MyClass'</span><span class="pun">);</span><span class="pln">

document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"MyElement"</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">(</span><span class="str">'MyClass'</span><span class="pun">);</span>

<span class="kwd">if</span> <span class="pun">(</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"MyElement"</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">contains</span><span class="pun">(</span><span class="str">'MyClass'</span><span class="pun">)</span> <span class="pun">)</span><span class="pln">

document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"MyElement"</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">toggle</span><span class="pun">(</span><span class="str">'MyClass'</span><span class="pun">);</span></code>

Unfortunately, these do not work in Internet Explorer prior to v10, though there is a shim to add support for it to IE8 and IE9, available from this page. It is, though, getting more and more supported.

Simple cross-browser solution

The standard JavaScript way to select an element is using

document.getElementById("Id")

, 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.

To change all classes for an element:

To replace all existing classes with one or more new classes, set the className attribute:

<code><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"MyElement"</span><span class="pun">).</span><span class="pln">className </span><span class="pun">=</span> <span class="str">"MyClass"</span><span class="pun">;</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:

<code><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"MyElement"</span><span class="pun">).</span><span class="pln">className </span><span class="pun">+=</span> <span class="str">" MyClass"</span><span class="pun">;</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:

<code><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"MyElement"</span><span class="pun">).</span><span class="pln">className </span><span class="pun">=</span><span class="pln">
   document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"MyElement"</span><span class="pun">).</span><span class="pln">className</span><span class="pun">.</span><span class="pln">replace
      </span><span class="pun">(</span> <span class="str">/(?:^|\s)MyClass(?!\S)/</span><span class="pln">g </span><span class="pun">,</span> <span class="str">''</span> <span class="pun">)</span>
<span class="com">/* Code wrapped for readability - above is all one statement */</span></code>

An explanation of this regex is as follows:

<code><span class="pun">(?:^|</span><span class="pln">\s</span><span class="pun">)</span> <span class="pun">#</span> <span class="typ">Match</span><span class="pln"> the start </span><span class="kwd">of</span><span class="pln"> the string</span><span class="pun">,</span><span class="pln"> or any single whitespace character

</span><span class="typ">MyClass</span>  <span class="pun">#</span> <span class="typ">The</span><span class="pln"> literal text </span><span class="kwd">for</span><span class="pln"> the classname to remove

</span><span class="pun">(?!</span><span class="pln">\S</span><span class="pun">)</span>   <span class="pun">#</span> <span class="typ">Negative</span><span class="pln"> lookahead to verify the above is the whole classname
         </span><span class="pun">#</span> <span class="typ">Ensures</span><span class="pln"> there is no non</span><span class="pun">-</span><span class="pln">space character following
         </span><span class="pun">#</span> <span class="pun">(</span><span class="pln">i</span><span class="pun">.</span><span class="pln">e</span><span class="pun">.</span><span class="pln"> must be end </span><span class="kwd">of</span><span class="pln"> string or a space</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.

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:

<code><span class="kwd">if</span> <span class="pun">(</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"MyElement"</span><span class="pun">).</span><span class="pln">className</span><span class="pun">.</span><span class="pln">match</span><span class="pun">(</span><span class="str">/(?:^|\s)MyClass(?!\S)/</span><span class="pun">)</span> <span class="pun">)</span></code>

Assigning these actions to onclick events:

Whilst it is possible to write JavaScript directly inside the HTML event attributes (such as

onclick="this.className+=' MyClass'"

) this is not recommended behavior. Especially on larger applications, more maintainable code is achieved by separating HTML markup from JavaScript interaction logic.

The first step to achieving this is by creating a function, and calling the function in the onclick attribute, for example:

<code><span class="pun">&lt;</span><span class="pln">script type</span><span class="pun">=</span><span class="str">"text/javascript"</span><span class="pun">&gt;</span>
    <span class="kwd">function</span><span class="pln"> changeClass</span><span class="pun">(){</span>
        <span class="com">// Code examples from above</span>
    <span class="pun">}</span>
<span class="pun">&lt;/</span><span class="pln">script</span><span class="pun">&gt;</span>
<span class="pun">...</span>
<span class="pun">&lt;</span><span class="pln">button onclick</span><span class="pun">=</span><span class="str">"changeClass()"</span><span class="pun">&gt;</span><span class="typ">My</span> <span class="typ">Button</span><span class="pun">&lt;/</span><span class="pln">button</span><span class="pun">&gt;</span></code>

(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.

<code><span class="pun">&lt;</span><span class="pln">script type</span><span class="pun">=</span><span class="str">"text/javascript"</span><span class="pun">&gt;</span>
    <span class="kwd">function</span><span class="pln"> changeClass</span><span class="pun">(){</span>
        <span class="com">// Code examples from above</span>
    <span class="pun">}</span><span class="pln">

    window</span><span class="pun">.</span><span class="pln">onload </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(){</span><span class="pln">
        document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"MyElement"</span><span class="pun">).</span><span class="pln">addEventListener</span><span class="pun">(</span> <span class="str">'click'</span><span class="pun">,</span><span class="pln"> changeClass</span><span class="pun">);</span>
    <span class="pun">}</span>
<span class="pun">&lt;/</span><span class="pln">script</span><span class="pun">&gt;</span>
<span class="pun">...</span>
<span class="pun">&lt;</span><span class="pln">button id</span><span class="pun">=</span><span class="str">"MyElement"</span><span class="pun">&gt;</span><span class="typ">My</span> <span class="typ">Button</span><span class="pun">&lt;/</span><span class="pln">button</span><span class="pun">&gt;</span></code>

(Note that the window.onload part is required so that the contents of that function are executed after the HTML has finished loading – without this, the MyElement might not exist when the JavaScript code is called, so that line would fail.)

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.

(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.) The examples above have been reproduced below using jQuery, probably the most commonly used JavaScript library (though there are others worth investigating too).

(Note that

here is the jQuery object.)

Changing Classes with jQuery:

<code><span class="pln">$</span><span class="pun">(</span><span class="str">'#MyElement'</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">'MyClass'</span><span class="pun">);</span><span class="pln">

$</span><span class="pun">(</span><span class="str">'#MyElement'</span><span class="pun">).</span><span class="pln">removeClass</span><span class="pun">(</span><span class="str">'MyClass'</span><span class="pun">);</span>

<span class="kwd">if</span> <span class="pun">(</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#MyElement'</span><span class="pun">).</span><span class="pln">hasClass</span><span class="pun">(</span><span class="str">'MyClass'</span><span class="pun">)</span> <span class="pun">)</span></code>

In addition, jQuery provides a shortcut for adding a class if it doesn’t apply, or removing a class that does:

<code><span class="pln">$</span><span class="pun">(</span><span class="str">'#MyElement'</span><span class="pun">).</span><span class="pln">toggleClass</span><span class="pun">(</span><span class="str">'MyClass'</span><span class="pun">);</span></code>

Assigning a function to a click event with jQuery:

<code><span class="pln">$</span><span class="pun">(</span><span class="str">'#MyElement'</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="pln">changeClass</span><span class="pun">);</span></code>

or, without needing an id:

<code><span class="pln">$</span><span class="pun">(</span><span class="str">':button:contains(My Button)'</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="pln">changeClass</span><span class="pun">);</span></code>

4. How to store Objects in HTML5 localStorage?

Answer:

Looking at the Apple, Mozilla, and Mozilla again documentation, the functionality seems to be limited to handle only string key/value pairs.

A workaround can be to stringify your object before storing it, and later parse it when you retrieve it:

<code><span class="kwd">var</span><span class="pln"> testObject </span><span class="pun">=</span> <span class="pun">{</span> <span class="str">'one'</span><span class="pun">:</span> <span class="lit">1</span><span class="pun">,</span> <span class="str">'two'</span><span class="pun">:</span> <span class="lit">2</span><span class="pun">,</span> <span class="str">'three'</span><span class="pun">:</span> <span class="lit">3</span> <span class="pun">};</span>

<span class="com">// Put the object into storage</span><span class="pln">
localStorage</span><span class="pun">.</span><span class="pln">setItem</span><span class="pun">(</span><span class="str">'testObject'</span><span class="pun">,</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">stringify</span><span class="pun">(</span><span class="pln">testObject</span><span class="pun">));</span>

<span class="com">// Retrieve the object from storage</span>
<span class="kwd">var</span><span class="pln"> retrievedObject </span><span class="pun">=</span><span class="pln"> localStorage</span><span class="pun">.</span><span class="pln">getItem</span><span class="pun">(</span><span class="str">'testObject'</span><span class="pun">);</span><span class="pln">

console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'retrievedObject: '</span><span class="pun">,</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">parse</span><span class="pun">(</span><span class="pln">retrievedObject</span><span class="pun">));</span></code>

Alternative Answer:

A minor improvement on a variant:

<code><span class="typ">Storage</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">setObject </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">key</span><span class="pun">,</span><span class="pln"> value</span><span class="pun">)</span> <span class="pun">{</span>
    <span class="kwd">this</span><span class="pun">.</span><span class="pln">setItem</span><span class="pun">(</span><span class="pln">key</span><span class="pun">,</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">stringify</span><span class="pun">(</span><span class="pln">value</span><span class="pun">));</span>
<span class="pun">}</span>

<span class="typ">Storage</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">getObject </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">key</span><span class="pun">)</span> <span class="pun">{</span>
    <span class="kwd">var</span><span class="pln"> value </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">getItem</span><span class="pun">(</span><span class="pln">key</span><span class="pun">);</span>
    <span class="kwd">return</span><span class="pln"> value </span><span class="pun">&amp;&amp;</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">parse</span><span class="pun">(</span><span class="pln">value</span><span class="pun">);</span>
<span class="pun">}</span></code>

Because of short-circuit evaluation,

getObject()

will immediately return

null

key

is not in Storage. It also will not throw a

SyntaxError

exception if

value

""

(the empty string;

JSON.parse()

cannot handle that).

5. How to make a div not larger than its contents?

Answer:

The solution is to set

div

display: inline-block

6. Is it <br>, <br/>, or <br /> in HTML 5?

Answer:

Simply

<br>

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

<br>

tag; if you’re using such a system, it’s fine to use

<br/>

, 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

application/xhtml+xml

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 Serving XHTML as text/html Considered Harmful for some more information.

Alternative Answer:

This quote from the HTML 5 Reference Draft provides the answer:

3.2.2.2 Void Elements

The term void elements is used to designate elements that must be empty. 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 start tag only. The self-closing tag syntax may be used. The end tag must be omitted because the element is automatically closed by the parser.

HTML Example: A void element in the HTML syntax. This is not permitted in the XHTML syntax.

<code><span class="tag">&lt;hr&gt;</span></code>

Example: A void element using the HTML- and XHTML-compatible self-closing tag syntax.

<code><span class="tag">&lt;hr/&gt;</span></code>

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.

<code><span class="tag">&lt;hr&gt;&lt;/hr&gt;</span></code>

7. What are valid values for the id attribute in HTML?

Answer:

For HTML 4, the answer is technically:

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 (“.”).

HTML 5 is even more permissive, saying only that id must contain at least one character and may not contain any space characters.

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 backslash in CSS or a double backslash in a selector string passed to jQuery. 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.

For example, the HTML declaration

<div id="first.name"></div>

is valid. You can select that element in CSS as

#first\.name

and in jQuery like so:

$('#first\\.name')

. But if you forget the backslash,

$('#first.name')

, you will have a perfectly valid selector looking for an element with id

first

and also having class

name

. This is a bug that is easy to overlook. You might be happier, in the long run, choosing the id

first-name

(a hyphen rather than a period), instead.

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

firstName

FirstName

?” because you will always know that you should type

first_name

. 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.

A now very obscure problem was that at least one browser, Netscape 6, incorrectly treated id attribute values as case-sensitive. That meant that if you had typed

id="firstName"

in your HTML (lower-case ‘f’) and

#FirstName { color: red }

in your CSS (upper-case ‘F’), that buggy browser would have failed to set the element’s color to 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.

<code><span class="com">&lt;!-- moved "vertical-align:middle" style from span to img --&gt;</span>
<span class="tag">&lt;div&gt;</span>
  <span class="tag">&lt;img</span> <span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">vertical-align</span><span class="pun">:</span><span class="pln">middle</span><span class="atv">"</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"https://placehold.it/60x60"</span><span class="tag">&gt;</span>
  <span class="tag">&lt;span</span> <span class="atn">style</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">Works.</span><span class="tag">&lt;/span&gt;</span>
<span class="tag">&lt;/div&gt;</span></code>

Tested in FF3. Now you can use flexbox for this type of layout.

<code><span class="pun">.</span><span class="pln">box </span><span class="pun">{</span>
   <span class="kwd">display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span>
   <span class="kwd">align-items</span><span class="pun">:</span><span class="pln">center</span><span class="pun">;</span>
<span class="pun">}</span></code>

<code><span class="tag">&lt;div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"box"</span><span class="tag">&gt;</span>
    <span class="tag">&lt;img</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"https://placehold.it/60x60"</span><span class="tag">&gt;</span>
    <span class="tag">&lt;span</span> <span class="atn">style</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">Works.</span><span class="tag">&lt;/span&gt;</span>
<span class="tag">&lt;/div&gt;</span></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.

<code><span class="tag">&lt;div&gt;</span>
  <span class="tag">&lt;img</span> <span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">width</span><span class="pun">:</span><span class="lit">30px</span><span class="pun">;</span> <span class="kwd">height</span><span class="pun">:</span><span class="lit">30px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span>
  <span class="tag">&lt;span</span> <span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">line-height</span><span class="pun">:</span><span class="lit">30px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">Doesn't work.</span><span class="tag">&lt;/span&gt;</span>
<span class="tag">&lt;/div&gt;</span></code>

Multiple-lines vertical-align:bottom

Absolutely position an inner div relative to its container.

<code><span class="tag">&lt;div</span> <span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">position</span><span class="pun">:</span><span class="pln">relative</span><span class="pun">;</span><span class="kwd">width</span><span class="pun">:</span><span class="lit">30px</span><span class="pun">;</span><span class="kwd">height</span><span class="pun">:</span><span class="lit">60px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span>
  <span class="tag">&lt;div</span> <span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">position</span><span class="pun">:</span><span class="pln">absolute</span><span class="pun">;</span><span class="kwd">bottom</span><span class="pun">:</span><span class="lit">0</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">This is positioned on the bottom</span><span class="tag">&lt;/div&gt;</span>
<span class="tag">&lt;/div&gt;</span></code>

Multiple-lines vertical-align:middle

<code><span class="tag">&lt;div</span> <span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">display</span><span class="pun">:</span><span class="pln">table</span><span class="pun">;</span><span class="kwd">width</span><span class="pun">:</span><span class="lit">30px</span><span class="pun">;</span><span class="kwd">height</span><span class="pun">:</span><span class="lit">60px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span>
  <span class="tag">&lt;div</span> <span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">display</span><span class="pun">:</span><span class="pln">table-cell</span><span class="pun">;</span><span class="kwd">height</span><span class="pun">:</span><span class="lit">30px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">This is positioned in the middle</span><span class="tag">&lt;/div&gt;</span>
<span class="tag">&lt;/div&gt;</span></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

top:50%

on the container and

top:-50%

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.

<code><span class="tag">&lt;style</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="tag">&gt;</span>
  <span class="pun">#</span><span class="pln">container </span><span class="pun">{</span>
    <span class="kwd">width</span><span class="pun">:</span> <span class="lit">30px</span><span class="pun">;</span>
    <span class="kwd">height</span><span class="pun">:</span> <span class="lit">60px</span><span class="pun">;</span>
    <span class="kwd">position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span>
  <span class="pun">}</span>
  <span class="pun">#</span><span class="pln">wrapper </span><span class="pun">&gt;</span> <span class="pun">#</span><span class="pln">container </span><span class="pun">{</span>
    <span class="kwd">display</span><span class="pun">:</span><span class="pln"> table</span><span class="pun">;</span>
    <span class="kwd">position</span><span class="pun">:</span><span class="pln"> static</span><span class="pun">;</span>
  <span class="pun">}</span>
  <span class="pun">#</span><span class="pln">container div </span><span class="pun">{</span>
    <span class="kwd">position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span>
    <span class="kwd">top</span><span class="pun">:</span> <span class="lit">50%</span><span class="pun">;</span>
  <span class="pun">}</span>
  <span class="pun">#</span><span class="pln">container div div </span><span class="pun">{</span>
    <span class="kwd">position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span>
    <span class="kwd">top</span><span class="pun">:</span> <span class="pun">-</span><span class="lit">50%</span><span class="pun">;</span>
  <span class="pun">}</span>
  <span class="pun">#</span><span class="pln">container </span><span class="pun">&gt;</span><span class="pln"> div </span><span class="pun">{</span>
    <span class="kwd">display</span><span class="pun">:</span><span class="pln"> table-cell</span><span class="pun">;</span>
    <span class="kwd">vertical-align</span><span class="pun">:</span><span class="pln"> middle</span><span class="pun">;</span>
    <span class="kwd">position</span><span class="pun">:</span><span class="pln"> static</span><span class="pun">;</span>
  <span class="pun">}</span>
<span class="tag">&lt;/style&gt;</span>

<span class="tag">&lt;div</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">"wrapper"</span><span class="tag">&gt;</span>
  <span class="tag">&lt;div</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">&gt;</span>
    <span class="tag">&lt;div&gt;&lt;div&gt;&lt;p&gt;</span><span class="pln">Works in everything!</span><span class="tag">&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;</span>
  <span class="tag">&lt;/div&gt;</span>
<span class="tag">&lt;/div&gt;</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

transform: translateY

property. (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:

<code><span class="pln">position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span><span class="pln">
top</span><span class="pun">:</span> <span class="lit">50</span><span class="pun">%;</span><span class="pln">
transform</span><span class="pun">:</span><span class="pln"> translateY</span><span class="pun">(-</span><span class="lit">50</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

<form>

wherein you specify the desired target URL in the

action

attribute.

<code><span class="tag">&lt;form</span> <span class="atn">action</span><span class="pun">=</span><span class="atv">"https://google.com"</span><span class="tag">&gt;</span>
    <span class="tag">&lt;input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span> <span class="atn">value</span><span class="pun">=</span><span class="atv">"Go to Google"</span> <span class="tag">/&gt;</span>
<span class="tag">&lt;/form&gt;</span></code>

If necessary, set CSS

display: inline;

on the form to keep it in the flow with the surrounding text. Instead of

<input type="submit">

in the above example, you can also use

 <button type="submit">

. The only difference is that the

<button>

element allows children.

You’d intuitively expect to be able to use

<button href="https://google.com">

analogous with the

<a>

element, but unfortunately no, this attribute does not exist according to HTML specification.

CSS

If CSS is allowed, simply use an

<a>

which you style to look like a button using among others the

appearance

property (it’s only not supported in Internet Explorer).

<code><span class="tag">&lt;a</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">"https://google.com"</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">Go to Google</span><span class="tag">&lt;/a&gt;</span></code>

<code><span class="pln">a</span><span class="pun">.</span><span class="pln">button </span><span class="pun">{</span>
    <span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">appearance</span><span class="pun">:</span><span class="pln"> button</span><span class="pun">;</span>
    <span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">appearance</span><span class="pun">:</span><span class="pln"> button</span><span class="pun">;</span><span class="pln">
    appearance</span><span class="pun">:</span><span class="pln"> button</span><span class="pun">;</span><span class="pln">

    text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln">
    color</span><span class="pun">:</span><span class="pln"> initial</span><span class="pun">;</span>
<span class="pun">}</span></code>

Or pick one of those many CSS libraries like Bootstrap.

<code><span class="tag">&lt;a</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">"https://google.com"</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="tag">&gt;</span><span class="pln">Go to Google</span><span class="tag">&lt;/a&gt;</span></code>

JavaScript

If JavaScript is allowed, set the

window.location.href

<code><span class="tag">&lt;input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span> <span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">location</span><span class="pun">.</span><span class="pln">href</span><span class="pun">=</span><span class="str">'https://google.com'</span><span class="pun">;</span><span class="atv">"</span> <span class="atn">value</span><span class="pun">=</span><span class="atv">"Go to Google"</span> <span class="tag">/&gt;</span></code>

Instead of

<input type="button">

in the above example, you can also use

<button>

. The only difference is that the

<button>

element allows children.

Alternative Answer:

You can also do as:

<code><span class="tag">&lt;button</span> <span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">location</span><span class="pun">.</span><span class="pln">href</span><span class="pun">=</span><span class="str">'http://www.example.com'</span><span class="atv">"</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">
         www.example.com</span><span class="tag">&lt;/button&gt;</span></code>

Note that the

type="button"

attribute is important, since 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);

<code><span class="pln">onclick </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(){</span><span class="pln"> destination</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">source</span><span class="pun">);</span> <span class="pun">}</span></code>

<code><span class="pln">div</span><span class="pun">{</span> <span class="kwd">margin</span><span class="pun">:</span> <span class="lit">.1em</span><span class="pun">;</span> <span class="pun">}</span> 
<span class="pun">#</span><span class="pln">destination</span><span class="pun">{</span> <span class="kwd">border</span><span class="pun">:</span><span class="pln"> solid </span><span class="lit">1px</span><span class="pln"> red</span><span class="pun">;</span> <span class="pun">}</span>
<span class="pun">#</span><span class="pln">source </span><span class="pun">{</span><span class="kwd">border</span><span class="pun">:</span><span class="pln"> solid </span><span class="lit">1px</span><span class="pln"> gray</span><span class="pun">;</span> <span class="pun">}</span></code>

<code><span class="dec">&lt;!DOCTYPE html&gt;</span>
<span class="tag">&lt;html&gt;</span>

 <span class="tag">&lt;body&gt;</span>

  <span class="tag">&lt;div</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">"destination"</span><span class="tag">&gt;</span><span class="pln">
   ###
  </span><span class="tag">&lt;/div&gt;</span>
  <span class="tag">&lt;div</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">"source"</span><span class="tag">&gt;</span><span class="pln">
   ***
  </span><span class="tag">&lt;/div&gt;</span>

 <span class="tag">&lt;/body&gt;</span>
<span class="tag">&lt;/html&gt;</span></code>

11. How to create a checkbox with a clickable label?

Answer:

Method 1: Wrap Label Tag

Wrap the checkbox within a

label

tag:

<code><span class="tag">&lt;label&gt;&lt;input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span> <span class="atn">name</span><span class="pun">=</span><span class="atv">"checkbox"</span> <span class="atn">value</span><span class="pun">=</span><span class="atv">"value"</span><span class="tag">&gt;</span><span class="pln">Text</span><span class="tag">&lt;/label&gt;</span></code>

Method 2: Use the

for

Attribute

Use the

for

attribute (match the checkbox id):

<code><span class="tag">&lt;input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span> <span class="atn">name</span><span class="pun">=</span><span class="atv">"checkbox"</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">"checkbox_id"</span> <span class="atn">value</span><span class="pun">=</span><span class="atv">"value"</span><span class="tag">&gt;</span>
<span class="tag">&lt;label</span> <span class="atn">for</span><span class="pun">=</span><span class="atv">"checkbox_id"</span><span class="tag">&gt;</span><span class="pln">Text</span><span class="tag">&lt;/label&gt;</span></code>

Note: ID must be unique on the page!

Explanation

A label can include up to 1 input and omit the

for

attribute, and it will be assumed that it is for the input within it. Excerpt from 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. When absent, the label being defined is associated with the element’s contents.

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

Using this method has some advantages over

for

No need to assign an
```
id
```
to every checkbox (great!).
No need to use the extra attribute in the
```
<label>
```
.
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
```
<input>
```
and actual label text is, and no matter what kind of CSS you apply to it.

Demo with some CSS:

<code><span class="pln">label </span><span class="pun">{</span>
 <span class="kwd">border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid </span><span class="lit">#ccc</span><span class="pun">;</span>
 <span class="kwd">padding</span><span class="pun">:</span><span class="lit">10px</span><span class="pun">;</span>
 <span class="kwd">margin</span><span class="pun">:</span><span class="lit">0</span> <span class="lit">0</span> <span class="lit">10px</span><span class="pun">;</span>
 <span class="kwd">display</span><span class="pun">:</span><span class="pln">block</span><span class="pun">;</span> 
<span class="pun">}</span>

<span class="kwd">label</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span>
 <span class="kwd">background</span><span class="pun">:</span><span class="lit">#eee</span><span class="pun">;</span>
 <span class="kwd">cursor</span><span class="pun">:</span><span class="pln">pointer</span><span class="pun">;</span>
<span class="pun">}</span></code>

<code><span class="tag">&lt;label&gt;&lt;input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span> <span class="tag">/&gt;</span><span class="pln">Option 1</span><span class="tag">&lt;/label&gt;</span>
<span class="tag">&lt;label&gt;&lt;input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span> <span class="tag">/&gt;</span><span class="pln">Option 2</span><span class="tag">&lt;/label&gt;</span>
<span class="tag">&lt;label&gt;&lt;input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span> <span class="tag">/&gt;</span><span class="pln">Option 3</span><span class="tag">&lt;/label&gt;</span></code>

Alternative Answer:

Just make sure the label is associated with the input.

<code><span class="tag">&lt;fieldset&gt;</span>
  <span class="tag">&lt;legend&gt;</span><span class="pln">What metasyntactic variables do you like?</span><span class="tag">&lt;/legend&gt;</span>

  <span class="tag">&lt;input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span> <span class="atn">name</span><span class="pun">=</span><span class="atv">"foo"</span> <span class="atn">value</span><span class="pun">=</span><span class="atv">"bar"</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">"foo_bar"</span><span class="tag">&gt;</span>
  <span class="tag">&lt;label</span> <span class="atn">for</span><span class="pun">=</span><span class="atv">"foo_bar"</span><span class="tag">&gt;</span><span class="pln">Bar</span><span class="tag">&lt;/label&gt;</span>

  <span class="tag">&lt;input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span> <span class="atn">name</span><span class="pun">=</span><span class="atv">"foo"</span> <span class="atn">value</span><span class="pun">=</span><span class="atv">"baz"</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">"foo_baz"</span><span class="tag">&gt;</span>
  <span class="tag">&lt;label</span> <span class="atn">for</span><span class="pun">=</span><span class="atv">"foo_baz"</span><span class="tag">&gt;</span><span class="pln">Baz</span><span class="tag">&lt;/label&gt;</span>
<span class="tag">&lt;/fieldset&gt;</span></code>

In Conclusion

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.

This post was also posted on DevPostbyTruemark.

Hope this article helped you!