Vuetify: [Feature Request] Please make the tag attribute global to all v- elements.

[vuoriliikaluoma]

Problem to solve

Lack of control over HTML semantics.

Using a v-toolbar element, as an example, will render a nav element.
But if your not using the toolbar for "major navigation blocks" as per HTML5 specification you might want it as a div or header etc. depending on your use case.

Proposed solution

You already have the tag attribute on v-data-iterator, v-container, v-jumbotron and v-card.
You ought to be able to copy that functionality over to the other components as well.

[johnleider]

@vuetifyjs/core-team thoughts?

[nekosaur]

I don't know about uniformly adding it to every single component. I think I'd rather have it be evaluated on a case by case basis.

[vuoriliikaluoma]

Sure it makes sense to not have it on stuff like v-text-field, v-select and such.
While i said all i really meant on elements where the rendered element is functionally irrelevant.

[johnleider]

For now, this feature request will focus on adding this ability to applicationable components.

[taai]

w3schools says: "The <nav> element is intended only for major block of navigation links."
But Mozilla says: "A document may have several <nav> elements, for example, one for site navigation and one for intra-page navigation."
And this article calms me down even more.

However, while I'm reading docs of Vuetify, I'm getting frustrated of inconsistencies and misuse of <nav> element when using <v-toolbar>...

The <v-toolbar> docs suggests to use it as a "floating toolbar" over a map – there are __no links__ inside, so why would you wrap a text input and few buttons inside of <nav> element?! 😁

The <v-data-table> docs have at least 2 examples with <v-toolbar> being used just to contain the title of the table together with a search bar or a button.

In the <v-navigation-drawer> docs, in "Avatars" section <nav> wraps the user's name and picture, but not the actual navigation links... 😁

So, please make a <v-nav-toolbar> which should be used only as a container of main navigation stuff (at the top of the page, as usual), and a separate <v-toolbar> for everything else (it is very useful, please don't take it away)! Or make a flag that "turns on" the usage of <nav> element instead of <div>...

By the way, the reason why I started to explore this issue was frustration of which UI component to use to contain the title of the data table and some buttons like search, filter and sorting. The usual CRUD page... Should I use <v-toolbar> or wrap everything inside of <v-card>? I'm still not sure. 😄

[vuoriliikaluoma]

Don't know what compelled me to look at the W3C version of the HTML spec in the opening comment.
The official HTML standard is by WHATWG and they say:

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.
NOTE: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

Source: https://html.spec.whatwg.org/multipage/sections.html#the-nav-element

It's not limited to major navigational content but it is recommended for that use.
Slight difference from W3C's harsher rules.

My point about HTML semantics still stands though.

Also maybe we should change the title to something like "Improve semantics by adding the tag attribute to more components"?

[scp-nm]

I've noticed this too recently. I wanted to be able to add tag="nav" to a v-list but this currently isn't possible (v.1.5.9) and think it would be good to be able to do this.
v-card is great, because I can add tag="section" and make it more semantic.

[johnleider]

This is something I still intend to do but did not make the cut for v2.0. Thank you for your patience.