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

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" .

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="http://via.placeholder.com/350x150?text=Enlace%20imagen"/>
</a>

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 = $(e.target).attr("href");
 let id2 = $(e.target).attr("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);
});

.abrir,
.abrir2{
 border:1px solid red;
 border-radius:3px;
 display:inline-block;
 padding: 5px;
 transition: all .3s;
}

.abrir:hover,
.abrir2:hover{
 background: black;
 color:white;
 cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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 = $(e.target).attr("href");

 $(id).modal("show");

});