HTML Attributes

HTML attributes give extra information about an element. They are always written inside the opening tag and usually come in name/value pairs like name="value".

1. What Are Attributes?

Attributes work like settings that control how an element behaves or displays. For example, links need a URL, and images need a file source - attributes make that possible.

<tagname attribute="value">Content</tagname>

Example:

<a href="https://aswcode.com">Visit ASWCode</a>

Here, href is the attribute, and "https://aswcode.com" is its value.

2. Common HTML Attributes

✅ href - Used in Links

Used inside the <a> tag to define where the link goes.

<a href="https://aswcode.com">Go to ASWCode</a>

Tip: Add target="_blank" to open in a new tab.

✅ src - Used in Images or Scripts

Tells the browser where a file is located.

<img src="/images/html-logo.png" alt="HTML Logo" />
<script src="/js/main.js"></script>
    

✅ alt - For Image Description

Helpful for accessibility and SEO. Shown if the image fails to load.

<img src="logo.png" alt="ASWCode company logo" />

✅ title - Shows Tooltip

Displays a tooltip on hover.

<p title="This is a tooltip">Hover over me!</p>

✅ id - Unique Identifier

Used to uniquely reference an element for CSS or JavaScript.

<h2 id="main-title">Welcome to ASWCode</h2>

✅ class - Group Elements

Apply the same styling to multiple elements.

<p class="note">This is a note.</p>
<p class="note">Another note.</p>
    

✅ style - Inline CSS

Used for quick styling (not recommended for large projects).

<p style="color: blue; font-size: 18px;">This text is blue.</p>

3. Combine Attributes

You can use multiple attributes within a single tag.

<img src="photo.jpg" alt="My photo" width="200" height="150" />

Next Lesson → HTML Comments and Spacing

Previous Lesson → Understanding HTML Tags