patternhtmlMinor

Optimizations for this user-account HTML structure?

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

thisuseraccountforstructurehtmloptimizations

Problem

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:


    Saeed Neamati
    
        Current User
        
            
        
    
    
        2
        
            First Notification
            Second Notification
        
    
    
        Change your password
        Subscription settings
        Payments

Solution

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


    Saeed Neamati
    
        Current User
        
            
        
    
    
        2 
        
            First Notification
            Second Notification
        
    
    
        
            Change your password
            Subscription settings
            Payments

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.

Code Snippets

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

Context

StackExchange Code Review Q#31038, answer score: 2

Revisions (0)

No revisions yet.