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.