HTML Course 3.5 Anatomy of an HTML element (tags, attributes, content)

HTML Course 3.5: Anatomy of an HTML Element

Every piece of HTML you write is built from elements. Understanding the anatomy of an element—its tags, attributes, and content—is fundamental to mastering HTML.

1. Basic Structure of an Element

• Opening tag: Indicates the start of the element (<tagname>).
• Attributes (optional): Provide additional information, placed inside the opening tag.
• Content (optional): The text or nested elements contained within.
• Closing tag: Indicates the end of the element (</tagname>).

2. Tags

A tag is the core identifier of an element. In HTML, tag names are case-insensitive (lowercase is standard). Some elements are void elements, meaning they have no closing tag or content.

<section>
  <h2>Section title</h2>  <!-- heading tag -->
  <p>Some text here</p>      <!-- paragraph tag -->
</section>


<br>
  

3. Attributes

Attributes appear inside the opening tag. They follow the format
name='value'. Attribute names are case-insensitive; values are usually quoted.

• Global attributes: Common to all elements, e.g., id, class, title, data-*.
• Specific attributes: Particular to certain elements, e.g., href on <a>, src on <img>.
• Boolean attributes: Attributes without a value in HTML5, e.g., disabled, checked. Presence equals true.

<a href='https://example.com' title='Visit example'>
  Go to Example
</a>


<img src='avatar.png' alt='User Avatar' width='100' height='100'>


<input type='checkbox' checked>


<div data-user-id='42'>User Profile</div>
  

4. Content

Content is everything placed between the opening and closing tags. It can be:

• Plain text
• Other HTML elements (nesting)
• HTML comments (<!-- … -->)

Whitespace (spaces, tabs, line breaks) generally collapses into a single space in most contexts.

<ul>
  <li>First item</li>
  <li>
    Second item with 
    <strong>bold text</strong>
  </li>
  <li>Third item</li>
</ul>
  

5. Advanced Cases

• Void elements: Cannot have content or closing tags. Examples: <br>, <img>, <input>.
• Optional closing tags: Some elements allow omission of the closing tag, e.g., <li>, <p> in certain contexts.
• HTML vs XHTML: XHTML requires all tags to be closed and attributes to be quoted; HTML5 is more lenient.

<br>


<img src='logo.png' alt='Logo' />


<ul>
  <li>Item one
  <li>Item two
</ul>
  

6. Anatomy at a Glance