HTML element

Definition

An HTML element is a document component such as a heading, paragraph, link, or form control. Tags identify most elements in source, while the element is the node the browser creates from that source.

Why it matters

Choosing an element by meaning gives browsers and assistive technology more information than choosing it by appearance. CSS can change presentation without changing that purpose.

Example

<p>A paragraph is an element.</p>

Tags, elements, and content

In ordinary source, a start tag opens an element and an end tag closes it. The text or nested elements between them are its content. The tags are source syntax; the element is the document node the browser creates.

Some elements are void elements and do not wrap content. An image uses one img tag, while a paragraph uses opening and closing p tags. Adding an end tag to a void element does not turn it into a container.

Nesting and content models

HTML defines what kinds of content each element may contain and where it may appear. A list contains list items. A heading contains phrasing content. A button must not contain another interactive control. Valid nesting gives the parser a predictable structure and prevents surprising accessibility trees.

Indentation helps humans read nesting but does not define it. Closing tags and the HTML parsing rules determine the resulting tree. Browser developer tools show the parsed DOM, which may differ from malformed source the browser had to repair.

Native behavior

Elements can carry built-in interaction and accessibility behavior. An anchor with href participates in keyboard navigation, browser history, link menus, and crawling. A button responds to expected keyboard input and exposes button semantics. A generic div provides neither contract automatically.

CSS can make different elements look alike, but presentation does not erase their meaning. Choose the native element whose behavior matches the task before adding roles or scripts.

Choosing an element

Start with the content’s purpose: heading, paragraph, list, navigation, image, form control, or another defined structure. Check the element’s permitted context and content. Then add attributes and CSS needed for the specific page.

Use a generic div or span when no more specific meaning fits. Semantic HTML does not mean replacing every container with a named section; it means using a specific element when the document genuinely has that structure.

Debugging checklist

• Validate nesting and inspect the parsed DOM.
• Disable CSS and confirm the reading order still makes sense.
• Keyboard-test elements that are intended to be interactive.
• Check the accessibility tree for the expected role and name.
• Remove redundant roles that only repeat native semantics.