Attributes

Introduction: Supercharging Your HTML 🔌

You know how to create HTML tags, but how do you customize them? Attributes are your answer!

Think of attributes like settings or controls that modify how HTML elements behave.

Real-World Analogy: Customizing Your Car 🚗

Basic Car (HTML Tag):
    <car>

Customized Car (HTML Tag with Attributes):
    <car color="red" speed="fast" doors="4">
         ↑         ↑       ↑           ↑
      Attribute  Value  Attribute   Value

Just like car options customize your vehicle, attributes customize HTML elements!

What are Attributes? ⚙️

Attributes provide extra information about HTML elements.

Attribute Anatomy

<tagname attribute="value">Content</tagname>
           ↑          ↑
        Name       Value

Structure:

Name - What you're setting (like id, class, src)
Value - The setting (in quotes: "value")
Location - Always in the opening tag

Basic Example

<h1 id="main-title" class="header">Welcome!</h1>
    ↑               ↑
  Attribute 1    Attribute 2

Breaking it down:

id="main-title" - Gives unique identifier
class="header" - Assigns CSS class for styling

Visual Output:

Welcome!

(Behind the scenes, this heading can now be styled and referenced!)

Attribute Syntax Rules 📏

1. Always in opening tag

<img src="photo.jpg">  ✅
<img>src="photo.jpg"</img>  ❌

2. Name then equals then value

<a href="url">  ✅
<a "url"=href>  ❌

3. Use quotes around values

<img alt="A cat">  ✅ (double quotes)
<img alt='A cat'>  ✅ (single quotes)
<img alt=A cat>    ❌ (no quotes - breaks with spaces!)

4. Multiple attributes separated by spaces

<img src="photo.jpg" alt="Sunset" width="500">

Case Sensitivity

Attributes are case-insensitive (but lowercase is standard):

<!-- All work the same -->
<h1 id="heading">Text</h1>  ✅ Recommended
<h1 ID="heading">Text</h1>  ✅ Works
<h1 Id="heading">Text</h1>  ✅ Works

<!-- But stick to lowercase! -->

Best practice: Always use lowercase for consistency! 🔡

Quick Reference: Most Used Attributes

Attribute	Purpose	Example
`id`	Unique identifier	`<div id="header">`
`class`	CSS styling group	`<p class="intro">`
`src`	Image/script source	`<img src="cat.jpg">`
`href`	Link destination	`<a href="page.html">`
`alt`	Image description	`<img alt="A cat">`
`style`	Inline CSS	`<p style="color:red">`
`title`	Tooltip text	`<span title="Info">`

Attribute Categories 📚

Attributes are organized into categories based on their purpose:

┌──────────────────────────────────────┐
│  Global Attributes                   │
│  → Work on ANY element               │
│  → id, class, style, title...        │
└──────────────────────────────────────┘
         ↓
┌──────────────────────────────────────┐
│  Specific Attributes                 │
│  → Only for certain elements         │
│  ├─ Event (onclick, onload...)       │
│  ├─ Form (action, method...)         │
│  ├─ Link (href, target...)           │
│  ├─ Image (src, alt...)              │
│  └─ Table (border, cellpadding...)   │
└──────────────────────────────────────┘

Learning path:

Start with Global - Work everywhere, learn first!
Then Specific - Learn as you encounter each element type

Let's explore each category! 👇

Global Attributes 🌍

Global attributes work on ANY HTML element! Master these first.

`id` - Unique Identifier 🆔

Think of it like a Social Security Number - each element gets one unique ID.

<h1 id="main-title">Welcome</h1>
<p id="intro-text">This is paragraph 1</p>
<p id="description">This is paragraph 2</p>

Why use id?

1. JavaScript targeting:

// Find element by ID
document.getElementById("main-title").style.color = "blue";

2. CSS styling (specific element):

#main-title {
  color: blue;
  font-size: 32px;
}

3. Anchor links (jump to section):

