HTML – Attribute
An HTML attribute is extra information you add to an HTML tag to tell the web browser more about that tag. For example, if you have an image, you use an attribute to tell the browser where to find the image file (src), what to show if the image is not loaded (alt), what will be the width and height of the image display (height, width).
Example
<img src=”https://iqratechnology.com/wp-content/uploads/2024/05/image.jpg” alt=”An example image” width=”300″ height=”200″>
In this example:
- <img>: This is the HTML element for an image.
- src=”https://iqratechnology.com/wp-content/uploads/2024/05/image.jpg”: The src attribute specifies the path to the image file. In this case, it is https://iqratechnology.com/wp-content/uploads/2024/05/image.jpg.
- alt=”An example image”: The alt attribute provides alternative text for the image. This text is displayed if the image cannot be loaded.
- width=”300″: The width attribute sets the width of the image in pixels. Here, it is set to 300 pixels.
- height=”200″: The height attribute sets the height of the image in pixels. Here, it is set to 200 pixels.
Common HTML Attributes
HTML elements support various attributes, each with its specific purpose.
Here’s the list of some common HTML attributes:
| Attribute | Description | Example |
|---|---|---|
| Id | Unique identifier for an element, used for styling and scripting. | <div id=”header”>Header content</div> |
| class | Class name(s) for an element, used for styling multiple elements the same way. | <p class=”intro”>Introduction text</p> |
| src | URL of an external resource, like an image, video, or script. | <img src=”image.jpg” alt=”An image”> |
| href | URL for a link. Clicking the link takes you to the URL. | <a href=”https://example.com”>Example</a> |
| alt | Alternative text for an image if it cannot be displayed. | <img src=”image.jpg” alt=”Description”> |
| title | Extra information about an element, shown as a tooltip when hovering. | <p title=”More info”>Paragraph text</p> |
| style | Inline CSS styles for an element. | <p style=”color: red;”>Red text</p> |
| hidden | Hides the element from view. | <div hidden>Hidden content</div> |
| tabindex | Sets the order in which elements are focused when using the “Tab” key. | <input tabindex=”1″> |
| type | Specifies the type of form input element. | <input type=”text”> |
| placeholder | Text is displayed in an input field when it’s empty. | <input placeholder=”Enter your username”> |
| width | Width of an image or video. | <img width=”500″ src=”image.jpg” alt=”An image”> |
| height | Height of an image or video. | <img height=”300″ src=”image.jpg” alt=”An image”> |
| disabled | Disables an element, making it unclickable or unusable. | <button disabled>Submit</button> |
HTML Attributes Example Document
Here’s a document containing examples of various common HTML attributes, all in one place. This will help you see how each attribute is used within different HTML elements.
See the Pen 2131 by Training Course (@Training-Course) on CodePen.
In this example:
- The <div> element has an id attribute with the value “header”. This ID is used in the CSS to apply specific styles to this element.
- The <p> elements have a class attribute with the value “intro”. The CSS applies the same styles to all elements with this class.
- The src attribute specifies the image URL, the alt attribute provides alternative text if the image cannot be displayed, and the width and height attributes set the dimensions of the image.
- The href attribute in the <a> tag defines the URL that users will navigate to when they click on the link text “Visit Example”.
- The style attribute applies inline CSS directly to the element, in this case, making the text red.
- The type attribute defines the type of the input field (text or password), and the placeholder attribute provides a hint to the user about what to enter in the input field.
- The disabled attribute makes the button unclickable and grayed out, preventing any interaction.
YouTube Reference :
Practice Scenarios
Practice Scenario 1: Adding an Input Field with Placeholder Text
Objective: Create an input field that asks for the user’s email address and displays “Enter your email” when the field is empty.
<!DOCTYPE html>
<html>
<head>
<title>Input Field with Placeholder</title>
</head>
<body>
<form>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” placeholder=”Enter your email”>
</form>
</body>
</html>
Output
The input field will display “Enter your email” as placeholder text when it is empty.
Scenario 2: Creating a Button that is Disabled
Objective: Create a button labeled “Submit” that is disabled.
<!DOCTYPE html>
<html>
<head>
<title>Disabled Button</title>
</head>
<body>
<button disabled>Submit</button>
</body>
</html>
Output
The button labeled “Submit” will appear on the web page but will be unclickable.
Scenario 3: Displaying an Image with Specific Dimensions
Objective: Display an image with the source URL ” https://iqratechnology.com/wp-content/uploads/2024/05/image.jpg ” an alternative text “An image,” and dimensions 400×300 pixels.
<!DOCTYPE html>
<html>
<head>
<title>Image with Dimensions</title>
</head>
<body>
<img src=” https://iqratechnology.com/wp-content/uploads/2024/05/image.jpg ” alt=”An image” width=”400″ height=”300″>
</body>
</html>
Output
An image will be displayed with the specified dimensions of 400 pixels wide and 300 pixels tall.
Scenario 4: Using Inline Styles
Objective: Style elements using inline CSS.
Expected Output:
- A heading with a red color.
- A paragraph with blue text and a background color of light gray.
<!DOCTYPE html>
<html>
<head>
<title>Inline Style Example</title>
</head>
<body>
<h1 style=”color: red;”>Styled Heading</h1>
<p style=”color: blue; background-color: lightgray;”>This is a styled paragraph.</p>
</body>
</html>
Output:
Scenario 5: Combined Practice Scenarios
Objective: Create a web page that includes a heading and paragraph with inline styles, an input field with placeholder text, a disabled button, and an image with specific dimensions.
Expected Output:
- A heading with red text, a paragraph with blue text, and a light gray background.
- An input field that displays “Enter your email” as placeholder text when it is empty.
- A button labeled “Submit” appears on the web page but is unclickable.
- An image displayed with the specified dimensions of 400 pixels wide and 300 pixels tall.
Output:
