Is it problematic to use a space character in an element ID? For example, like this:
<li id='something with spaces'>Test123</li>
I typically avoid using spaces in IDs, but I've encountered a situation where it might be necessary.
What potential challenges could arise when it comes to scaling, different browsers, scripting, or CSS styling?
Are there any resources discussing "bad characters" that can technically be used, but are not recommended?
Thanks -
According to the established norm,
The ID and NAME tokens must start with a letter ([A-Za-z]) followed by any combination of letters, numbers ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
If you disregard this guideline, you could face numerous issues with processors that adhere strictly to the HTML standards. Therefore, my advice would be to avoid doing so.
The problem lies in the fact that spaces in IDs are considered invalid based on the HTML specifications, resulting in undefined behavior.
Instead, opt for underscores and/or hyphens as most developers do. While this approach may yield results, there could potentially be some rare edge cases. Ultimately, using spaces in IDs will only create a tangled web of maintenance issues for anyone who works on the code after you.
My server side code (GSP) is dynamically generating HTML for me in the following format: <span> <g:generateAmount /> </span> I am integrating this into an Angular controller and I want to be able to bind a scope variable to the span ...
HTML Code <!doctype html> <html ng-app="plunker"> <head> <meta charset="utf-8> <title>AngularJS Plunker</title> <link rel="stylesheet" href="style.css"> <script> document.write("<base href=&b ...
Currently working with node 0.12 and intern 3 in order to execute functional tests, but encountering the following error: SUITE ERROR Error: [POST http://localhost:4444/wd/hub/session] connect ECONNREFUSED at Server.createSession <node_m ...
Struggling with the user interface while trying to replicate the functionality of an S3 bucket. My data is in JSON format: {"name":"sam's file", "path":"testfile1.jpg"}, {"name":"sam's file", "path":"folder1/testfile2.jpg"}, {"name":"sam's ...
As I am utilizing Harp and Bootstrap for my project, I am encountering a peculiar issue. Upon refreshing the page, I notice that the text ""CTYPE html>"" is inserted within the body tags. Can anyone shed light on why this is happening? ...
Let's say there is a field for 'part number' input that is not enclosed in a form tag. Whenever a user enters a value, the onblur event or a button positioned next to the input field should trigger a query to an external site via its API and ...
I am currently developing an online visitor chat software using PHP and MySQL. My goal is to load the page when the submit button is clicked. Submit Button ID: send Visitor ID: vid Chat ID: cid Below is the snippet of code for an Ajax request that I hav ...
https://i.sstatic.net/Mhbsq.png Looking for advice on implementing dotted vertical lines between icons in React Native. Any suggestions? ...
I am currently working on making my navigation bar elements larger when hovered over. However, I'm facing an issue where the rest of the website shifts downward slightly when I mouseover them, and it doesn't look good. Is there a way to increase ...
As I incorporate a substantial amount of AJAX with XML Http Requests on my website, I encounter a peculiar issue with a few random AJAX calls. There seems to be an execution problem within my JavaScript code in the onreadystatechange function where certain ...
Hey everyone, I've been working on some code that allows me to show and hide divs by clicking on links. The issue I'm facing is that when I try to view a specific div (like the third one), it appears below the invisible divs instead of at the top ...
While working on my project, I encountered an issue with implementing a change in the class of an element using JavaScript. The problem is that when I click on the home page, the last page does not get deselected. Here is my current JavaScript code: const ...
Currently facing an unusual issue: If you visit XX, you'll notice a black footer at the bottom - well, at least on Firefox and Chrome. In Safari, the Footer is not visible at all, and I am unable to figure out why. Adding a slight margin-top:200px; t ...
While running Next.js on my Windows machine, I am noticing that the file path is displaying as if it were a Linux path. I have already configured the node file path in the environment variable, but I'm still encountering the following error: yarn run ...
Invite.js This invite component includes an invite button outside the form and a delete button inside the form. The goal is to delete the form when the delete button is clicked. I have utilized useState and sourced this form from material-ui. Can anyone ...
I've designed a helper function that is supposed to generate a promise containing an array of strings that represent all the names of Collections currently stored in my database. After conducting console logs, I confirmed that my connection to the da ...
My plan is to develop a Chrome extension that can automatically fill passwords. The code for this functionality looks like the following: //get the account document.querySelector("input[type=text]").addEventListener('input', () => { ...
I have a unique div containing a combination of CSS styles and a Bootstrap menu. My goal is to integrate the menu within the same div using CSS to achieve the following structure: ABOUT US - HISTORY QUALITY To accomplish this, I intend to insert the tex ...
For QA testing purposes, we have a test page that allows our QA team to replicate server behavior by passing JSON to a mock service. Everything functions correctly when valid JSON is used, but if invalid JSON is provided, an error is returned - which is ex ...
What is the recommended approach for changing the mouse cursor programmatically in Angular? For instance: HTML: <div [style.cursor]="cursorStyle">Content goes here</div> or <div [ngStyle]="{ 'cursor': cursorStyle ...