<a href="#contact">Jump to Contact</a>
<!-- Somewhere below... -->
<section id="contact">Contact Us!</section>

IMPORTANT: IDs Must Be Unique!

<!-- ❌ WRONG - Same ID used twice -->
<div id="box">Box 1</div>
<div id="box">Box 2</div>

<!-- ✅ CORRECT - Each ID is unique -->
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>

Rule: Only ONE element per page can have a specific ID!

`class` - Group Styling 🎨

Think of classes like uniforms - many elements can wear the same class!

Unlike id, classes can be reused!

<style>
  .highlight {
    background-color: yellow;
  }
</style>

<p class="highlight">This is highlighted</p>
<span class="highlight">This is also highlighted</span>
<div class="highlight">This too!</div>

Output:

.highlight-demo { background-color: yellow; }

This is highlighted

This is also highlighted

This too!

` }} style={{ border: '1px solid black', padding: '10px' }}/>

Comparison: id vs class

Feature	`id`	`class`
Uniqueness	Only 1 per page	Reusable
CSS selector	`#my-id`	`.my-class`
Use case	Unique elements	Groups of elements
Example	`<div id="header">`	`<p class="text">`

Visual:

ID (unique):
    header ← Only one!

Class (reusable):
    article ← Can have many!
    article
    article

Multiple Classes - Combine classes with spaces!

<style>
  .blue-text {
    color: blue;
  }

  .large-text {
    font-size: 24px;
  }

  .bold-text {
    font-weight: bold;
  }
</style>

<p class="blue-text large-text bold-text">
  This text is blue, large, AND bold!
</p>

Output:

.demo-blue {color: blue;} .demo-large {font-size: 24px;} .demo-bold {font-weight: bold;}

This text is blue, large, AND bold!

` }} style={{ border: '1px solid black', padding: '10px' }}/>

How it works:

<element class="class1 class2 class3">
                 ↑      ↑      ↑
           Space-separated list

`style` - Inline CSS 🎨

Add CSS directly to an element (not recommended for large projects).

<p style="color: red; font-size: 20px;">Red text, 20px size</p>

Output:

Red text, 20px size

` }} style={{ border: '1px solid black', padding: '10px' }}/>

Best practice:

<!-- ❌ Not ideal (inline styles) -->
<p style="color: blue;">Text</p>

<!-- ✅ Better (use classes) -->
<style>
  .blue-text { color: blue; }
</style>
<p class="blue-text">Text</p>

tip

When to use style

Use inline styles for:

Quick testing/prototyping
Dynamic styles from JavaScript

Use classes for:

Production code
Reusable styles
Better organization

`title` - Tooltip Text 💬

Shows text when hovering over an element.

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Click to submit form">Submit</button>
<img src="photo.jpg" alt="Cat" title="This is my cat Fluffy">

Try it - Hover over the image:

` }} style={{ border: '1px solid black', padding: '10px' }}/>

Use cases:

Abbreviations/acronyms
Extra information
Help text for buttons/icons

`contenteditable` - Make Text Editable ✏️

Allows users to edit content directly in the browser!

<p contenteditable="true">Click to edit this text!</p>

Try it - Click and edit:

Click to edit this text!

` }} style={{ border: '1px solid black', padding: '10px' }}/>

Use cases:

Rich text editors
Note-taking apps
Inline editing features

`hidden` - Hide Elements 👻

Completely hides an element from view.

<p>This is visible</p>
<p hidden>This is hidden</p>
<p>This is also visible</p>

Output:

This is visible

This is also visible

