HTML Attributes
HTML attributes provide additional information about HTML elements, enhancing their functionality or appearance.Let’s delve into what HTML attributes are and how they enhance the capabilities of HTML elements.
What are HTML Attributes?
- 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”.
Commonly Used Attributes:
- src: Specifies the source of external resources, such as images or multimedia files.
<img src="apple_image.jpg">- href: Determines the URL destination for links created with the
<a>(anchor) element.
<a href="https://www.javatrainingschool.com">Visit Java Training School</a>- alt: Provides alternative text for images, which is displayed if the image cannot be loaded.
<img src="img_apple.jpg" alt="Here is a red Apple">- class: Assigns one or more CSS classes to an element for styling purposes.
.note {
font-size: 120%;
color: red;
}
<h1>This is <span class="note">My favourite</span> Heading</h1>- id: Specifies a unique identifier for an element, allowing for targeted styling or scripting.
#myId {
background-color: lightblue;
color: black;
text-align: center;
}
<h1 id="myId">My Website</h1>- title: Adds a tooltip or description to an element, providing additional information when hovered over.
<p title="Best Web Tutorial">javatrainingschool.com</p>- style: Applies inline CSS styles directly to an element, overriding external or internal stylesheets.
<p style="color:red; font-size:16px;">This is a red paragraph.</p>Best Practices for Using Attributes:
- Always use quotes around attribute values.
- Choose descriptive attribute names that convey their purpose.
- Follow accessibility guidelines when using attributes related to alternative text or navigation.
- Avoid inline styles unless necessary, favoring external CSS for better maintainability.
Exercise : Make your website by applying all these attributes.