Day 6/180 of Frontend Dev: HTML Attributes and Nesting Elements – The Building Blocks of Web Structure

Welcome to Day 6 of the 180 Days of Frontend Development Challenge. Today, we’ll explore two fundamental concepts that shape how HTML elements behave and interact: attributes and nesting. By the end of this lesson, you’ll understand how to enhance elements with attributes and properly structure content by nesting elements inside one another.

1. HTML Attributes: Enhancing Elements with Extra Information

Attributes provide additional details about HTML elements, modifying their behavior or appearance. They are always included in the opening tag in the format:

<element attribute="value">Content</element>

Common HTML Attributes

Here are some of the most frequently used attributes:

Attribute	Purpose	Example
class	Assigns a class for CSS styling	<p class="highlight">Text</p>
id	Provides a unique identifier	<div id="header">...</div>
style	Applies inline CSS	<p style="color: red;">Red text</p>
href	Specifies a link URL	<a href="https://example.com">Link</a>
src	Defines an image/video source	<img src="image.jpg" alt="Description">
alt	Provides alternative text for images	<img src="logo.png" alt="Company Logo">
disabled	Disables an input/button	<button disabled>Can't Click</button>

Example: Using Attributes in Practice

<a href="https://google.com" target="_blank" class="external-link">
    Visit Google (opens in new tab)
</a>

• href sets the link destination.
• target="_blank" opens the link in a new tab.
• class="external-link" allows styling via CSS.

2. Nesting HTML Elements: Creating Structured Layouts

Nesting means placing elements inside other elements to create hierarchical structures. Proper nesting ensures clean, readable, and valid HTML.

Rules of Nesting

1. Close tags in reverse order (Last opened, first closed).
2. Avoid overlapping tags (Improper nesting breaks layouts).
3. Use semantic elements (<header>, <nav>, <section>) for better structure.

Correct vs. Incorrect Nesting

✅ Proper Nesting:

<p><strong><em>This text is bold and italic</em></strong></p>

❌ Improper Nesting (Invalid HTML):

<p><strong><em>This is wrong</p></em></strong>

Practical Example: Building a Card Component

<article class="card">
    <header>
        <h3>Article Title</h3>
        <p>Published: <time datetime="2023-05-20">May 20, 2023</time></p>
    </header>
    <section>
        <p>This is a nested paragraph inside a <strong>section</strong>.</p>
        <img src="image.jpg" alt="Example" width="300">
    </section>
    <footer>
        <a href="#" class="button">Read More</a>
    </footer>
</article>

• <article> contains nested <header>, <section>, and <footer>.
• <time> uses the datetime attribute for machine-readable dates.
• <a> has a class for styling.

3. Best Practices for Attributes & Nesting

1. Use semantic HTML (<nav>, <article>, <section>) for better accessibility.
2. Avoid excessive inline styles (Use CSS classes instead).
3. Keep nesting logical – Deeply nested structures can become hard to maintain.
4. Validate your HTML using W3C Validator.

Exercise: Apply What You Learned

1. Create a navigation bar using <nav> with nested <ul> and <li>.
2. Build a profile card with nested <div>, <img>, and <p> elements.
3. Add attributes (class, id, href) to enhance interactivity.

Keep practicing, and see you in the next lesson!

(For structured exercises, check out the Learn Frontend Development in 180 Days ebook.)

Comments

[Netzro]

Thank you

[CodeWithDhanian]

Welcome

[Nathan Tarbert]

pretty cool seeing the daily step-by-step stuff laid out like this you think remembering good structure actually gets easier as you go or does it always need focus

[CodeWithDhanian]

Keep learning

[Dotallio]

Love that you're emphasizing nesting and attributes so early, they're easy to overlook but so critical. What's the trickiest part of nesting tags that you've run into so far?