Elements, tags and attributes

Everything in HTML is an element. Most elements have three parts: an opening tag, content and a closing tag. The tag’s name says what the content is — a paragraph, a heading, a link.

<p>This is a paragraph.</p>

• <p> is the opening tag; </p> the closing tag (the same name with a slash).
• The text between is the element’s content.
• Write tag names in lower case; browsers accept both, but this is the convention.

Nesting

Elements sit inside each other; the one opened last is closed first — like a box inside a box.

<!-- right -->
<p>This is <strong>important</strong>.</p>

<!-- wrong: closed in the wrong order -->
<p>This is <strong>important</p></strong>

Elements with no closing tag

A few elements have no content and no closing tag: <br> (line break), <hr> (a dividing rule), <img> (image), <meta> and <input>. These are called void elements.

Attributes

Attributes carry extra information about an element and always go in the opening tag: name="value". A few you will use constantly:

• id — a unique name for one element on the page (once only).
• class — a group name; many elements can share a class, and CSS uses it to style them.
• href is a link’s destination, src an image’s address, alt an image’s description, lang a language.

<p id="about" class="intro">Hi, I am a <strong>programmer</strong>.</p>
<hr>