HTML Attributes

Now that we've covered some essential HTML tags, it's time to introduce another crucial concept: HTML Attributes.

Attributes provide additional information about HTML elements and help to customize them. We used them in the previous section with certain tags but glossed over the meaning.

What are HTML Attributes?

HTML attributes are special words used inside the opening tag of an HTML element to control the element's behavior or provide extra information about it. Attributes usually come in name/value pairs like this: name="value".

Basic Syntax of Attributes

Attribute Name: The name of the attribute you want to add.
Equal Sign: The equal sign = is used to assign a value to the attribute.
Attribute Value: The value of the attribute is enclosed in double quotes " ".

Here’s a basic example using the <a> tag with an attribute:

<a href="https://www.example.com">Visit Example</a>

href is the attribute name.
"https://www.example.com" is the attribute value.

Common HTML Attributes

Let’s explore some common attributes used in HTML elements. You won't need to memorize these as you'll get used to using them over time. But being aware of them will give you some ideas about the differences.

Input Attributes

Let's start with inputs because you'll see how just changing the type can create such different outcomes:

<!-- Text Input -->
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name">

<!-- Password Input -->
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter your password">

<!-- Email Input -->
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email">

<!-- Number Input -->
<label for="number">Number:</label>
<input type="number" id="number" min="1" max="10" step="1" placeholder="Enter a number between 1 and 10">

<!-- Date Input -->
<label for="date">Date:</label>
<input type="date" id="date">

<!-- Time Input -->
<label for="time">Time:</label>
<input type="time" id="time">

<!-- Color Input -->
<label for="color">Color:</label>
<input type="color" id="color">

<!-- File Input -->
<label for="file">File:</label>
<input type="file" id="file">

<!-- Radio Buttons -->
<fieldset>
  <legend>Choose an option:</legend>
  <input type="radio" id="option1" name="choice" value="option1">
  <label for="option1">Option 1</label>
  <input type="radio" id="option2" name="choice" value="option2">
  <label for="option2">Option 2</label>
  <input type="radio" id="option3" name="choice" value="option3">
  <label for="option3">Option 3</label>
</fieldset>

<!-- Checkboxes -->
<fieldset>
  <legend>Select options:</legend>
  <input type="checkbox" id="optionA" name="optionA" value="1">
  <label for="optionA">Option A</label>
  <input type="checkbox" id="optionB" name="optionB" value="2">
  <label for="optionB">Option B</label>
  <input type="checkbox" id="optionC" name="optionC" value="3">
  <label for="optionC">Option C</label>
</fieldset>

<!-- Range Input -->
<label for="range">Range:</label>
<input type="range" id="range" min="0" max="100" step="10">

<!-- Tel Input -->
<label for="tel">Phone Number:</label>
<input type="tel" id="tel" placeholder="Enter your phone number">

<!-- URL Input -->
<label for="url">Website:</label>
<input type="url" id="url" placeholder="Enter a website URL">

<!-- Search Input -->
<label for="search">Search:</label>
<input type="search" id="search" placeholder="Search...">

And the output:

The placeholder attribute provides a hint to the user about what to enter in an <input> element.

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

The value attribute specifies the initial value of an <input> element.

<input type="text" value="Default Text">
<input type="number" value="42">

The disabled attribute can be used to disable form elements, preventing user interaction:

<input type="text" value="You can't edit this" disabled>
<button disabled>Can't click this button</button>

Link Attributes

The href attribute is used in <a> (anchor) tags to specify the URL of the page the link goes to.

<a href="https://www.codu.co">Visit Codú</a>
<a href="https://www.w3schools.com/">w3 Schools</a>

The target attribute is used in <a> tags to specify where to open the linked document.

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

Image Attributes

The src attribute is used in <img> tags to specify the path to the image file. The alt attribute is used in <img> tags to provide alternative text for an image. This is important for accessibility and search engines.

<img src="https://www.example.com/image.jpg" alt="Description of the image">
<img src="https://www.learn-html.com/logo.png" alt="HTML Logo">

The style Attribute

The style attribute allows you to add CSS (Cascading Style Sheets) directly to a HTML element for inline styling.

We haven't covered CSS, so don't worry too much about the syntax. This is just to show you how useful the attribute might be.

<p style="color: blue; font-size: 20px;">This is a styled paragraph.</p>
<div style="background-color: lightgray; padding: 10px;">Styled div container</div>

The id and class Attributes

The id attribute uniquely identifies an HTML element, while the class attribute classifies multiple elements.

<p id="unique-paragraph">This paragraph has a unique ID.</p>
<p class="common-paragraph">This paragraph belongs to a class of elements.</p>
<p class="common-paragraph">This is another paragraph with the same class.</p>

You'll often see these used to style things.

99% of the time you'll be using classes because they'll allow you to group and target multiple elements instead of ID which can only target a single element.

Here you can see it in action:

By using attributes, you can customize how elements behave and display on your webpage.

As you continue learning HTML, you'll discover more attributes and how to use them effectively to create dynamic and interactive web pages.