# Optimizations for this user-account HTML structure?

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)
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>
<span class="number">2</span>
<ul>
</ul>
</div>
<li><a href="#">Subscription settings</a></li>
<li><a href="#">Payments</a></li>
</ul>
</section>


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

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.