-
HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the HTML element.
Each element or tag can have attributes, which defines the behaviour of that element.
-
Attributes should always be applied with start tag. The Attribute should always be applied with its name and value pair. The Attributes name
and values are case sensitive.
- Syntax
<element attribute_name="value">content</element>
- Examples
<!DOCTYPE html>
<html>
<body>
<h3>The href Attribute</h3>
<a href="https://phpcoderspoint.com">Site</a>
</body>
</html >
-
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the
link goes to page.
<!DOCTYPE html>
<html>
<body>
<h3>The href Attribute</h3>
<a href="https://phpcoderspoint.com">Site</a>
</body>
</html >
-
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 specifies 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 slow connection, or an error in the src attribute, or if the user uses a screen reader.
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<img src="my_img.jpg" width="400" height="200" alt="image_name">
</body>
</html>
Output:
- The style attribute is used to add styles to an element, such as color, font, size, and more.
<!DOCTYPE html>
<html>
<body>
<p style="height: 10px; color: blue"> paragraph content </p>
</body>
</html >
-
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, 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.
<!DOCTYPE html>
<html lang="en-IN">
<body>
...
</body>
</html>
-
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.
<!DOCTYPE html>
<html>
<body>
<h2>The title Attribute</h2>
<p title="Paragraph tag tooltip">Paragraph tag</p>
</body>
</html>
- The HTML standard does not require quotes around attribute values.
<a href="https://phpcoderspoint.com">Visit our WEbsite</a>
