In example here: https://jsonformatter.org/html-validator/59ed54 I used ID "myHeader" three times:
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: green;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities are cool</h1>
<!-- An element with a unique id -->
<h1 id="myHeader">My Citie are cool</h1>
<!-- An element with a unique id -->
<h2 id="myHeader">My Cities are cool</h2>
<!-- Multiple elements with same class -->
<h2 >London</h2>
<p>London is the capital of England.</p>
<h2 >Paris</h2>
<p>Paris is the capital of France.</p>
<h2 >Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
The editor says it is valid HTML and works. Is this really an error or fine use?
CodePudding user response：
As HTML and CSS are designed to be very fault tolerant, most browsers will in fact apply the specified styles to all elements given the same id. However, this is considered bad practice as it defies the W3C spec. Applying the same id to multiple elements is invalid HTML and should be avoided.
CodePudding user response：
Definitely bad practice. It's not causing any problem in static page and renders as valid but when you'll try to apply js or something to identify ids or work with dom then it'll be real problem.