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:


User title (or email, or username)
A thumbnail (on which you can click to change your picture)
A notifications icon (with the number of notifications in red)
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:

&lt;section id="user-account"&gt;
    &lt;span class="title"&gt;Saeed Neamati&lt;/span&gt;
    &lt;figure&gt;
        &lt;figcaption&gt;Current User&lt;/figcaption&gt;
        &lt;a href="#"&gt;
            &lt;img src="#" /&gt;
        &lt;/a&gt;
    &lt;/figure&gt;
    &lt;div class="notifications"&gt;
        &lt;span class="number"&gt;2&lt;/span&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;First Notification&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Second Notification&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;ul class="menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Change your password&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Subscription settings&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Payments&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/section&gt;
"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:

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


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.