lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans"
      rel="stylesheet"
    />
  </head>
  <body>
    
    <div class="highlight">Highlight</div>

    <br />

    
    <img src="https://picsum.photos/seed/picsum/300" alt="Placeholder Image" />
  </body>
</html>

# HTML Attributes

`Attributes` are used in HTML elements to provide additional information about a tag's behavior, style, data, or to control the element's actions.

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

```html title="Structure of HTML Attributes"
<elementName attributeName="attributeValue"> ... </elementName>
```

<br />

### Attribute Usage Example

```html title="img Tag with src, alt Attributes"
<img src="imagePath.jpg" alt="Image description" />
```

The `src` attribute is a mandatory attribute for the `<img>` tag, specifying the path of the image to be displayed.

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

<br />

## Key Attribute Examples

1. Common to HTML Tags: `class`, `id` Attributes

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

   - `class`: Used when applying the same style to several elements. Multiple elements can share the same class name.
     ```html title="Example of class Attribute"
     <div class="highlight">Highlight class applied</div>
     ```
   - `id`: Used to differentiate specific elements or to select particular elements with JavaScript. The `id` value must be unique and not duplicated across HTML elements.
     ```html title="Example of id Attribute"
     <div id="main-content">HTML element with main-content ID</div>
     ```

<br />

2. Attributes Unique to img Tag: `src`, `alt`

   In `img` elements, `src` specifies the path to the image, while `alt` provides alternative text to display when the image cannot be shown.

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

<br />

3. Attributes Unique to a Tag: `href`

   The `href` attribute in an `a` element, which creates a hyperlink used for navigating to other pages, specifies the URL of the page to navigate to.

   ```html title="a Tag with href Attribute"
   <a href="https://www.example.com">Visit Website</a>
   ```

<br />

Follow the highlighted parts of the code and try entering it yourself.

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

HTML Attributes

Attribute Usage Example

Key Attribute Examples

Where are attributes located in an HTML element?