lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

# HTML Attributes

`Attributes` provide additional information or control the behavior and style of HTML elements.

HTML attributes are included in the opening tag and are written in the format of `name="value"`.

```html title="HTML Attribute Structure"
<element attributeName="attributeValue"> ... </element>
```

<br />

### How can we use attributes?

The `src` attribute is an essential attribute of the `<img>` tag, specifying the path of the image to be displayed.

```html title="img Tag src, alt Attributes"
<img src="image-path.jpg" alt="image description" />
```

An `img` tag without a defined src attribute will not display an image.

<br />

## Examples of Key Attributes

Let's learn about the major attributes used in HTML elements.

First, let's look at the attributes that can be used with all HTML elements.

### Common HTML Tag Attributes: `class` and `id`

The `id` attribute is used when assigning a unique identifier to a specific element, and the `class` attribute is used to apply the same style to multiple elements.

<br />

#### `class`: Used to apply the same style to multiple elements. Multiple elements can be given the same class name.
```html title="class Attribute Example"
<div class="highlight">Applying the highlight class</div>
```

<br />

#### `id`: Used to distinguish a specific element or select a specific element in JavaScript. The `id` value must be unique among HTML elements.
```html title="id Attribute Example"
<div id="main-content">HTML element with main-content ID</div>
```

<br />

### Attributes Specific to Certain Tags

Some attributes can only be used with specific tags. Below are two examples.

<br />

#### img Tag Specific Attributes: `src`, `alt`

In the `img` element, `src` specifies the path of the image, and `alt` specifies the alternative text that will be used if the image cannot be displayed.

```html title="img Tag src and alt Attributes"
<img src="https://picsum.photos/id/237/300" alt="a dog" />
```

<br />

#### a Tag Specific Attribute: `href`

In the `a` element, which creates a hyperlink to another page, the `href` attribute specifies the URL of the page to be navigated to.

The `target` attribute determines whether the page opens in a new window when the link is clicked. `target="_blank"` sets the link to open in a new window.

```html title="a Tag href Attribute"
<a href="https://example.com" target="_blank">Link</a>
```

<br />

Follow the highlighted section of the code and try inputting it.

HTML attributes are located in the element's start tag and are written as name/value pairs. For example, in `<a href="https://www.example.com">Link</a>`, `href` is the attribute and `https://www.example.com` is the attribute value.

HTML Attributes

How can we use attributes?

Examples of Key Attributes

Common HTML Tag Attributes: class and id

class: Used to apply the same style to multiple elements. Multiple elements can be given the same class name.

id: Used to distinguish a specific element or select a specific element in JavaScript. The id value must be unique among HTML elements.

Attributes Specific to Certain Tags

img Tag Specific Attributes: src, alt

a Tag Specific Attribute: href

Where are attributes located in an HTML element?

Common HTML Tag Attributes: `class` and `id`

`class`: Used to apply the same style to multiple elements. Multiple elements can be given the same class name.

`id`: Used to distinguish a specific element or select a specific element in JavaScript. The `id` value must be unique among HTML elements.

img Tag Specific Attributes: `src`, `alt`

a Tag Specific Attribute: `href`