HTML attributes provide additional information about HTML elements.
- 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”
Example:
<a href="https://itnursery.com">Visit ITNursery</a>
The ‘href’ Attribute
From this example <a>
tag defines a hyperlink. The href
attribute specifies the URL of the page the link goes to.
Another Example:
&amp;lt;img src="img_girl.jpg" alt="ITNursery Logo"&amp;gt;
The ‘src’ and ‘atl’ Attribute
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 and alt
attribute specifies an alternate text for an image, if the image cannot be displayed.
Some Other Attributes are:
width and height Attributes:
The <img>
tag should also contain the width
and height
attributes, which specifies the width and height of the image (in pixels):
<img src="img_typo.jpg" alt="Girl with a jacket">
The style Attribute:
The style
attribute is used to add styles to an element, such as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>
The lang Attribute:
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.
The following example specifies English as the language:
<!DOCTYPE html> <html lang="en"> <body> ... </body> </html>
Country codes can also be added to the language code in the lang
attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.
The following example specifies English as the language and United States as the country:
<!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html>
The title Attribute:
The title
attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:
Example:
<p title="I'm a tooltip">This is a paragraph.</p>
We Suggest: Always Quote Attribute Values
The HTML standard does not require quotes around attribute values.
Standard:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Bad:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>