` }} style={{ border: '1px solid black', padding: '10px' }}/>

Difference from CSS:

<!-- hidden attribute -->
<div hidden>Completely removed from layout</div>

<!-- CSS display: none -->
<div style="display: none;">Same effect as hidden</div>

<!-- CSS visibility: hidden -->
<div style="visibility: hidden;">Hidden but takes up space</div>

Other Global Attributes

Attribute	Purpose	Example
`accesskey`	Keyboard shortcut	`<button accesskey="s">Save</button>`
`tabindex`	Tab order	`<input tabindex="1">`
`lang`	Language	`<p lang="es">Hola</p>`
`dir`	Text direction	`<p dir="rtl">Right to left</p>`

Global Attributes Recap

Most important to learn first:

id - Unique identifier
class - Reusable styling
style - Inline CSS
title - Tooltips

Master these 4, then explore the rest!

Event Attributes

Event attributes are used to define JavaScript code that will run when a specific event occurs on an HTML element. These attributes are added to an HTML element to make it interactive and responsive to user actions.

Here are some of the most commonly used event attributes in HTML along with coding examples:

onclick

This attribute is used to run JavaScript code when an element is clicked.

<button onclick="alert('Hello, world!')">Click me!</button>

This will give the following result:

Click me!` }} style={{ border: '1px solid black' }} />

onmouseover

Used to run JavaScript code when the mouse is moved over an element.

<img src="image.jpg" onmouseover="alert('You hovered over the image!')" />

This will give the following result:

` }} style={{ border: '1px solid black' }} />

onload

This attribute is used to run JavaScript code when a web page or image has finished loading.

<body onload="alert('The page has finished loading!')"></body>

onsubmit

This attribute is used to run JavaScript code when a form is submitted.

<form onsubmit="alert('The form has been submitted!')">
  <!-- Form fields go here -->
  <button type="submit">Submit</button>
</form>

This will give the following result:

` }} style={{ border: '1px solid black' }} />

onkeydown

This attribute is used to run JavaScript code when a key on the keyboard is pressed down.

<input type="text" onkeydown="alert('You pressed a key!')" />

onfocus

This attribute is used to run JavaScript code when an element receives focus, such as when a user clicks on it or tabs to it.

<input type="text" onfocus="alert('This input field has received focus!')" />

onblur

This attribute is used to run JavaScript code when an element loses focus, such as when a user clicks away from it or tabs to another element.

<input type="text" onblur="alert('This input field has lost focus!')" />

These are just a few examples of the many event attributes available in HTML. Using event attributes correctly can make your web pages more interactive and engaging for users.

Form Attributes

Form attributes are used to define the behavior of form elements, such as input fields, checkboxes, radio buttons, and buttons.

Here are some of the most commonly used form attributes in HTML along with coding examples:

action

This attribute is used to define the URL of the page that will process the form data when the form is submitted.

<form action="https://mercurysols.org/contact">
  <!-- Form fields go here -->
  <button type="submit">Submit</button>
</form>

method

This attribute is used to define the HTTP method that will be used when the form is submitted.

<form action="https://mercurysols.org/contact" method="post">
  <!-- Form fields go here -->
  <button type="submit">Submit</button>
</form>

enctype

This attribute is used to define the encoding type that will be used when the form is submitted.

<form
  action="https://mercurysols.org/contact"
  method="post"
  enctype="multipart/form-data"
>
  <!-- Form fields go here -->
  <button type="submit">Submit</button>
</form>

target

This attribute is used to define where to display the response that is received after submitting the form.

<form action="https://mercurysols.org/contact" method="post" target="_blank">
  <!-- Form fields go here -->
  <button type="submit">Submit</button>
</form>

autocomplete

This attribute is used to define whether or not the browser should autocomplete the form fields.

<form action="https://mercurysols.org/contact" method="post" autocomplete="off">
  <!-- Form fields go here -->
  <button type="submit">Submit</button>
</form>

novalidate

This attribute is used to define whether or not the browser should validate the form fields when the form is submitted.

<form action="https://mercurysols.org/contact" method="post" novalidate>
  <!-- Form fields go here -->
  <button type="submit">Submit</button>
</form>

required

This attribute is used to define whether or not a form field is required.

<input type="text" required />

autofocus

This attribute is used to define whether or not a form field should automatically receive focus when the page loads.

<input type="text" autofocus />

placeholder

This attribute is used to define a short hint that describes the expected value of a form field.

