semantics of whether social links go in a <nav> element or not

Currently there doesn't seem to be any standard for what to put social links or social share buttons in, so it's really up to you, but it is possible to rule some options out.


NAV element definition: "The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links."

Based on this definition you could potential rule out the NAV tag, because the social links are not linking to other sections of the page or website and they are not considered "major navigation blocks" on a page.


MENU element definition: "The menu element represents a group of commands that a user can perform or activate. This includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked."

Based on this definition you could also rule out the MENU tag, because it is semantically meant for app functionality, or rather javascript events, to control the page/app. It isn't meant to be used for links.


So this leaves you with the DIV tag, but I would also argue that the UL tag could work just as well, if not better. Placing your social media links in the list would give slightly more context to a screen reader, because they would know they are entering a list of items. When a screen reader reaches a DIV tag they can't determine any information about it, unless you supply an aria-label attribute to the markup.

TL;DR; My recommendation would be to use a UL element to hold your social links/buttons.