What is an HTML Element?
- An HTML element is a complete piece of HTML, usually made of an opening tag, content, and a closing tag.
- Example element:
<p>Paragraph</p> - Elements define what the browser should display and how the content is organized on the page.
Tag vs Element
- A tag is the markup inside angle brackets, like
<p>or</p>. - An element is the full structure:
<p>Paragraph</p> - In simple terms: tags are parts and elements are the whole thing.
Anatomy of an Element
- Opening tag: tells the browser where the element starts (example:
<p>) - Content: the text or other elements inside (example:
Hello) - Closing tag: tells the browser where the element ends (example:
</p>) - Complete example:
<p>Hello</p>
Void Elements (No Closing Tag)
- Some elements are called void elements — they don’t wrap content, so they don’t need a closing tag.
- Common void elements:
<img>,<br>,<hr>,<meta> - Example:
<img src="..." alt="..." />
Attributes
- Attributes add extra information to an element and are written inside the opening tag.
- Example:
<a href="https://example.com">Link</a>—hrefis an attribute. - You will learn attributes in the next chapter.
Example: Elements in Action
Tags and Elementshtml
<!-- Tags and Elements -->
<h1>Heading</h1>
<p>Paragraph</p>
<!-- Void element (no closing tag) -->
<img src="https://via.placeholder.com/160" alt="Placeholder image" />
<!-- Link element -->
<a href="https://example.com">Link</a>Preview
localhost:3000
Loading preview...
Note: This preview shows raw HTML without CSS. Some elements (like <img>) are void elements and do not have closing tags.
Quick Recap
- Tags look like
<p>and</p>. - Elements are the complete structure:
<p>Paragraph</p>. - Attributes provide extra info, like
hrefandalt. - Void elements don’t have closing tags (example:
<img>).