HTML Notification Center Markup: Read Status and Time

A notification center is a list of updates a user can review. Give each item readable text and a date or time when it helps.

What You Need to Know

A read/unread state should be communicated in words or an accessible label, not only by color. HTML alone does not store a user's read status.

The goal is not to collect as many tags as possible. Pick the element that best describes what the content really is.

Example: See It in Action

Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<section aria-label="Notifications">
    <h2>Recent updates</h2>
    <ol>
        <li>
            <p>New homework posted.</p><time datetime="2026-10-19">Today</time>
        </li>
    </ol>
</section>

Let’s Understand the Example

• Section groups content around a shared topic and usually has a heading.
• An h2 starts a major section beneath the page topic.
• Ol groups items whose order or numbering matters.
• Aria-label supplies an accessible name when a visible label is unavailable or inadequate.
• Datetime gives a date or time in a machine-readable form, separate from the friendly text shown to visitors.

You should see distinct list items. Ask whether their order carries meaning: if the order matters, use an ordered list; otherwise use an unordered list.

What Should You See?

The page should display “Recent updates” as a heading, followed by its related content. Change the heading text and refresh the browser to see the result.

Read only the headings, from top to bottom. Do they tell a sensible story? If not, move sections or choose levels that match the content.

Try It Yourself

1. Add a second notification that says whether it is read or unread.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Assuming a bold font automatically communicates unread status to every user.
• Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.

Key Takeaways

• A notification center is a list of updates a user can review.
• Section groups content around a shared topic and usually has a heading.
• A read/unread state should be communicated in words or an accessible label, not only by color. HTML alone does not store a user's read status.