Elements, Tags, Attributes

This is invalid because the value contains a space:

<input placeholder=Enter your name>

The browser cannot interpret that as the intended single attribute value. Write:

<input placeholder="Enter your name">

Best practice: Quote all attribute values. It makes markup easier to read, maintain, and debug.

7. Boolean Attributes

Boolean attributes represent true-or-false states through their presence or absence. If a Boolean attribute is present, it is generally considered true, even when its value is an empty string or repeats its own name.

<input type="text" required>

<button disabled>Unavailable</button>

<video controls></video>

<input type="checkbox" checked>

Examples:

• required indicates that a form control must be completed before successful constraint validation.
• disabled disables a supported form control or button.
• controls requests built-in media controls.
• checked indicates that a checkbox or radio button is initially checked.

These are all valid Boolean-attribute forms in HTML:

<input required>
<input required="">
<input required="required">

Do not write required="false" expecting the attribute to turn off. Because the attribute is present, it is true. To make the field not required, remove the attribute.

Boolean Attributes vs Ordinary Attributes

Do not confuse Boolean attributes with ordinary attributes that accept meaningful text values.

<input type="email" name="email">

type and name have specific values. Writing type="false" does not mean the input type is disabled; it supplies an invalid or unsupported type value, which is handled according to HTML's rules.

8. Global Attributes

Global attributes are attributes that can be used on all HTML elements, although their effects depend on the attribute and element.

Common Global Attributes

• id — identifies an element with a unique identifier within the document.
• class — associates an element with one or more classes.
• title — provides advisory information, often shown as a tooltip by some browsers.
• lang — identifies the language of an element's content.
• dir — sets text direction, such as left-to-right or right-to-left.
• hidden — indicates that the element is not currently relevant and should not be rendered normally.
• tabindex — controls focusability and sequential keyboard navigation behavior.
• contenteditable — indicates whether the element's content can be edited by the user.
• data-* — stores custom data for scripts and application behavior.
• style — specifies inline CSS declarations.

These attributes will be explored in greater detail in later sections where appropriate.