Web Development - HTML Elements
HTML Elements
HTML pages are built using elements. An HTML element tells the browser how to display content - for example, a heading, a paragraph, or an image.
Each element usually has an opening tag and a closing tag, with content in between:
Example explained:
| Part | Description |
|---|---|
<p> |
Start tag - tells the browser where the paragraph begins |
This is a paragraph. |
Content - the text inside the element |
</p> |
End tag - tells the browser where the paragraph ends |
Tip: Most HTML elements come in pairs like <p> and </p>.
Nested Elements
HTML elements can be nested - meaning you can put elements inside other elements.
The browser reads them from top to bottom and inside to outside:
Here, the <b> element is inside the <p> element.
Tip: Always close elements in the opposite order they were opened. Think of it like stacking boxes - the last one opened should be the first one closed.
Empty Elements
Some elements do not have closing tags, like <br>. These are called empty elements.
The <br> tag inserts a line break:
Other common empty elements:
<hr>- horizontal line<img>- image<meta>- metadata inside the head
Case Sensitivity
HTML tags are not case-sensitive.
This means <P> and <p> mean the same thing -
but the convention (and best practice) is to use lowercase tags:
Example
These two lines are equivalent:
<P>This is a paragraph.</P>
<p>This is a paragraph.</p>
Try it Yourself »
Whitespace in HTML
HTML ignores extra spaces and line breaks in your code. Whether you write your text on one line or several, it will appear the same in the browser.
Example
These two paragraphs display the same:
<p>This paragraph has many spaces.</p>
<p>This paragraph has many spaces.</p>
Try it Yourself »
Tip: If you want to preserve spacing, use the <pre> element, which keeps your text formatting exactly as written.
Summary
- An HTML element is everything from the start tag to the end tag.
- Most elements have both opening and closing tags.
- Some elements are empty (no closing tag).
- HTML ignores extra spaces and new lines.
Next, you'll learn about the most common HTML elements for structuring a page - headings and paragraphs.
