HTML anchor tag takes entire line

Regular anchor Tags are inline elements. You have to check if in your CSS, you already assign anchors globally to a block element. a { display: block;}

For fast fix: Wrap your code anchor line (Breadcrumbs) in a container and assign with a unique id or class Name. Then you can assign only for this line the anchors to a inline element.

a {
 display: block;
}
.anchor-regular a {
  display: inline;
}

<a href="">test block </a> <a href="">test block</a>
<div class="anchor-regular">
<a href="">First Link</a> / <a href="">Second Link</a> / <a href="">Third Link</a>
</div>

HTML anchor tags (a) behave like you want by default. What you are getting means that somewhere in your code, there is a display:block, display:flex or display:grid applied on a elements. You could overwrite this with a display:inline, like so:

a{
 display:inline;
}

<a href="">First Link</a> / <a href="">Second Link</a> / <a href="">Third Link</a>

The <a> element is not supposed to be used like you are doing here. <a> is an inline element - which means that it goes with the "flow" of other elements and it does not have a width and height of its own. In other words, it's supposed to be used like a "wrapper" around other elements.

So instead of this:

<a>I'm a link</a>

This is a better idea:

<p><a>I'm a link</a></p>

and then in your styling, you actually style the <p> tag and not the <a>.

In your case, you have a group of links(a breadcrumb, by the looks of it) which you want to represent using links. So you could do something like this:

<ul class="mybreadcrumb">
  <li class="breadcrumb-item"><a>First</a></li>
  <li class="breadcrumb-item"><a>Second</a></li>
  <li class="breadcrumb-item"><a>Third</a></li>
</ul>

And then in your CSS:

ul.mybreadcrumb {
  list-style: none;
}

ul.mybreadcrumb li {
  display: inline-block;
}

ul.mybreadcrumb li+li:before {
  content: ' / ';
}

That + is a sibling selector - so it'll add a / before the second and onward li element.