The specification is very clear and convincing with respect to id
:
... the id
attribute value must be unique among all the IDs in the
element's tree
the value of the attribute id
must be unique among all the IDs in the
tree of elements
Although there are no visible errors in the document, there are errors at the level of validation or operation of the code. We can talk about implicit errors in that sense.
Therefore:
- I do not recommend using repeated ids. Imagine a world where the same identity number is given to several people, same registration to vehicles, the same number to several people, the same bank account number ...
- I would not recommend you to put style code directly to the elements, like here for example:
<a style="background: #ff0000; color: #fff; padding: 10px;">hola</a>
It's a bad practice . Why? For many reasons. Imagine an application with hundreds or thousands of pages with styles applied directly to the elements. And suddenly the owner of the page or application seems to change the colors, put some more chords to the season of autumn or summer. I already see you digging through the hundreds or thousands of pages to change to the new color. As some have commented, it is much better to use classes and apply the styles in the classes. So, if you have to change something, you change it in one place, not in a thousand places.
Example of bad practice
Suppose you have this and one day the boss tells you that the backgrounds look prettier in blue ... OMG, how do you plan to change now, you who thought that red was eternal?
<p>En la página o archivo 1 de tu aplicación:</p>
<a style="background: #ff0000; color: #fff; padding: 10px;">hola</a>
<p>En la página o archivo 506 de tu aplicación:</p>
<a style="background: #ff0000; color: #fff; padding: 10px;">hola</a>
<p>En la página o archivo 99999 de tu aplicación:</p>
<a style="background: #ff0000; color: #fff; padding: 10px;">hola</a>
Example of good practice
Suppose you have this and one day the boss tells you that the backgrounds look prettier in blue and that you want the larger font ... And that you will receive a juicy incentive if you do it before noon:)
.by-temps {
background: #ff0000;
color: #fff;
padding: 10px;
}
<p>En la página o archivo 1 de tu aplicación:</p>
<a class="by-temps">hola</a>
<p>En la página o archivo 506 de tu aplicación:</p>
<a class="by-temps">hola</a>
<p>En la página o archivo 99999 de tu aplicación:</p>
<a class="by-temps">hola</a>
Let's go for the incentive, it's 11:58!
.by-temps {
background: blue;
color: #fff;
padding: 10px;
font-size: 30px;
}
<p>En la página o archivo 1 de tu aplicación:</p>
<a class="by-temps">hola</a>
<p>En la página o archivo 506 de tu aplicación:</p>
<a class="by-temps">hola</a>
<p>En la página o archivo 99999 de tu aplicación:</p>
<a class="by-temps">hola</a>
CONCLUSION
-
id
unique always
- group by
class
when required
- apply styles apart always