Optimizations for this user-account HTML structure?

Question

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>

Answer 1

"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.