Elements, Tags & Attributes

Most HTML elements have an opening tag, some content, and a closing tag: <p>content</p>. A few elements, like <img> and <br>, don't wrap anything at all and don't need a closing tag — there's simply nothing "inside" an image.

Example 1: an attribute changing behavior

<a href="https://example.com">Link</a>
<a href="https://example.com" target="_blank">Opens in a new tab</a>

Attributes live inside the opening tag and give the browser extra information about that specific element — here, target="_blank" changes how the very same link behaves. Attributes are written as name="value" pairs, and a single tag can carry several at once.

Example 2: nesting — elements inside elements

<p>This sentence has <strong>one important word</strong> in it.</p>

Elements routinely nest inside each other: here, a <strong> element sits entirely inside a <p> element. The rule for valid nesting is simple but important — whatever you open last, you must close first, like stacking and unstacking boxes. <p><strong>text</p></strong> (closed in the wrong order) is invalid HTML, even though it might still render something on screen — browsers are forgiving, but "the browser didn't complain" isn't the same as "this is correct."

Try editing the attributes in the example below — add a title="..." attribute to the paragraph and hover over it in the preview to see what happens.