OnlineCBT
1. Anatomy of an HTML Element
In HTML, developers often confuse the terms Tag and Element. While they are closely related, they represent two distinct concepts in the Document Object Model (DOM).
- HTML Tag: The syntax markers enclosed inside angle brackets (e.g.,
<p>or</p>) used to signal where an element begins and ends. - HTML Element: The complete structural unit from the opening tag, including any attributes, enclosed text content, nested child nodes, up to the closing tag.
<!-- Complete Element Breakdown -->
<p class="highlight" id="intro-paragraph">
This text is the internal content of the paragraph element.
</p>
This text is the internal content of the paragraph element.
Structural Breakdown
- Opening Tag (
<p ...>): Informs the browser parser where the element starts. - Attribute Name (
class,id): Specifiers that provide metadata or targeting hooks for CSS and JavaScript. - Attribute Value (
"highlight","intro-paragraph"): The specific assignment value assigned within double quotes. - Enclosed Content: The text or child elements rendered inside the element boundaries.
- Closing Tag (
</p>): Marked with a forward slash (/), signaling where the element closes.
2. Void Elements vs. Container Elements
HTML elements are classified based on whether they can hold internal content or nested child nodes.
1. Container Elements
Container elements require both an opening tag and a closing tag. They wrap text content, media, or other nested elements (e.g., <div>...</div>, <h1>...</h1>, <button>...</button>).
2. Void Elements (Self-Closing)
Void elements cannot hold content or child nodes. Consequently, they do not require a separate closing tag. In HTML5, adding a trailing slash (like <img />) is completely optional and ignored by modern browser engines.
<!-- Examples of Common Void Elements --> <p>First Line of Text<br>Second Line after Line Break</p> <hr> <input type="text" placeholder="Enter your name...">
First Line of Text
Second Line after Line Break
The most widely used void elements in HTML5 include: <img>, <input>, <br>, <hr>, <meta>, <link>, <source>, and <embed>.
3. Understanding HTML Attributes
Attributes extend HTML elements by providing extra configuration parameters, identification hooks, or functional instructions. Attributes are always declared inside the opening tag of an element.
Global Attributes vs Element-Specific Attributes
| Attribute | Category | Purpose & Functionality |
|---|---|---|
id |
Global Attribute | Assigns a unique identifier to an element. Must be unique across the entire HTML document. |
class |
Global Attribute | Assigns one or more class names used to group multiple elements for CSS styling or JS selection. |
style |
Global Attribute | Applies direct inline CSS styling to the element (e.g., style="color: red;"). |
title |
Global Attribute | Provides advisory tooltip text when the user hovers over the element. |
data-* |
Global Attribute | Allows developers to store custom private data attributes for JavaScript application logic. |
src |
Element-Specific | Specifies the media URL source path. (Used on <img>, <script>, <iframe>). |
href |
Element-Specific | Specifies the destination hyperlink target URL. (Used on <a> and <link>). |
<!-- Global Attributes Example -->
<div id="card-widget" class="box theme-dark" title="Hover Tooltip Information" data-user-id="9082">
<p style="color: #2563eb; font-weight: bold; margin: 0;">Element with Global Attributes</p>
</div>
Element with Global Attributes (Hover for Tooltip)
4. Boolean Attributes in HTML5
Boolean attributes represent state configurations that are either true or false. In HTML5, the mere presence of a boolean attribute inside an opening tag means its value is true. Omitting the attribute entirely means its value is false.
Common Boolean Attributes
disabled: Disables form control elements, preventing user interaction.required: Enforces field completion before form submission.checked: Sets default selection status on checkboxes or radio buttons.readonly: Prevents text modification inside input fields while allowing focus and copying.autofocus: Automatically focuses an input field upon page load.
<!-- Boolean Attributes Demonstration -->
<input type="text" value="Normal Enabled Input">
<br><br>
<input type="text" value="Disabled Input Field" disabled>
<br><br>
<label>
<input type="checkbox" checked> Pre-selected Option
</label>
In HTML5, writing <input disabled>, <input disabled="disabled">, and <input disabled=""> are completely identical in behavior. The shorthand disabled is preferred by modern standards.
5. Homework Assignments & Practical Exercises
Create an index.html file containing a form input field, an image element, and a paragraph tag. Apply at least three global attributes (id, class, title) and two element-specific attributes (src, placeholder) across your code.
Build an HTML user registration form containing three text input fields. Apply the required boolean attribute to two fields, set one field to readonly with default text, and add a checkbox pre-configured with the checked boolean attribute.
Combine learnings from Lessons 01 through 06: Open your completed form page in Browser DevTools. In the Elements Panel, edit the disabled boolean attribute live to enable a field, inspect how the DOM updates dynamically, and run your page through validator.w3.org to confirm syntax compliance.
6. Frequently Asked Interview Questions
Answer: An id attribute must be unique across the entire HTML document; no two elements can share the same id. In contrast, a class attribute can be assigned to multiple elements across a page to share CSS styling or JavaScript selection logic. An element can also have multiple space-separated classes (e.g., class="btn primary large").
Answer: Void elements (such as <img>, <input>, <br>) are self-contained elements that cannot enclose text or child nodes. Because there is no content to enclose, a closing tag is redundant and not required by the browser parser.
Answer: Custom data-* attributes allow developers to store private data directly inside HTML tags without using non-standard attributes. JavaScript can easily read or write these values using the element.dataset property, making them ideal for storing state or metadata for frontend frameworks.
Answer: HTML5 allows unquoted attribute values if the value contains no spaces or special characters (e.g., class=box). However, if the value contains spaces (e.g., class=box primary), the browser will misinterpret primary as a separate attribute name. Best practice is to always wrap attribute values inside double quotes.
