Lesson 4 of 30

HTML Elements

2 min read · Free · No login needed

An HTML element is everything from the start tag to the end tag, including the content in between. For example, <p>Hello</p> is one complete element: <p> is the start tag, Hello is the content, and </p> is the end tag.

Tags are not elements

People often mix up the two words. A tag is just the bracketed name, like <h1>. An element is the whole thing — start tag, content, and end tag together. So <h1>Welcome</h1> is an element; <h1> alone is only a tag.

Empty elements

Some elements have no content and no end tag. They are called empty elements. The most common ones are:

<br> — a line break
<hr> — a horizontal line
<img> — an image
<input> — a form field

Nesting

Elements can sit inside other elements. This is called nesting. The inner element must close before the outer one does. Correct: <p>This is <strong>important</strong> text.</p>. Wrong: <p>This is <strong>important</p></strong> — the tags cross over, and browsers may show the page wrongly.

Tip: Browsers are forgiving — they will still show a page with broken nesting. But forgiving does not mean correct. Clean nesting keeps your pages predictable.

Example

<!DOCTYPE html>
<html>
<head>
<title>Elements</title>
</head>
<body>

<p>This is a <strong>paragraph</strong> element.</p>
<p>Line one<br>Line two</p>
<hr>
<p>Text after a horizontal line.</p>

</body>
</html>

Output

Output — how it looks in the browser

Try it yourself: copy the code above into a file named test.html, open it in your browser, and change the text to see what happens. That is how you learn — by changing things and watching the result.

HTML Basic HTML Attributes