Codexpal - Learn Programming Interactively

Lesson Content

HTML Attributes

Attributes provide additional information about HTML elements. They are always specified in the opening tag and usually come in name/value pairs like: name="value".

Common Attributes

id - Unique identifier for an element
class - Specifies one or more class names for styling
src - Specifies the source URL (for images, scripts, etc.)
href - Specifies the URL of a link
alt - Alternative text for images
title - Provides additional information (shown as tooltip)
style - Inline CSS styling

Examples

<!-- id attribute -->
<p id="intro">This paragraph has an id.</p>

<!-- class attribute -->
<div class="container">Content here</div>

<!-- src and alt for images -->
<img src="image.jpg" alt="Description">

<!-- href for links -->
<a href="https://example.com">Visit Example</a>

<!-- style attribute -->
<p style="color: blue;">Blue text</p>

Best Practices

Always use quotes around attribute values
Use meaningful id and class names
Always include alt text for images (accessibility)
Prefer CSS classes over inline styles when possible

Example Code

Create HTML elements with different attributes: id, class, href, and style.

<!DOCTYPE html>
<html>
  <head>
    <title>Attributes Practice</title>
  </head>
  <body>
    <!-- Add a paragraph with id="intro" -->
    
    <!-- Add a div with class="container" -->
    
    <!-- Add a link with href="https://example.com" -->
    
    <!-- Add a paragraph with style="color: red;" -->
    
  </body>
</html>

Expected Output:

Welcome

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code