HTML Attributes

Attributes in HTML are used to provide additional information about an element. They are essentially an add-on to a tag that can be used to change the behavior or appearance of an element.

Attributes are added to an element by using the attribute name followed by an equals sign and then the value of the attribute in quotes. For example, to add a link to a webpage, you would use the anchor tag <a> and add an href attribute to specify the URL of the page you want to link to.

Common Attributes

There are many attributes in HTML, some of the most common ones include:

href - used in anchor tags to specify the URL of the page the link goes to
src - used in image tags to specify the URL of the image
alt - used in image tags to provide a text description of the image
class - used to apply a class to an element
lang - used to state the language of a webpage
id - used to give an element a unique identifier

Example

Here is an example of how an attribute would be coded:

HTML Preview

<a href="https://envisionly.com">Envisionly</a>

What has happened here is we have added an attribute to the anchor tag that tells the browser where to go when the link is clicked.

Attributes and accessibility

Attributes play a vital role in accessibility design. They can provide alternate text to an image which would highlight to screen-reader users what the image is representing on the current page.

Attributes in action

HTML Preview

       <a href="https://www.envisionlytechacademy.com">Envisiontech Academy</a>

        <img src="https://envisiontech-academy.gumlet.io/resources/logo-short-nb.png" 
        width="150" height="150" alt="Envisiontech Academy Logo" />