# HTML Attributes
HTML attributes can be added in all HTML elements. This is to provide **additional information** about the element. You can add an attribute to an element by specifying it in the **start tag**. It is usually come in name / value pairs like **name = "value"**.

## The href Attribute
href attribute can be seen or put in the anchor tag < a > < /a>. It specifies the link address where you want to move or redirect the users once they clicked the link. 

![example.png](https://steemitimages.com/DQmYT5yEDgx5jvazEvqfuHqc3zsmZgheSKdoatN4dcceeSt/example.png)

## The src Attribute
src attribute can be found or put in the < img >. It identifies the location and filename of the image source. 

![example.png](https://steemitimages.com/DQmaZK86pKdQC4zQxwpeXzjt2VboywWt2c3nf4nrQ9hdAWD/example.png)

## The width and height Attributes
width and height attributes give you the control to the size of the image or other HTML elements in pixels. 

![example.png](https://steemitimages.com/DQmYwHK5zskwCdovR4WVG4w9gkwtfq4faGzYndQ3zM9Vaeq/example.png)

## The alt Attribute 
alt attribute serves as an alternative information wherein if the image is not displayed, a text will be displayed. It's value can also read by screen readers, meaning the user can hear its value. 

![example.png](https://steemitimages.com/DQme2QjsZ6UJRF7gKQj5rEvL5TzQGmQcKoKsRgHSv3pe4yv/example.png)

## The style Attribute
style attribute allows you to specify the styling of an element like font, size, color, etc. 

![example.png](https://steemitimages.com/DQmYhMsF3R2xr79QBYS8GkF6NdbuyLSQsmLJY7aSXMkJV4S/example.png)

## The lang Attribute 
lang attribute is the language of the document and it can be declared in < html > tag. It's important to declare for accessibility applications (screen readers) and search engines. 

![example.png](https://steemitimages.com/DQmdvHxAEHi4fT6tv5yjA2k3bJkeFA2VgZQBDmppM9B82rH/example.png)

 (en) specify the language. If there is a dialect, use two more letters (US).

## The title Attribute
title attribute serves as a tool tip. The value of it will be displayed when you hover your mouse on the element. 

![example.png](https://steemitimages.com/DQmPk8B6w7QM72XVFZnaKn4xRHiELbczhk8vPjRk237RPGK/example.png)

## Use Lowercase Attributes
The HTML 5 standard is not case sensitive. You can use uppercase or lowercase attribute names like title or TITLE but I recommend lowercase for stricter document types like XHTML. 

## Quote Attribute Values
The HTML 5 standard does not require quotes around attribute values. It can be name = value or name = "value" but I recommend to quote attribute values to avoid unexpected results or/and errors like below. 

![example.png](https://steemitimages.com/DQmefxVs7Xw8nrGzD848N5zQuBhfyhxHy7mPu2BBo73Sjoz/example.png)

## Single or Double Quotes?
it is common to use the double quotes in HTML but single quote can also be used especially if the value needs to display a double quotation. 

< p title='John "ShotGun" Nelson' > or < p title="John 'ShotGun' Nelson" >

## HTML Attributes
Here are some list of attributes often used in HTML. 

![example.png](https://steemitimages.com/DQmXmMYJLQ6Qx9aSVxvwJzXi3BwnofKub2wEKXtu8rhR9xM/example.png)

<hr> 

*Note: There should be no space in the HTML tags or between the angle brackets and element name. I just put a space for it to display the tags as it will hide or not display without a space. Remember, web browser don't display HTML tags.*

<hr> 

### HTML 5 Tutorials:
[HTML 5 Tutorial #1 - Introduction](https://steemit.com/steemit/@cj23/html-tutorial-1-introduction)
[HTML 5 Tutorial #2 - HTML Editors](https://steemit.com/steemit/@cj23/html-tutorial-2-html-editors)
[HTML 5 Tutorial #3 - HTML Basic](https://steemit.com/steemit/@cj23/html-5-tutorial-3-html-basic)
[HTML 5 Tutorial #4 - HTML Elements](https://steemit.com/steemit/@cj23/html-5-tutorial-4-html-elements)