Why does   produce blue dash

Question

I am working on an IoT project that uses an ESP8266 WIFI module. For those unfamiliar, suffice to say it's an SOC with wifi capabilities that can be used in station or AP mode. There are several ways to upload programs to this little marvel, I am using a NodeMCU platform with Lua.

Now the meat of the issue is trying to upload through the Lua interpreter an HTML string to be displayed as a web page for IoT control. I had this working, but had to do some rebuilding of the system to add more control points. Aside from issues with the uploading (issues with the Lua interpreter), which needs no attention, I am having issues with the String built to send to a browser when accessed.

I basically have 2 buttons side by side and wanted separation using &nbsp. That originally worked, but now it produces a blue dash in all the browsers I've tried.The string to be sent is as follows:

<p style= "font-size:90px;">
  Rear Left &nbsp;<a href=\"?pin=ON1\"><button style= \"width:150px;height:150px;font-size:90px;background:green;\">On</button></a>&nbsp;<a href=\"?pin=OFF1\"><button style= \"width:150px;height:150px;font-size:90px;background-color:red;">Off</button></a>
</p>"

Oddly when a snippet of the program containing the HTML code string is saved to a file and opened with a browser it looks fine?! Any insight?

Answer 1

Oddly when a snippet of the program containing the HTML code string is saved to a file and opened with a browser it looks fine?!

No, once you clean-up all the syntax problems it doesn't look fine anymore:

Your problem has nothing to do with NodeMCU, ESPlorer et.al. Your code simply isn't valid HTML5 according to the HTML5 Spec Document from W3C:

Content model: Transparent, but there must be no interactive content descendant.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

You can't nest <button> in <a>. Instead wrap that button inside a <form> tag as such:

<p style="font-size:90px; display: inline">
  Rear Left
  <form href="?pin=ON1" style="display: inline" method="get">
    <button style="width:150px;height:150px;font-size:90px;background:green;">On</button>
  </form>
  &nbsp;
  <form href="?pin=OFF1" style="display: inline" method="get">
    <button style="width:150px;height:150px;font-size:90px;background-color:red;">Off</button>
  </form>
</p>

However, what you should IMO really do is using plain HTML anchors

<p style="font-size:90px;">
  Rear Left
  <a href="?pin=ON1">On</a>
  <a href="?pin=OFF1">Off</a>
</p>

and style those two links like buttons (e.g. https://designshack.net/?p=25423 or How to make <a href=""> link look like a button?).