HTML Elements

An HTML element is everything from the start tag to the end tag.

The Parts of an Element

<p>Fresh samosas every evening.</p>

The start tag, the content and the end tag together make one element. Here it is a paragraph element.

Some more examples:

Nested Elements

Elements can be placed inside other elements. This is called nesting. In fact, every HTML page is a set of nested elements.

<!DOCTYPE html>
<html>
<body>

<h1>Ali's Snack Corner</h1>
<p>Samosa: <strong>Rs 40</strong> each.</p>

</body>
</html>

The example explained

• The <html> element is the root. It holds everything else.
• Inside <html> is the <body> element: the visible part of the page.
• Inside <body> are two elements: an <h1> and a <p>.
• Inside the <p> is a <strong> element, which makes "Rs 40" bold.

You can picture it like a family tree: <html> is the parent of <body>, and <body> is the parent of <h1> and <p>.

Close Elements in the Right Order

When elements are nested, close the inner one first. Think of it like boxes inside boxes.

<!-- Correct -->
<p>This is <strong>important</strong> news.</p>

<!-- Wrong: tags cross over each other -->
<p>This is <strong>important</p> news.</strong>

Never Skip the End Tag

Some browsers will still show a paragraph if you forget </p>. Do not rely on it. Missing end tags can cause strange layout problems later, especially when you add CSS.

<p>This paragraph is closed.</p>
<p>This one is closed too.</p>

Empty Elements

Elements with no content are called empty elements. They have no end tag.

<!DOCTYPE html>
<html>
<body>

<h2>Monday</h2>
<p>HTML class at 4 pm.</p>
<hr>
<h2>Tuesday</h2>
<p>CSS class at 4 pm.</p>

</body>
</html>

You may see <br /> with a slash in older code. Both <br> and <br /> work in HTML5.

Use Lowercase Tags

HTML does not care about upper or lower case: <P> and <p> are the same. Still, lowercase is the standard practice, and it is what you will see in almost all modern code.

Exercise