What are attributes in HTML - Browser Rendering Explained

Render Flow - What are attributes

[Read <element>] -> [Create element node] -> [Read attribute name="value"] -> [Add attribute to element node] -> [Continue reading children or close element]

The browser reads each HTML element and its attributes, creating nodes in the DOM tree with properties set by these attributes.

Render Steps - 3 Steps

Code Added:<button> element without attributes

Before

[ ] (empty space, no button shown)

→

After

[ Click me ] (a clickable button with default style)

Adding the button element creates a clickable button with default behavior and style.

🔧 Browser Action:Creates button element node and renders default button style

Code Sample

A button element with attributes that change its behavior and appearance.

HTML

<button type="button" disabled>Click me</button>

Render Quiz - 3 Questions

After step 3, what visual change do you see on the button?

A Button changes color but is still clickable

B Button disappears from the page

C Button looks greyed out and cannot be clicked

D Button text changes to 'disabled'

Common Confusions - 2 Topics

Why does adding disabled make the button grey and unclickable?

The disabled attribute tells the browser to change the button's style and block clicks, so it looks inactive and does not respond.

💡 Disabled elements look faded and cannot be clicked.

Does the type attribute change how the button looks?

No, type changes the button's behavior (like submitting a form) but not its visual style.

💡 Behavior attributes don't always change appearance.

Property Reference

Attribute	Example Value	Effect on Element	Common Use
type	"button"	Defines button behavior (button, submit, reset)	Buttons in forms
disabled	disabled	Disables element interaction and greys it out	Prevent user clicks
href	"https://example.com"	Sets URL for links	Anchor tags
alt	"Description"	Provides text for images if not loaded	Images for accessibility

Concept Snapshot

Attributes add extra information inside HTML tags. They change how elements behave or look. Examples: type="button", disabled. Attributes do not create new elements but modify existing ones. Disabled attribute greys out and blocks interaction. Type attribute changes button behavior, not style.