HTML Attributes

HTML attributes provide additional information about elements. Attributes are placed in the opening tag.

Attribute Structure

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

Example

<a href="https://google.com">Link</a>
<img src="photo.jpg" alt="Image">
<div id="header">Header</div>
<p class="text">Paragraph</p>

Common Attributes

class

<div class="container">Content</div>
<p class="text bold">Paragraph</p>

id

<div id="header">Header</div>
<div id="content">Content</div>

style

<p style="color: red;">Red text</p>
<div style="background: blue; color: white;">Box</div>

title

<p title="Tooltip">Hover the mouse here</p>

Universal Attributes

<tag class="..." id="..." style="..." title="...">Content</tag>

Event Attributes

<button onclick="alert('Click!')">Click Me</button>
<input onfocus="this.style.background='yellow'">
<div onmouseover="this.style.color='red'">Hover me</div>

Case Study: Registration Form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Registration</title>
</head>
<body>
    <h1>New Student Registration Form</h1>

    <form action="/register" method="POST">
        <div>
            <label for="name">Full Name:</label>
            <input type="text" id="name" name="name" placeholder="Enter your name" required>
        </div>

        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="[email protected]" required>
        </div>

        <div>
            <label for="studentId">Student ID:</label>
            <input type="text" id="studentId" name="studentId" pattern="[0-9]{10}" title="Student ID must be 10 digits" required>
        </div>

        <div>
            <label for="major">Major:</label>
            <select id="major" name="major" required>
                <option value="">Select Major</option>
                <option value="cs">Informatics Engineering</option>
                <option value="is">Information Systems</option>
                <option value="ce">Computer Engineering</option>
            </select>
        </div>

        <button type="submit">Register</button>
    </form>
</body>
</html>

Everyday Case Study

Case: A developer needs to create buttons with various effects.

<button type="button" onclick="alert('Click!')">Click Me</button>
<button type="button" onmouseover="this.style.background='blue'" onmouseout="this.style.background='gray'">Hover Me</button>
<button type="button" disabled>Inactive</button>

Boolean Attributes

<input type="text" required>
<input type="text" disabled>
<input type="text" readonly>
<input type="checkbox" checked>

Best Practices

1. Use unique ids: One id per element
2. Use classes: For styling
3. Don't use the style attribute: Use CSS
4. Use event attributes: For interactivity
5. Validate forms: Use validation attributes

Summary

HTML attributes provide additional information about elements. Use attributes correctly for the right functionality and styling.