In HTML, an element is the complete “building block” of a webpage. People often use the words “tag” and “element” interchangeably, but there is a technical difference: an element is the collection of the opening tag, the attributes, the content, and the closing tag.
Anatomy of an HTML Element
Most elements follow a specific structure. If you miss one part (like a closing tag), it can break the layout of the entire page.
-
Opening Tag: Used to state where an element starts (e.g.,
<p>). -
Attributes: Found inside the opening tag to provide extra information (e.g.,
class="text-blue"). - Content: The actual text, images, or other elements nested inside.
-
Closing Tag: Used to state where the element ends (e.g.,
<p>).
<p class="text-blue">Lorem Ipsum is a dummy text.</p>
Categories of Elements
HTML elements are categorized based on how they behave in the document flow. Understanding this is the secret to mastering layouts.
1. Block-level Elements
These elements always start on a new line and take up the full width available (stretching to the left and right as far as they can).
-
Examples:
<div>,<h1>-<h6>,<p>,<ul>,<li>,<section>. - Common Use: Creating the main structure or "boxes" of a website.
2. Inline Elements
These elements do not start on a new line. They only take up as much width as necessary for their content.
-
Examples:
<span>,<a>,<img>,<strong>,<em>. - Common Use: Styling specific words within a paragraph or placing a link inside text.
3. Void (Empty) Elements
These elements do not have any content and therefore do not have a closing tag.
-
Examples:
<img>,<br>,<input>,<hr>.
Element Nesting
Elements can be placed inside other elements. This is called nesting. It is vital to close your tags in the reverse order they were opened to maintain a proper “tree” structure.
✅ Correct Nesting:
<p>This is <strong>bold</strong> text.</p>
❌ Incorrect Nesting:
<p>This is <strong>bold text.</p></strong>
Case Sensitive
HTML elements are not case-sensitive <P> means the same as <p>, which means we can use both upper or, lower case letters in the tag.
<P>HTML is not case sensitive i.e we can use both upper or, lower case letters in the tags.</p>
Quick Summary Table
| Feature | Block-level | Inline |
|---|---|---|
| New Line | Starts on a new line | Does not start on a new line |
| Width | Full width of container | Only as wide as the content |
| Nesting | Can contain Block or Inline | Usually only contains other Inline |
| Example | <div>, <header>, <p> | <span>, <b>, <a> |