Why does HTML recognize Ninja Turtle as a Background Colour

Sam-Sundar — Sat, 25 Jun 2022 10:27:16 +0000

Why do certain random strings produce colours when entered as background colours in HTML
For example, Look at the following code snippet and its output

<html lang="en">


<head>
  <title>Hello, world!</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="description" content="" />
</head>
<body bgcolor="ninjaturtle">
  <h1 >What should you do when you see a green alien</h1>
  <h1>Wait until it's ripe</h1>
</body>
</html>

And now let's look at the output

The real reason behind this is that the browser can not understand it and tries to somehow translate it to what it can understand and in this case turns it into a hexadecimal value

ninja turtles start with n which is an unrecognized character in hexadecimal, also it's converting all unrecognized characters into 0

However, it recognizes all the hexadecimal characters and keeps it as it is

So ninja turtles in hexadecimal format becomes:0000a00000e0 and all other characters become 0 other than a and e remain where they are...

Now they get divided by 3 for RGB(red, green, blue)... R: 0000, G: a000, B:00e0...

But we know valid hexadecimal for RGB is just 2 characters, which means R: 00, G: a0, B:00
.

So the real result is:
<body bgcolor="#00a000">

There are other anomalies as well

<body bgcolor="cabs">
<h1>
  Fun fact - According to this logic  bgcolor="cabs" test 
  would give you the color of a California Taxi Cab
  </h1>
</body>

produces

Also Netscape(RIP) was located in Mountain View,California

and one final one for all my pokemon lovers

<table>
  <td bgcolor="squirtle">squirtle</td>
  <td bgcolor="ivysaur">ivysaur</td>
  <td bgcolor="charmeleon">charmeleon</td>
</table>

you can read about more HTML anomalies at: A little rant about Microsoft Internet Explorer's color parsing

Thanks for Reading

8 Unknown HTML tags that are actually quite useful

Sam-Sundar — Sat, 14 May 2022 12:10:26 +0000

The HTML tags that are considered important are the ones that are commonly used however that is not the case there are some important HTML tags that most people don't use and end up wasting time on writing equivalent CSS

Let's Get into it

1.The <s> tag
The <s> tag specifies text that is no longer correct, accurate or relevant. The text will be displayed With a line through it
The S stands for a Strike-Through
Usually used in E-Commerce Website to denote a price drop

<h4>Price
    <s>£15</s>
    <span>£9</span>
</h4>

People often prefer using span tag and then add a text-decoration property in CSS,However this is quite handy

2.The <ruby>, <rt>, and <rp> tags
The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text.It Prevents us from writing dreary CSS

 <ruby>帶翅膀<rt>Carmine</rt></ruby>
 <ruby>的老鼠<rt>Falcone</rt></ruby>

3.The <details>tag
The <details> tag specifies additional details that the user can open and close on demand.
The tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within.

<details>

  <summary>Click me to see the Answer</summary>
  <p>
      The Ability to speak doesn’t make you intelligent
.</p>
</details>

4.The <optgroup> tag
The <optgroup> tag is used to group related options in a <select> element (drop-down list).
This is one is actually quite useful,It adds additional style in our
Select tag and makes it a little more attractive and organized
If you have a long list of options, groups of related options are easier to handle for a user.

<form >
  <label for="swords">Choose a Sword:</label>
  <select name="swords" id="swords">
    <optgroup label="Valyrian Steel">
      <option value="Oathkeeper">Oathkeeper</option>
      <option value="Widows Wail">Widows Wail</option>
    </optgroup>
    <optgroup label="Knifes">
      <option value="mercedes">Needle</option>

    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

5.The <meter> tag
The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.
It is also quite functional as we can define at what percent/value the color of meter should change for example if you give a value less than the 33(i.e low value) the color of the meter will turn into red similarly for high and optimum,
This is a very useful HTML tag as if you tend to do CSS we may end up writing a long sheets of CSS
<meter>tag saves us a lot of time and efforts
Examples: Disk usage, the relevance of a query result, etc.


   <p> 0L <meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="20">
    at 50/100
</meter> 5L</p>

    <p> 0L <meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter> 5L</p>
    <p> 0L <meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="80">
    at 50/100
</meter> 5L</p>

6.The <progress> tag
The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Usually i have seen a lot of people write CSS in order to create a progress bar some have even created separate components
in react

<label for="file">File progress:</label>

<progress id="file" max="100" value="70"> 70% </progress>

7.The kbd tag
The <kbd> tag is used to define keyboard input. The content inside is displayed in the browser's default monospace font.
I was surprised when i found out that this wasn't deprecated since most people end up opting to style a span instead

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>

8.The bdo tag
BDO stands for Bi-Directional Override.
The <bdo> tag is used to override the current text direction.
It can be used to create games or in animations.This is one of the rare HTML tags and probably the least used

<p><bdo dir="rtl">May the force be with you
.</bdo></p>

Thank You for reading this Article Have a Good Day

DEV Community: Sam-Sundar

Why does HTML recognize Ninja Turtle as a Background Colour

8 Unknown HTML tags that are actually quite useful