how to use a href on a label other than (a)


I'm using a tag with a href that calls id to do its function

<a href="#openModal">Abrir</a>

It happens that I can not use a tag at the moment because I'm hurting all the work, I want to know what other tag I can use and that it works href, since I tried to put it on other tags but It does not work for me.

asked by Header90 25.09.2018 в 00:12

3 answers


It is not possible to use the attribute in another html tag, you could theoretically use it in another element, but it will not work and it will always be validated as incorrect.

I am afraid that the solution to your problem is contextually different, but we would need more information about your project, specifically how does it "hurt" to have this attribute in the link? o What is the js script that you are using to control the event? What is the html and css structure of your page? because in theory it should not affect having more than one <a> tag in the logic of calling a modal.

Now, also, the truth is that it is not necessary to use specifically the attribute href for the modal to work, in fact you could achieve the same event with another attribute of type data, example data-href="#ejemplo" .

answered by 25.09.2018 в 00:57

The <a> tag does not affect what you see, with styles you can make it look like a button, you can "surround" an image without affecting it ... whatever you need:

a.btn {
  display: inline-block;
  background-color: #4AF;
  color: white;
  text-decoration: none;
  padding: 5px;
  border: 1px solid navy;
  border-radius: 3px;
<a href="#"> Enlace normal</a>
<a class="btn"href="#"> Enlace como botón</a>

<a href="#">
  <img src=""/>
answered by 25.09.2018 в 10:05

As you mentioned in the comment, the redundancy attribute href is used only to open a modal, and you say that the <a> tag gives you problems so let's make another solution for you to open the modal without the <a> tag and get the id of the modal you want to open:

$(".abrir").on("click", (e) => {

 let id = $("href");
 let id2 = $("data-href");
 alert("El id por el atributo href es: "+id+" y el id por el atributo data-href: "+id2);

const div = document.getElementsByClassName("abrir2")[0];
div.addEventListener('click', (e) => {
  let id = div.getAttribute("href");
  let id2 = div.getAttribute("data-href");
  alert("href es: "+id+" y el id por el atributo data-href: "+id2);
 border:1px solid red;
 padding: 5px;
 transition: all .3s;

 background: black;
<script src=""></script>
<div class="abrir" href="#modal" data-href="#modal">Abrir modal Jquery</div>

<div class="abrir2" href="#modal" data-href="#modal">Abrir modal JS puro</div>

If you noticed you create two options, one with Jquery and one with Js puro , use the one that suits you best, the idea is to obtain the id by obtaining the attribute in this case href of the div, although href is not an attribute of the div you can declare it and use it as a pseudo-tribute, that means it will not affect you in the behaviors of the div, if you also notice create another attribute called data-href so that you could see that you can create an attribute with a name that suits you, in these times the data-something is used a lot, you can use that to get the id of the modal or use the href as you wish, once you get the id you can invoke your modal and open it with a method of the modal, example in bootstrap you would open it like this: $("#modal").modal("show"); , I do not know what plugin you are using but you already have the general idea, get the id and then invoke the method that would open your modal. I hope it works for you.

Example calling a modal with Bootstrap:

$(".abrir").on("click", (e) => {

 let id = $("href");


answered by 25.09.2018 в 06:05