Recently, I started a newsletter. During the planning phase, I thought about content for my humbled subscribers. I watched a couple of development sessions while attending the Microsoft 365 Community Day. While great developers delivered those sessions, I recognised the overuse of <div> elements.

There is nothing wrong with using HTML div elements, but:

The <div> element should be used only when no other semantic element (such as <article> or <nav>) is appropriate.

Diversifying your HTML structure improves accessibility and user experience, making your code easier to read. This section will be exclusive to newsletter subscribers only.

Let’s share what this section looks like by sharing the first edition’s content sent out yesterday.

OL/UL vs Menu

You might be familiar with the list elements, such as &jlt;ol> for an ordered list and <ul> for an unordered list, but a <menu> list is also available.

So what’s the difference then? Ordered <ol> and unordered lists <ul> should only be used for non-interaction text.

<menu>, however, should be used whenever you have interactive elements such as links or buttons in the list.

From a point of accessibility standpoint:
”You are currently on a list with three entries” versus “You are currently on a menu with three menu items.” can make a huge difference, and you don’t have to add additional information to make it more accessible.

If you would like to get tips and tricks like this in your inbox, please subscribe to my newsletter because I keep them exclusively there for now. So join the DIV-University.

Information at MDN on <menu>