HTML Attributes

HTML attributes are

• name–value pairs written inside the opening tag of an HTML element.

• They provide extra information or modify the behavior of that element.

[!Example]

<input type="file" multiple accept=".pdf">

Here:

• type

• multiple

• accept

➡ are attributes of the <input> element.

• type, accept, disabled, href, etc. → attribute names

• "file", ".pdf", "submit" → attribute values

---

[!Important]

Important clarification (frameworks vs HTML)

In pure HTML:

<button disabled>

In React / Angular:

<button disabled={isLoading}>

• disabled is still an HTML attribute

• only the value is produced by JavaScript.

---

Categories of HTML attributes

(a) Element-specific attributes

These apply only to certain elements.

[!Examples]

• <input> → type, accept, multiple, placeholder, required

• <a> → href, target, rel

• <form> → action, method, enctype

---

(b) Global attributes

• These can be used on almost all HTML elements.

[!NOTE] Common global attributes:

• id

• class

• style

• title

• hidden

• tabindex

• contenteditable

• data-*

---

<form> element — important attributes

The <form> element defines a submission boundary.
It collects user inputs and sends them to a server endpoint.

1) action

• action specifies the URL where the form data will be sent when the form is submitted.

<form action="/api/register">

• If action is missing:

  • the browser submits to the current page URL.

[!example] Practical example

<form action="/api/register">
  <input name="email" type="email" required />
  <button type="submit">Register</button>
</form>

When the user clicks Register:

➡ the browser sends the form data to

/api/register

That endpoint is responsible for processing the data.

---

2) method

• method defines the HTTP method used for submission.

<form method="post">

• Common values:

  • get

  • post

[!example] Practical example

<form action="/search" method="get">
  <input name="q" />
  <button type="submit">Search</button>
</form>

After submit, the browser navigates to:

/search?q=yourText

Now compare with post:

<form action="/api/register" method="post">
  <input name="email" type="email" />
  <button type="submit">Register</button>
</form>

Here:

• data is sent in the request body

• not visible in the URL

[!NOTE]

Very short rule (form)

• action → where the data goes

• method → how the request is sent

---

<a> (anchor) element — important attributes

The <a> element creates a hyperlink to another resource.

1) href

• href specifies the destination URL.

<a href="/profile">Profile</a>

[!example] Practical example

<a href="https://example.com/docs">
  Open documentation
</a>

Clicking the link navigates the browser to that URL.

---

2) target

• target controls where the link is opened.

Most used value:

target="_blank"

[!example] Practical example

<a href="https://example.com" target="_blank">
  Open in new tab
</a>

Behavior:

• opens the link in a new browser tab / window

If target is not provided:

• it opens in the same tab

---

3) rel

• rel defines the relationship between the current page and the linked page.

• It is mainly important for security when using _blank.

[!example] Practical example (correct usage with new tab)

<a
  href="https://external-site.com"
  target="_blank"
  rel="noopener noreferrer"
>
  External link
</a>

Why this matters:

• noopener prevents the new page from accessing your page via window.opener

• noreferrer removes the referrer header

In real production code, you should always pair:

target="_blank" + rel="noopener noreferrer"

---

4) download

• download tells the browser to download the resource instead of navigating to it.

Practical example

<a href="/files/report.pdf" download>
  Download report
</a>

You can also control the file name:

<a href="/files/report.pdf" download="final-report.pdf">
  Download report
</a>

---