Table of contents

HTML <button> Tag

What is HTML <button> Tag?

The HTML button tag is used to create a clickable button in a webpage. This button can perform actions such as submitting a form, running JavaScript code, or linking to another page. It is one of the most commonly used tags in forms and interactive web elements.

The HTML button tag is important because it improves user interaction and provides a clear way to trigger actions. Buttons are widely used for submissions, navigation, confirmations, and custom scripts. It is placed inside the body section of an HTML document and can contain text, images, or other HTML content.

Syntax of the HTML <button> Tag

plaintext
<button type="button">Button Text</button>

The “type” attribute defines the purpose of the button.
Common values are:
• type="button" – for a general clickable button.
• type="submit" – submits the form data.
• type="reset" – resets all form fields.

Examples of HTML <button> Tag

Example 1: Basic HTML Button

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <button type="button">Click Me</button>

</body>
</html>

In this example, the button displays simple text “Click Me”. When clicked, it performs no specific action unless connected to JavaScript or a form.

Example 2: Button Used with JavaScript

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <button type="button" onclick="alert('Welcome to Scholar247!')">Visit Scholar247</button>

</body>
</html>

This example shows a button that triggers a JavaScript alert when clicked. It displays the message “Welcome to Scholar247!” showing how the HTML button tag can handle events dynamically.

Example 3: Submit Button Example

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <form action="https://www.scholar247.com/submit">
    <input type="text" name="username" placeholder="Enter your name">
    <button type="submit">Submit</button>
  </form>

</body>
</html>

In this example, the button is used to submit a form to the Scholar247 submission page. The type="submit" attribute makes the button send the form data to the specified action URL.

Attributes of the HTML <button> Tag

• type – Specifies the type of button (button, submit, reset).
• name – Assigns a name to the button (useful in forms).
• value – Defines the value sent with the button when submitted.
• disabled – Disables the button so it cannot be clicked.
• autofocus – Automatically focuses on the button when the page loads.
• form – Associates the button with a specific form by ID.
• onclick – Executes JavaScript when the button is clicked.

Best Practices for HTML <button> Tag

• Always specify the type attribute to avoid unexpected form submission.
• Use descriptive button text that clearly tells users what it does.
• Avoid using too many buttons on one page to keep the interface clean.
• Combine buttons with CSS for better design and accessibility.
• Use alt text or ARIA labels if the button contains only icons.
• Keep button functionality simple and meaningful for users.

FAQs About the HTML <button> Tag

Q1: What is the purpose of the HTML button tag?

The button tag creates a clickable button used to perform actions like submitting forms, triggering scripts, or linking to pages.

Q2: Can I use images inside a button?

Yes, the button tag can contain images or icons using the img tag inside it for better visuals.

Q3: What is the difference between input type="button" and button tag?

The button tag allows more flexible content like text, HTML, or images, while input type="button" supports only plain text.

Q4: Is the HTML button tag good for SEO?

Yes, when used properly with meaningful text, buttons help improve accessibility and user experience, which indirectly supports SEO.

Q5: Can I disable a button using HTML?

Yes, by adding the disabled attribute, you can prevent users from clicking the button until certain conditions are met.

HTML

Related Articles