HTML Attributes
- An attribute is used to provide extra or additional information about an element.
- It takes two parameters: a name and a value.
- Attributes are always specified in the start tag.
- The value of an attribute must be written within quotes.
The href Attribute
- HTML links are defined with the <a> tag.
- The link address is specified in the href attribute.
Example
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>The href Attribute</h2>
<p>
HTML links are defined with a tag. The link address is specified in the href attribute:
</p>
<a href="https://www.codersarts.com/">Click this link</a>
</body>
</html>
The src Attribute
- HTML images are defined with the <img> tag.
- The src attribute is used to specify the URL of the source image.
Example
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and filename of the image source is specified in the src attribute:</p>
<img src="example/image/greece.jpg" width="500" height="300">
</body>
</html>
The width and height Attribute
- HTML images uses width and height attributes.
- It specifies the width and height of the image.
Example
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>The Size Attributes</h2>
<p>HTML images uses size attribute, which specifies the width and height of the image:</p>
<img src="image/hh3.jpg" width="500" height="300">
</body>
</html>
The alt Attribute
- In HTML the alt attribute is used to specify the alternative text to be used, if an image cannot be displayed.
- The value of alt attribute can be read by screen readers.
- It can also be heard if someone is listening to the web page.
Example
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute is used to reflect the image content, so the users who cannot see the image gets to understand about the content of the image:</p>
<img src="image/hh3.jpg" alt="Wooden House" width="500" height="300">
</body>
</html>
The style Attribute
- Styles in HTML are basically the rules that describe how a document is presented in a browser.
- The style attribute is used for styling the element, like color, font, size, etc.
Example
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to specify the styling of an element, like color:</p>
<p style="color:red">This is a paragraph whose font color is set to red.<p>
</body>
</html>
The lang Attribute
- The language attribute contains single value language code which is used to specify the language of the content.
- The language of a document is declared in the <html> tag.
- The language is declared with the lang attribute.
<!DOCTYPE html>
<html lang="en-US">
<body>
..
</body>
</html>
The title Attribute
- The title attribute is used to specify extra information about the element.
- When we move cursor over the element then it shows the information.
- A title attribute is added to the <p> element.
Example
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 title="This is a header">The title Attribute</h2>
<p title="This is a tooltip">Move cursor over this paragraph, to display the title attribute as a tooltip.</p>
</body>
</html>
Are attributes case sensitive?
- HTML5 is not case sensitive, i.e. it can be written in either uppercase or lowercase.
- For example, the title attribute can be written like title or TITLE.
- But it is recommended to use HTML attributes to be in lower case, as demanded for stricter document types like XHTML.