HTML Β· Chapter 4 of 45
HTML Elements
An HTML element consists of a start tag, content, and an end tag, like <p>Content</p>. Some elements are 'void' and self-close, like <br> or <img>, having no closing tag.
Elements can be nested inside each other, forming a tree structure. Proper nesting (closing tags in the reverse order they were opened) is essential for valid HTML.
Syntax
<tagname>content</tagname>Anatomy of an element
A tag name is wrapped in angle brackets: <tagname>. The end tag adds a forward slash: </tagname>. Together with content, this forms an element.
Nested elements
Elements can contain other elements. For example, <p>Hello <strong>world</strong></p> nests a <strong> tag inside a paragraph.
Example 1 (html)
<p>This is a <strong>nested</strong> element.</p>Output
This is a nested element.The <strong> element is nested inside the <p> element.
Example 2 (html)
<img src="cat.jpg" alt="A cat">Output
(renders an image)<img> is a void element β it never needs a closing tag.
Key points
- Elements have a start tag, content, and end tag.
- Void elements like <br> and <img> have no closing tag.
- Elements must be properly nested.
- The browser builds a DOM tree from nested elements.
π‘ Note: Forgetting to close a tag is a common bug β always check nesting when something looks broken.