Elements, Tags, and Attributes

An element is the building block of HTML. Most elements have three parts:

<p>I am a paragraph.</p>

• The opening tag: <p>
• The content: I am a paragraph.
• The closing tag: </p> (note the forward slash)

Empty (void) elements

Some elements have no content and no closing tag. They are called void elements:

<br>                      <!-- line break -->
<hr>                      <!-- horizontal rule (divider) -->
<img src="cat.jpg" alt="A sleepy cat">
<input type="text">

Nesting elements

Elements can live inside other elements. This is called nesting. Always close the inner element before the outer one.

<!-- Correct -->
<p>This is <strong>very</strong> important.</p>
 
<!-- Wrong: tags overlap -->
<p>This is <strong>very</p></strong> important.

Headings and paragraphs

HTML has six heading levels, from <h1> (most important) to <h6> (least important).

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
<p>A paragraph of normal text.</p>
<p>Another paragraph.<br>This line comes after a line break.</p>
<hr>
<p>Text after a divider.</p>

Attributes

Attributes give extra information about an element. They always go in the opening tag, written as name="value".

<a href="https://example.com" title="Visit Example">Example</a>
<img src="logo.png" alt="Company logo" width="200">
<p id="intro" class="highlight">Welcome!</p>

Common attributes you will see everywhere:

Comments

Comments are notes for humans. The browser ignores them.

<!-- This is a comment. It will not appear on the page. -->

Whitespace

HTML collapses multiple spaces and line breaks into a single space. To start a new paragraph, use a new <p>; for a single line break, use <br>.

Summary

• Elements usually have an opening tag, content, and a closing tag.
• Void elements like <img> and <br> have no closing tag.
• Nest elements properly, never overlap them.
• Attributes like id, class, and href add information to elements.