---
description: HTML attributes provide additional information about HTML elements.
---

# HTML Attributes

* All HTML elements can have **attributes**
* Attributes provide **additional information** about elements
* Attributes are always specified in **the start tag**
* Attributes usually come in name/value pairs like: **name="value"**

### The href, src, alt, width, height, style, lang   Attribute

The `<a>` tag defines a hyperlink. The **`href`** attribute specifies the URL of the page the link goes to.

The `<img>` tag is used to embed an image in an HTML page. The **`src`** attribute specifies the path to the image to be displayed.

The `<img>` tag should also contain the `width` and `height` attributes, which specify the width and height of the image (in pixels).

The required `alt` attribute for the `<img>` tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the `src` attribute, or if the user uses a screen reader.

The `style` attribute is used to add styles to an element, such as color, font, size, and more.

You should always include the `lang` attribute inside the `<html>` tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

{% code overflow="wrap" lineNumbers="true" %}
```html
<!DOCTYPE html>
<html lang="en">
    <body>
        <a href="https://www.google.com">Visit Google</a>
        <img src="img_girl.jpg">
        <img src="img_girl.jpg" width="500" height="600">
        <img src="img_girl.jpg" alt="Girl with a jacket">
        <p style="color:red;">This is a red paragraph.</p>
        <p title="John 'ShotGun' Nelson">
        <h1 style="font-size:60px;">Heading 1</h1>
    </body>
</html>
```
{% endcode %}

### Summary

* All HTML elements can have **attributes**
* The `href` attribute of `<a>` specifies the URL of the page the link goes to
* The `src` attribute of `<img>` specifies the path to the image to be displayed
* The `width` and `height` attributes of `<img>` provide size information for images
* The `alt` attribute of `<img>` provides an alternate text for an image
* The `style` attribute is used to add styles to an element, such as color, font, size, and more
* The `lang` attribute of the `<html>` tag declares the language of the Web page
* The `title` attribute defines some extra information about an element