<input type="text" placeholder="Enter your name" />

This will give the following result:

` }} style={{ border: '1px solid black' }} />

disabled

This attribute is used to define whether or not a form field is disabled.

<input type="text" disabled />

This will give the following result:

` }} style={{ border: '1px solid black' }} />

readonly

This attribute is used to define whether a form field is read-only.

<input type="text" readonly />

This will give the following result:

` }} style={{ border: '1px solid black' }} />

maxlength

This attribute is used to define the maximum number of characters allowed in a form field.

<input type="text" maxlength="10" />

This will give the following result:

` }} style={{ border: '1px solid black' }} />

minlength

This attribute is used to define the minimum number of characters allowed in a form field.

<input type="text" minlength="10" />

This will give the following result:

` }} style={{ border: '1px solid black' }} />

Link Attributes

Link attributes are used to define the behavior of links. Here are some of the most commonly used link attributes in HTML along with coding examples:

href

This attribute is used to define the URL of the page the link goes to.

<a href="https://mercurysols.org">Mercury Solutions</a>

This will give the following result:

Mercury Solutions` }} style={{ border: '1px solid black' }} />

target

This attribute is used to define where to display the linked URL.

<a href="https://mercurysols.org" target="_blank">Mercury Solutions</a>

This will give the following result:

Mercury Solutions` }} style={{ border: '1px solid black' }} />

Image Attributes

Image attributes are used to define the behavior of images. Here are some of the most commonly used image attributes in HTML along with coding examples:

src

This attribute is used to define the URL of the image.

<img src="https://mercurysols.org/images/logo.png" />

alt

This attribute is used to define an alternate text for an image, if the image can't be displayed.

<img src="https://mercurysols.org/images/logo.png" alt="Mercury Solutions" />

width

This attribute is used to define the width of an image.

<img src="https://mercurysols.org/images/logo.png" width="100" />

height

This attribute is used to define the height of an image.

<img src="https://mercurysols.org/images/logo.png" height="100" />

Table Attributes

Table attributes are used to define the behavior of tables. Here are some of the most commonly used table attributes in HTML along with coding examples:

border

This attribute is used to define the width of the border around a table.

<table border="1">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

This will give the following result:

First NameLast NameJohnDoe` }} style={{ border: '1px solid black' }} />

cellpadding

This attribute is used to define the space between the cell content and its border.

<table cellpadding="10">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

cellspacing

This attribute is used to define the space between cells.

<table cellspacing="10">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

width

This attribute is used to define the width of a table.

<table width="100%">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

height

This attribute is used to define the height of a table.

<table height="100%">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

align

This attribute is used to define the horizontal alignment of a table.

<table align="center">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

bgcolor

This attribute is used to define the background color of a table.

<table bgcolor="#f1f1f1">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

Common Mistakes to Avoid ⚠️

1. Forgetting Quotes

<!-- ❌ Wrong - breaks with spaces -->
<img alt=A beautiful sunset>

<!-- ✅ Right -->
<img alt="A beautiful sunset">

2. Duplicate IDs

<!-- ❌ Wrong - same ID twice -->
<div id="box">First</div>
<div id="box">Second</div>

<!-- ✅ Right - unique IDs -->
<div id="box1">First</div>
<div id="box2">Second</div>

3. Attributes in Closing Tags

<!-- ❌ Wrong -->
<p>Text</p class="highlight">

<!-- ✅ Right -->
<p class="highlight">Text</p>

4. Wrong Quote Mixing

<!-- ❌ Wrong - mixed quotes -->
<img src="photo.jpg' alt='A cat">

<!-- ✅ Right - consistent quotes -->
<img src="photo.jpg" alt="A cat">

Key Takeaways 🎯

Remember: ✅ Attributes customize HTML elements ✅ Always in the opening tag ✅ Format: name="value" ✅ Global attributes work on any element ✅ Specific attributes only on certain elements

Essential attributes to master:

<!-- Identification -->
<div id="unique-element">           Unique identifier
<div class="reusable-style">        Grouping & styling

