Link

The <a> tag is used to create hyperlinks that enable users to navigate between different web pages. When a user clicks on a link, the browser sends a request to the server for the page associated with the link and displays the response on the screen. The href attribute helps specify the URL of the destination page.

Link Attributes:

target

By default, the link opens in the same browser tab. The target attribute allows us to modify this behavior. To open a link in a new tab, use target="_blank".

download

The download attribute can be used with the HTML <a> tag to specify that the target resource should be downloaded instead of displayed in the browser. When the download attribute is used, the browser prompts the user to save the file with the specified filename. For example, if we need to create an element with the following functionality: when the user clicks on the link, the browser will download the "myfile.pdf" file from https://example.com/ and prompt the user to save it with the filename myfile.pdf.

href

The href attribute is used not only to navigate to other pages but also to create links to email addresses, telephone numbers, and specific sections.

Additionally, the href attribute can be utilized to navigate to specific sections within a web page. To create an anchor tag, assign an id attribute (a unique identifier) to the desired section we want to scroll to. The href attribute takes a value starting with the # symbol followed by the id value.

Let's explore the following example, presented in the form of CodeSandbox. This platform enables code inspection and allows you to examine the code's functionality.

Note

Please take a moment to inspect the functionality by clicking on the links and observing how the live page scrolls to the specific sections. Additionally, pay attention to the attributes of the a tag and the h2 tag.

To view the code, drag the slider on the left side of the code sandbox. This will reveal the existing code inside the editor.

Button

The <button> tag in HTML is used to create a clickable button that can trigger an action, such as submitting a form, executing a JavaScript function like opening and closing a pop-up window, or toggling a mobile menu. By default, the <button> has the type attribute, and its value is submit. However, we often need to specify type="button".

Sum up

The <a> tag is used for creating hyperlinks to other web pages, documents, or resources. In contrast, the <button> tag is used for creating interactivity on a web page, triggering an event, or performing an action. It's essential not to mix their purposes.