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:<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>
Optimizations for this user-account HTML structure?
html;html5