Elements, tags & attributes

HTML is built from elements — the building blocks of every web page. An element is created with tags, and can carry attributes that give extra information. Understanding this basic anatomy — tags, elements, attributes — unlocks all of HTML, because everything on a page is made of them.

Tags and elements

An HTML element usually has an opening tag, some content, and a closing tag:

Look at <p>This is a paragraph.</p>:

• <p> is the opening tag — it starts the element.
• This is a paragraph. is the content.
• </p> is the closing tag — note the slash /, which marks the end.

Together they form a paragraph element. The tag name (p, h1) tells the browser what kind of element it is (a paragraph, a heading). Most elements follow this open–content–close pattern.

Elements can nest

Elements go inside other elements, forming the page's structure:

Here a <div> (a generic container) holds an <h2> and a <p> inside it. This nesting — elements within elements — is how pages are structured (a page contains sections, sections contain headings and paragraphs, and so on). Indent nested elements (as above) to keep the structure readable. Nesting must be properly closed — an inner element closes before its outer one.

Attributes: extra information

Attributes go in the opening tag and give extra details about an element:

• <a href="..."> — the href attribute says where the link points.
• <img src="..." alt="..."> — src says which image to show, alt gives descriptive text.

Attributes are written as name="value" inside the opening tag. They configure the element — a link needs to know its destination, an image needs to know its source. Different elements accept different attributes.

Self-closing (void) elements

A few elements have no content, so they don't need a closing tag — they're "self-closing" (or void):

Elements like <br> (line break), <hr> (horizontal rule), and <img> (image) stand alone — there's nothing to put between an opening and closing tag, so they're written as a single tag. Most elements do have content and need closing, but know these self-closing exceptions exist.

The mistake beginners make

Forgetting the closing tag (</p>) — the slash and the tag — which breaks the structure (the browser doesn't know where the element ends). Also, improper nesting (closing an outer element before an inner one), or misspelling tag names (<paragrpah> won't work). And forgetting the quotes around attribute values (href=example.com vs href="example.com"). Open and close every element (except void ones), nest and indent properly, and quote your attribute values.

Your turn

Build some structure below — add a heading, nest a paragraph inside the div, and add a link with an href:

Your turn

1. Create elements with opening and closing tags (

   content

   ), where the tag names the element type.
2. Nest elements inside each other (indenting for readability) to build page structure.
3. Add attributes (name="value") like href and src to configure elements; know self-closing elements (
   , ).

Key points

• HTML elements are made with tags: an opening tag

  , content, and a closing tag

  (note the slash).
• The tag name says what kind of element it is (p = paragraph, h1 = heading); elements nest inside each other to form structure.
• Attributes (name="value") in the opening tag give extra info — href (link destination), src (image source), alt (description).
• Self-closing elements (
  ,

  ---

  , ) have no content and need no closing tag. Always close others and quote attribute values.