3
\$\begingroup\$

I need a valid and semantic HTML structure for the user-account (user-panel) section of the overall layout of my web application.

What I saw in other web apps include:

  1. User title (or email, or username)
  2. A thumbnail (on which you can click to change your picture)
  3. A notifications icon (with the number of notifications in red)
  4. An arrow besides the whole area (which shows a menu to have further options for your user account settings)

Here is the HTML I've come up with:

<section id="user-account">
    <span class="title">Saeed Neamati</span>
    <figure>
        <figcaption>Current User</figcaption>
        <a href="#">
            <img src="#" />
        </a>
    </figure>
    <div class="notifications">
        <span class="number">2</span>
        <ul>
            <li><a href="#">First Notification</a></li>
            <li><a href="#">Second Notification</a></li>
        </ul>
    </div>
    <ul class="menu">
        <li><a href="#">Change your password</a></li>
        <li><a href="#">Subscription settings</a></li>
        <li><a href="#">Payments</a></li>
    </ul>
</section>
\$\endgroup\$
2
\$\begingroup\$

"Saeed Neamati" should probably be the heading (h1) of the section (instead of span).

Don’t forget the alt attribute for the img.

The .notifications should be a sectioning element, probably section, maybe aside. Then the notification count could be the heading.

The .menu should be enclosed by a nav, as it’s the navigation for that section.

Result:

<section id="user-account">
    <h1 class="title">Saeed Neamati</h1>
    <figure>
        <figcaption>Current User</figcaption>
        <a href="#">
            <img src="#" alt="" />
        </a>
    </figure>
    <section class="notifications">
        <h1 class="number">2</h1> <!-- maybe add " notifications" -->
        <ul>
            <li><a href="#">First Notification</a></li>
            <li><a href="#">Second Notification</a></li>
        </ul>
    </section>
    <nav>
        <ul class="menu">
            <li><a href="#">Change your password</a></li>
            <li><a href="#">Subscription settings</a></li>
            <li><a href="#">Payments</a></li>
        </ul>
    <nav>
</section>

Depending on your implementation, the .menu resp. the .notifications may be the main content for that section. In that case, the corresponding sectioning element should be removed.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.