<!-- Images -->
<img src="photo.jpg" alt="Cat">     Source & description

<!-- Links -->
<a href="page.html">Link</a>        Destination

<!-- Forms -->
<input type="text" placeholder="Name" required>

<!-- Styling -->
<p style="color: red;">Text</p>     Inline CSS

<!-- Interactivity -->
<button onclick="doSomething()">    JavaScript events

Next steps:

Practice adding attributes to your HTML
Experiment with different attribute combinations
Learn CSS to make full use of class and id
Explore JavaScript to leverage id for interactivity

You're now ready to create dynamic, interactive web pages! 🚀

Quick Reference Card 📋

<!-- Structure & Identification -->
<element id="unique">              One per page
<element class="style1 style2">    Reusable, multiple OK

<!-- Styling -->
<element style="color: red;">      Inline CSS
<element title="Tooltip">          Hover text

<!-- Links & Images -->
<a href="url" target="_blank">     Link destination & window
<img src="file.jpg" alt="Desc">    Image source & description

<!-- Forms -->
<input type="text"                 Input type
       placeholder="Hint"          Hint text
       required                    Must fill
       disabled>                   Can't edit

<!-- Events -->
<button onclick="fn()">             Click handler
<input onchange="fn()">            Change handler

<!-- Visibility -->
<div hidden>                        Hide element
<div contenteditable="true">        Make editable

Introduction: Supercharging Your HTML 🔌​

Real-World Analogy: Customizing Your Car 🚗​

What are Attributes? ⚙️​

Attribute Anatomy​

Basic Example​

Welcome!

Attribute Syntax Rules 📏​

Quick Reference: Most Used Attributes​

Attribute Categories 📚​

Global Attributes 🌍​

id - Unique Identifier 🆔​

class - Group Styling 🎨​

style - Inline CSS 🎨​

title - Tooltip Text 💬​

contenteditable - Make Text Editable ✏️​

hidden - Hide Elements 👻​

Other Global Attributes​

Event Attributes​

onclick​

onmouseover​

onload​

onsubmit​

onkeydown​

onfocus​

onblur​

Form Attributes​

action​

method​

enctype​

target​

autocomplete​

novalidate​

required​

autofocus​

placeholder​

disabled​

readonly​

maxlength​

minlength​

Link Attributes​

href​

target​

Image Attributes​

src​

alt​

width​

height​

Table Attributes​

border​

cellpadding​

cellspacing​

width​

height​

align​

bgcolor​

Common Mistakes to Avoid ⚠️​

1. Forgetting Quotes​

2. Duplicate IDs​

3. Attributes in Closing Tags​

4. Wrong Quote Mixing​

Key Takeaways 🎯​

Quick Reference Card 📋​

Introduction: Supercharging Your HTML 🔌

Real-World Analogy: Customizing Your Car 🚗

What are Attributes? ⚙️

Attribute Anatomy

Basic Example

Attribute Syntax Rules 📏

Quick Reference: Most Used Attributes

Attribute Categories 📚

Global Attributes 🌍

`id` - Unique Identifier 🆔

`class` - Group Styling 🎨

`style` - Inline CSS 🎨

`title` - Tooltip Text 💬

`contenteditable` - Make Text Editable ✏️

`hidden` - Hide Elements 👻

Other Global Attributes

Event Attributes

onclick

onmouseover

onload

onsubmit

onkeydown

onfocus

onblur

Form Attributes

action

method

enctype

target

autocomplete

novalidate

required

autofocus

placeholder

disabled

readonly

maxlength

minlength

Link Attributes

href

target

Image Attributes

src

alt

width

height

Table Attributes

border

cellpadding

cellspacing

width

height

align

bgcolor

Common Mistakes to Avoid ⚠️

1. Forgetting Quotes

2. Duplicate IDs

3. Attributes in Closing Tags

4. Wrong Quote Mixing

Key Takeaways 🎯

Quick Reference Card 📋