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.