HTML Tags Elements Attributes

If HTML is a language, then tags, elements, and attributes are its words and grammar.
They are the core foundation of writing any webpage — so let’s understand them in the easiest way possible. ✅

🔖 What is an HTML Tag?

An HTML tag tells the browser what kind of content you’re adding.

🧠 Format:

<tagname>content</tagname>

Example:

<p>Hello World</p>
  • <p> → Opening tag (start of paragraph)
  • </p> → Closing tag (end of paragraph)

✅ Tags are always wrapped in angle brackets < >

🧩 What is an HTML Element?

An element is the complete structure, including:

  • The opening tag
  • Content (optional)
  • The closing tag

Example:

<h1>This is a heading</h1>

💡 This entire line is called an HTML element

🟨 Self-Closing (Void) Elements

Some tags don’t need a closing tag. These are called self-closing or void elements.

Common examples:

<br>   <!-- Line break -->
<hr>   <!-- Horizontal line -->
<img src="logo.png" alt="Site Logo">
<input type="text">

🧠 These elements usually have attributes to make them functional.

⚙️ What are HTML Attributes?

Attributes provide extra information about an element.

They always:

  • Go inside the opening tag
  • Follow this pattern: name="value"

Example:

<a href="https://w3buddy.com" target="_blank">Visit W3Buddy</a>
AttributeMeaning
hrefLink URL
target="_blank"Opens link in new tab

🔥 Most Common Attributes You’ll Use

AttributeUsed InPurpose
href<a>Defines link URL
src<img>Specifies image path
alt<img>Describes image for screen readers
type<input>Type of form input
value<input>Default value
id / classAny tagFor styling and JS targeting
titleAny tagTooltip on hover

🧪 Try This Code

Paste this in your HTML file:

<h2 title="I'm a heading">Hover over me</h2>

<p>This is a <strong>strong</strong> word.</p>

<img src="image.jpg" alt="A nice view">

You’ll see:

  • Tooltip on hover (title)
  • Bold text with <strong>
  • Image with fallback text

⚠️ Things to Remember

  • Tags wrap content → <tag>content</tag>
  • Elements = full tag + content
  • Attributes add extra info (e.g., href, src, alt)
  • Always use quotes around attribute values
  • Keep tags properly nested and closed

📝 Quick Recap

  • Tags = Instructions (<p>, <img>)
  • Elements = Full structure (<p>Text</p>)
  • Attributes = Settings/extra info (href, alt, id)

👉 Coming Up Next:

Let’s talk about Page Titles and Metadata to understand what goes inside the <head> section.

📚 Next: HTML Page Titles and Metadata