Elements, Tags and Attributes

Understand the difference between a tag and an element, how attributes modify elements, and how elements nest to form parent-child relationships.

HTML pages are built from elements — pieces of content wrapped in tags that can carry extra information called attributes, and which nest inside one another to form the page's structure.

Tag vs. element

These two words are often used loosely, but they mean slightly different things. A tag is the markup itself — the text between angle brackets, like <p> or </p>. An element is the complete unit: the opening tag, the content inside it, and the closing tag together. So <p>Hello</p> is a paragraph element made up of an opening tag <p>, the content "Hello", and a closing tag </p>.

Some elements don't wrap content at all — these are called void (or self-closing) elements, such as <img> or <br>. They consist of a single tag with no separate closing tag, because there is nothing to contain.

Attributes

Attributes provide additional information about an element, and are written inside the opening tag as name="value" pairs. For example, in <a href="https://example.com">Visit</a>, href is an attribute that tells the browser where the link should go.

An element can have multiple attributes, separated by spaces: <img src="logo.png" alt="SampleApp logo" width="200">. Attribute values are almost always wrapped in quotes (double quotes by convention).

Boolean attributes

Some attributes don't take a value at all — their mere presence turns a feature on. These are called boolean attributes. Common examples include disabled (disables a form control) and required (marks a form field as mandatory). Writing <input required> is enough; you do not write required="true" — including the attribute name at all means "true", and omitting it entirely means "false".

Nesting and relationships

Elements can be placed inside other elements — this is called nesting. When one element is nested directly inside another, the outer element is called the parent and the inner one is the child. Two or more elements that share the same direct parent are called siblings.

Correct nesting matters: an element that starts inside another must also close inside it before that outer element closes. <p><strong>Bold</strong> text</p> is valid nesting; <p><strong>Bold</p></strong> is not, because <strong> closes after <p> has already closed, crossing the boundary incorrectly.

Attribute syntax

Attributes go inside the opening tag only, never the closing tag. Standard attributes use the form name="value" with the value in quotes. Boolean attributes need no value at all — just the attribute name.

<tagname attribute1="value1" attribute2="value2">Content</tagname>

<!-- boolean attribute: presence alone means true -->
<input type="text" required>

Code Examples

A paragraph element with one attribute, class, whose value is "intro" — commonly used later to target this element with CSS. Expected result: The plain text "Welcome to SampleApp." displayed as a paragraph, visually unchanged until CSS rules are applied to the "intro" class.

class="intro" doesn't change what the browser displays by itself; it's a label CSS or JavaScript can use to identify this element.

A form with a labeled input that has both regular attributes (type, id, name) and two boolean attributes (required and disabled). Expected result: A form showing an "Email:" label next to a grayed-out, non-editable input field and a Submit button. Because disabled is present, this field is currently unusable — a common real bug when a boolean attribute is left in accidentally.

disabled is a boolean attribute — its presence alone (no value needed) prevents the field from being edited or submitted.

Common mistake: Writing disabled="false" to try to turn it off does NOT work — the attribute's mere presence enables it regardless of the value; it must be removed entirely to disable the disabling.

Demonstrates parent-child-sibling relationships: <article> is the parent of both <header> and <p>, which are siblings of each other; <h2> is a child of <header>, and therefore a grandchild of <article>. Expected result: A heading "Parent Element Example" followed by a paragraph explaining the sibling relationship, with the word "siblings" italicized.

<header> and <p> are siblings because they share the same direct parent, <article>.

<p class="intro">Welcome to SampleApp.</p>

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required disabled>
  <button type="submit">Submit</button>
</form>

<article>
  <header>
    <h2>Parent Element Example</h2>
  </header>
  <p>This paragraph and the header above are <em>siblings</em> — both children of the same &lt;article&gt; parent.</p>
</article>

Anatomy of an element

A tag alone is just the markup; an element is the opening tag, content, and closing tag together.

Element
   +-----------------+
   | <p class="x">   |  <- opening tag (+ attribute)
   |     Hello       |  <- content
   | </p>            |  <- closing tag
   +-----------------+

   Nesting:
   <div>              <- parent
     <p>Text</p>      <- child of div, sibling of <span>
     <span>More</span><- child of div, sibling of <p>
   </div>

Important Rules

A tag is the markup notation (<p>); an element is the full opening-tag + content + closing-tag unit.

Void elements like <img> and <br> have no closing tag because they contain no content.

Attributes live inside the opening tag only, written as name="value" pairs separated by spaces.

Boolean attributes (like disabled, required) need no value — their presence alone means true.

Nested elements must close in the reverse order they were opened — improperly overlapping tags produce invalid HTML.

Where this shows up

Every interactive form on the web — login screens, checkout pages, sign-up flows — relies on attributes like required, disabled, type, and id to control validation and behavior, and on parent-child structure so CSS and JavaScript can reliably target the right pieces of the form.

Tags must close in the reverse order they were opened. The <strong> element must fully close before its parent <p> closes.

<input required="false"> <!-- intended to make the field optional -->

<input> <!-- simply omit the required attribute entirely -->

Boolean attributes are on if present at all, regardless of the value given. To turn one off, remove the attribute completely rather than setting it to "false".

[Multiple Choice] In the element <input type="text" id="name" required>, which part is the boolean attribute? A. type="text" B. id="name" C. required D. input

C. required — required is a boolean attribute — it has no value assigned to it, and its mere presence in the opening tag is enough to enable the behavior. type and id are standard attributes with values, and input is the tag name itself, not an attribute.

Write an HTML snippet for an image with a src attribute pointing to "diagram.png", an alt attribute describing it as "Network diagram", and nest it inside a <figure> element alongside a <figcaption> reading "Figure 1: Network layout".

<figure> <img src="diagram.png" alt="Network diagram"> <figcaption>Figure 1: Network layout</figcaption> </figure>

Remember <img> is a void element with no closing tag, and both the img and the figcaption are children of the figure.