Take for example the HTML markup of this navigation:
<nav role="navigation" id="entity-primary-nav" class="entity-primary-nav entity-nav nav cp" data-name="Entity Primary Navigation"> <div class="entity-primary-nav---cr"> <h2 class="entity-primary-nav-name nav-name name heading obj" data-name="Entity Primary Navigation Name">Primary Navigation</h2>
The navigation’s formal name is “Entity Primary Navigation” as seen in the
data-name attribute. In displaying the name, we use
h2 because it is required for
<nav> elements to have a well-formed outline—and since this is the one that is intended to be displayed for users, we could choose a friendly name which is “Primary Navigation”.
Conceptually, headings and names are the same. In documents, they are used to label the succeeding content; in UI, they are used to name elements as metadata, as well as labels.