Section 3: HTML Elements, Tags, Attributes and Nesting Rules
Welcome to Section 3 of Codementrix HTML5 Mastery. In this lesson, you will learn how HTML elements are constructed, how tags and attributes work, how to nest elements correctly, and how to avoid common markup errors. These concepts are essential for building maintainable, accessible web pages.
1. Learning Objectives
By the end of this lesson, you will be able to:
- Explain the difference between an HTML element, tag, and attribute.
- Identify opening tags, closing tags, and void elements.
- Write HTML elements with correctly formatted attributes.
- Use quoted attribute values and understand Boolean attributes.
- Apply proper nesting and closing-tag rules.
- Recognize elements that cannot contain certain other elements.
- Understand parent, child, sibling, and descendant relationships.
- Debug malformed HTML using a browser and an HTML validator.
2. What Is an HTML Element?
An HTML element represents a component of a web page, such as a paragraph, heading, link, image, or form control.
Consider this example:
<p>Welcome to Codementrix.</p>This is a paragraph element. It contains an opening tag, text content, and a closing tag.
<p>is the opening tag.Welcome to Codementrix.is the text content.</p>is the closing tag.- The complete structure is the paragraph element.
HTML elements can contain text, other HTML elements, or both. Some elements do not have ordinary text content or closing tags; these are called void elements.
Example: Different HTML Elements
<h1>Welcome to My Website</h1>
<p>Learn web development with Codementrix.</p>
<a href="https://example.com">Visit Example</a>Here, the browser interprets the elements according to HTML rules. The heading identifies a heading, the paragraph identifies a paragraph, and the anchor creates a hyperlink.
Important: HTML describes the structure and meaning of content. CSS controls presentation, while JavaScript can add behavior.
3. HTML Tags vs Elements
The terms tag and element are related, but they do not mean exactly the same thing.
- Tag: The markup syntax enclosed by angle brackets, such as
<h2>or</h2>. - Element: The complete HTML construct, including its tags and content where applicable.
For example:
<h2>Our Services</h2>