Nearby lessons

3 of 24

πŸ”– HTML Attributes

πŸ“Œ What are HTML Attributes?

HTML attributes give extra information about elements. They are added inside the start tag, usually as name/value pairs like name="value".

Attributes are like extra settings for HTML elements. They help define how an element behaves or appears. They are always written in the opening tag, like this: <p style="color:red">.

πŸ“‹ Common HTML Attributes

AttributeDescription
hrefπŸ”— Sets the URL for a link
srcπŸ–ΌοΈ Sets the image file path
width & heightπŸ“ Set image or element size
altπŸ“ Text shown if image can't load
style🎨 Adds inline CSS styling
lang🌐 Sets the page language
titleπŸ’‘ Tooltip shown on hover
class🏷️ Assigns a class name
idπŸ†” Gives a unique ID to the element
data-*πŸ“¦ Stores custom data in an element

βœ… Attribute Best Practices

  • βœ”οΈ Always use quotes: name="value" (not just name=value)
  • βœ”οΈ Use alt for images to support accessibility
  • βœ”οΈ Use title to give helpful tooltips on hover
  • βœ”οΈ Prefer class with external CSS instead of style
  • βœ”οΈ Use rel="noopener noreferrer" with target="_blank" for security
  • βœ”οΈ Add loading="lazy" to images to improve page speed
  • βœ”οΈ Always set the lang attribute in the <html> tag (like lang="en")

πŸ’» HTML Attributes

Code Example
PREVIEW READY
Loading Editor...
Live Preview

🧠 Test Your Knowledge

5 Questions

Progress: 0 / 5
Keep Going!HTML Paragraphs