How To Make A Word A Link In Html

In this article, nosotros are going to explore three different ways y'all can brand an HTML push act like a link.

These are the methods nosotros'll get over:

1. Styling a link to look like a button
2. Using the activeness and formaction attributes in a course
3. Using the JavaScript onclick event

Simply kickoff, allow's accept a look at the wrong approach.

Why doesn't this approach with the a element piece of work?

The code snippet beneath leads to the freeCodeCamp website when it is clicked.

                                  <a href="https://www.freecodecamp.org/">     <button>freeCodeCamp</button>   </a>                              

However, this is non valid HTML.

The a element can be wrapped around unabridged paragraphs, lists, tables, then forth, fifty-fifty entire sections, so long equally at that place is no interactive content within (e.g., buttons or other links). - (Source: Web Hypertext Application Applied science Working Group)

This is considered bad practice because it makes it unclear as to the user's intent.

Links are supposed to navigate the user to another part of the webpage or an external site. And buttons are supposed to perform a specific activeness like submitting a grade.

When yous nest 1 inside the other, it makes it confusing as to what activity you want performed. That is why it is all-time to not nest a button inside an anchor tag.

How to manner a link to await like a button with CSS

This offset approach does not utilise the button at all. We can manner an anchor tag to look like a button using CSS.

This is the default HTML styling for an anchor tag.

We tin add a course to the anchor tag and then use that course selector to style the element.

                                  <a grade="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>                              

If you wanted the link to open up a new page, you can add the target="_blank" attribute like this:

                                  <a target="_blank" class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>                              

Then, we can add a background color and change the font color similar this:

                .fcc-btn {   background-color: #199319;   color: white; }              

The next step would be to add some padding around the text:

                .fcc-btn {   groundwork-colour: #199319;   color: white;   padding: 15px 25px; }              

Lastly, we tin use the text-ornament holding to remove the underline from the text:

                .fcc-btn {   background-color: #199319;   colour: white;   padding: 15px 25px;   text-decoration: none; }              

Now we have an anchor tag that looks similar a button.

We tin also make this "push button" be a little more than interactive by changing the background color depending on the land of the link.

                .fcc-btn:hover {   background-color: #223094; }              

We could get more than intricate with the design, but this is just to prove you the basics of styling a link like a button.

You lot could also cull to use a CSS library like Bootstrap.

                                  <a grade="btn btn-chief" href="https://www.freecodecamp.org/">freeCodeCamp</a>                              

If your projection already includes Bootstrap, and then y'all can use the built-in push button styles. But I would not import Bootstrap just to mode one link.

What are the issues with this approach?

There is some fence whether it is practiced practice to style links every bit buttons. Some volition argue that links should always look like links and buttons should await like buttons.

In the web book titled Resilient Web Design, Jeremy Keith states that

one fabric should non be used equally a substitute for some other, otherwise the cease result is deceptive.

Why did I carp to bring upwards this argue?

My goal is not to make you cull one side of the fence over another. I simply desire yous to be aware of this ongoing discussion.

How to use the action and formaction attributes to make a push in a form

How to use the action attribute

Another alternative would be to nest the push inside a form and use the activity attribute.

Input example:

                                  <form activity="https://www.freecodecamp.org/">     <input blazon="submit" value="freeCodeCamp">   </form>              

Push example:

                                  <form activity="https://www.freecodecamp.org/">     <push button type="submit">freeCodeCamp</button>   </form>              

This would be the default push style.

We could employ the same styles every bit before, only we would take to add the cursor pointer and gear up the edge to none, like this:

                .fcc-btn {   background-colour: #199319;   color: white;   padding: 15px 25px;   text-ornament: none;   cursor: pointer;   border: none; }                              

How to apply the formaction attribute

Like to the previous approach, we can create a form and use the formaction aspect.

Input example:

                                  <form>     <input type="submit" formaction="https://www.freecodecamp.org/" value="freeCodeCamp">   </form>              

Push button example:

                                  <form>     <button blazon="submit" formaction="https://world wide web.freecodecamp.org/">freeCodeCamp</button>   </class>              

You tin can only utilize the formaction aspect with inputs and buttons that take type="image" or type="submit".

Is this semantically correct?

While this appears to be a working solution, there is a question if this is semantically correct.

We are using the form tags but this does not function like a real form. The purpose of a form is to collect and submit user information.

Merely we are using the submit button to navigate the user to another page.

When information technology comes to semantics, this is a non a good way to use the form tags.

Side effects for using the action and formaction attributes

When y'all click on the button, something interesting happens with the URL. The URL now has a question mark at the end of it.

The reason for this change is because the grade is using the Go method. You could switch to the Postal service method, just there might exist cases where that is non ideal either.

                                  <class method="Mail" activeness="https://www.freecodecamp.org/">     <button type="submit">freeCodeCamp</push>   </course>              

While this approach is valid HTML, it does come with this unintended side issue.

How to utilize the JavaScript onclick event to make a button

In the previous approaches, we have looked at HTML and CSS solutions. But we can also use JavaScript to achieve the same result.

Input example:

                                  <form>     <input type="push" onclick="window.location.href='https://world wide web.freecodecamp.org/';" value="freeCodeCamp" />  </form>              

Push instance:

                <button onclick="window.location.href='https://www.freecodecamp.org/';">freeCodeCamp</push button>                              

The location.href represents the location of a specific URL. In this case, Window.location.href will render https://www.freecodecamp.org/.

Drawbacks to this arroyo

While this solution does work, there are some potential bug to consider.

If the user has decided to disable JavaScript in their browser, then clearly this solution would not piece of work. Unfortunately, that could lead to a poor user feel.

Conclusion

The goal of this article was to prove you three different ways you tin can make buttons human activity like links.

The outset arroyo was to blueprint a link to wait like a button. We besides looked into the debate whether it is a good thought to change the appearance of links to wait like another chemical element.

The second approach used the form and formaction attributes. But nosotros also learned that this approach has some side effects with the URL and is non semantically correct.

The third approach used the JavaScript onclick event and the Window.location.href. But we also learned that this approach might not work if the user decides to disable JavaScript in their browser.

As a developer, it is really important to look at the pros and cons of a particular approach before incorporating information technology into your project.

I hope you enjoyed this article and learned a few things along the way.

Happy coding!

---

---

Learn to code for free. freeCodeCamp's open source curriculum has helped more than forty,000 people get jobs as developers. Get started

Source: https://www.freecodecamp.org/news/html-button-link-code-examples-how-to-make-html-hyperlinks-using-the-href-attribute-on-tags/

Posted by: gilbertguine1979.blogspot.com

Share this post