HTML
📌 What Are HTML Attributes ?
In HTML, each element can have attributes to provide extra information or customize its behavior. Attributes affect how an element looks or functions and are usually added within the element’s opening tag.
The typical format for writing an attribute is:
element-name attribute-name="attribute-value"For example:
<a href="https://www.example.com">Example Link</a>Here, href="https://www.example.com" is an attribute that specifies the URL the link points to.
Common HTML Attributes and Their Uses
Below are some widely used attributes and what they do:
| Attribute | Used With Element(s) | Description |
|---|---|---|
| href | <a> |
Specifies the target URL of a link. |
| src | <img>, <audio>, <video> |
Specifies the path to an image or media file. |
| width, height | <img> |
Sets the width and height of an image in pixels. |
| alt | <img> |
Provides alternative text if the image cannot be displayed or for screen readers. |
| style | Most elements | Allows you to apply inline CSS styles (e.g., color, font, margin). |
| lang | <html /> |
Specifies the language of the page or element (e.g., lang="en" for English, lang="tr" for Turkish). |
| title | All elements | Displays a small tooltip when hovering over the element. |
Writing Guidelines and Best Practices
1. Lowercase attribute names: Using lowercase is standard.
2. Use quotes for attribute values: It’s safer to wrap values in quotes. Single-word values may work without quotes, but if the value contains spaces or special characters, quotes are required.
3. Double vs. single quotes:Double quotes are commonly used. If the value itself contains double quotes, use single quotes instead, and vice versa.
Examples:
<p title="Hello World">This is a paragraph.</p>
<p title='Alice "Wrote Stylishly"'>Content goes here.</p>Summary
- HTML elements can gain extra information or behavior through attributes.
- Attributes are always written in the element’s opening tag and usually follow the name="value" format.
- Key attributes include: href, src, alt, width, height, style, lang, and title.
- Paying attention to lowercase naming and proper quoting ensures your code is clean and error-free.