HTML attributes provide additional information about elements within an HTML document. Every HTML element can have attributes, which are always defined in the start tag. They are specified using a name/value pair format, such as name=”value”. These attributes affect how content is displayed and how users interact with elements on web pages.
Key Aspects of HTML Attributes #
Components of an Attribute
An HTML attribute consists of two primary components:
| Attribute Name | Description |
|---|---|
id | A unique identifier for an HTML element, used for styling or JavaScript interaction. |
class | Defines one or more class names for an element, used for styling and applying CSS rules. |
src | Specifies the source URL for external resources like images, audio, or video. |
href | Specifies the URL of a linked resource, typically used in anchor elements for hyperlinks. |
alt | Provides alternative text for images, displayed if the image cannot be loaded. |
any_custom_attr | Represents any custom attribute name and its purpose within the HTML document. |
Syntax:
<element attribute_name="attribute_value">Meta Tag Attributes #
Meta tags provide essential information about HTML documents. They are self-closing tags and are critical for browser functionality, search engine optimisation (SEO), character set declaration, and viewport control. Some common meta tag attributes include:
| Attribute | Description |
|---|---|
charset | Defines the character encoding for the HTML document. |
name | Specifies the name of the metadata attribute. |
content | Provides information related to the specified name. |
http-equiv | Sets an HTTP header for content, typically used for compatibility. |
scheme | Specifies the format for interpreting the content value, often for data formats. |
HTML Global Attributes #
Global attributes apply to all types of HTML tags. Some commonly used global attributes include:
| Attribute | Description |
|---|---|
class | Groups elements together for styling. |
style | Applies inline CSS styles. |
src | Specifies the source of resources, such as images or media files. |
contenteditable | Allows the content within an element to be editable. |
role | Defines an element’s accessibility role. |
tabindex | Sets the order of focus during keyboard navigation. |
id | Assigns a unique identifier for targeting CSS or JavaScript. |
href | Specifies the destination URL for hyperlinks. |
alt | Provides alternative text for images, improving accessibility and SEO. |
title | Displays a tooltip when the user hovers over the element. |
lang | Specifies the language of the element’s content for translation and accessibility. |
Examples of Common HTML Attributes #
HTML src Attribute
The src attribute specifies the URL of a resource (such as an image, audio, or video) to be embedded on the webpage.
<!DOCTYPE html>
<html>
<head>
<title>HTML img src Attribute</title>
</head>
<body>
<img src="https://example.com/image.png">
</body>
</html>HTML alt Attribute
The alt attribute provides alternative text for images if the image cannot be displayed. It’s important for accessibility and screen readers.
<!DOCTYPE html>
<html>
<head>
<title>HTML img alt Attribute</title>
</head>
<body>
<img src="https://example.com/image.png" alt="An example image">
</body>
</html>HTML width and height Attributes
These attributes adjust the width and height of an image (in pixels).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Width and Height</title>
</head>
<body>
<img src="https://example.com/image.png" width="300" height="100">
</body>
</html>HTML id Attribute
The id attribute assigns a unique identifier to an element for use in CSS or JavaScript.
<!DOCTYPE html>
<html>
<head>
<style>
#example-id {
color: green;
}
</style>
</head>
<body>
<h1 id="example-id">Welcome to Our Website</h1>
</body>
</html>HTML title Attribute
The title attribute displays a tooltip when the user hovers over the element.
<!DOCTYPE html>
<html>
<head>
<title>HTML title Attribute</title>
</head>
<body>
<h3 title="This is a tooltip!">Hover over me</h3>
</body>
</html>HTML href Attribute
The href attribute specifies the destination URL for links. The target="_blank" attribute can be used to open the link in a new tab.
<!DOCTYPE html>
<html>
<head>
<title>Link Example</title>
</head>
<body>
<a href="https://www.example.com">Click to open</a><br>
<a href="https://www.example.com" target="_blank">Click to open in a new tab</a>
</body>
</html>HTML style Attribute
The style attribute is used to apply inline CSS to elements.
<!DOCTYPE html>
<html>
<head>
<title>HTML style Attribute</title>
</head>
<body>
<h2 style="color: blue;">This is blue text</h2>
</body>
</html>HTML lang Attribute
The lang attribute specifies the language of the HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML lang Attribute</title>
</head>
<body>
<p lang="en">This text is in English.</p>
<p lang="fr">Ce texte est en français.</p>
</body>
</html>Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!
Leave your comment