Elements and tags

An element is a piece of a page: a heading, a paragraph, an image. Most elements are written as an opening tag, some content, and a closing tag.

<p>This whole thing is a paragraph element.</p>

Empty (void) elements

A few elements have no content and no closing tag:

<p>Line one<br>Line two, after a line break</p>
<hr>
<img src="https://picsum.photos/seed/codemirai/240/120" alt="A random landscape">

<br> (line break), <hr> (horizontal rule), <img>, <input> and <meta> are all void elements.

Block and inline elements

Block elements start on a new line and take the full width available: headings, paragraphs, lists, <div>.

Inline elements sit within a line of text and only take the space they need: <a>, <strong>, <em>, <span>, <img>.

<p>A paragraph is a block.</p>
<p>Inside it, <strong>strong</strong> and <em>emphasised</em> text are inline.</p>
<div style="background:#eef0ff;padding:8px">A div is a block</div>
<span style="background:#e6f9ff">A span is inline,</span>
<span style="background:#fff4dc">so two spans share a line.</span>

div and span: generic containers

<div> and <span> mean nothing by themselves. They exist to group content so you can style it with CSS or reach it with JavaScript:

• <div> groups blocks of content (a card, a section of a layout),
• <span> wraps a piece of text inside a line.

<div class="card" style="border:1px solid #ccd;border-radius:8px;padding:12px;max-width:260px">
  <h3>Python</h3>
  <p>Price: <span style="color:#0f8a5f;font-weight:bold">Free</span></p>
</div>

When a more meaningful element exists (<nav>, <article>, <button>), prefer it over a div; you'll learn these in the semantic HTML lesson.

HTML is forgiving, but don't rely on it

Browsers try to display even broken HTML, guessing at missing closing tags. The guesses differ between browsers, so always close your tags and nest them properly.