Adding a menu item without a link URL should not add a broken HTML a tag

[cliffpaulick]

I just want a text-only menu item, but this adds an empty/broken <a> tag. See attached screenshot.

[costdev]

Thanks for opening this ticket @cliffpaulick!

Some info for those reading this ticket:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

The target, download, ping, rel, hreflang, type, and referrerpolicy attributes must be omitted if the href attribute is not present.

If the itemprop attribute is specified on an a element, then the href attribute must also be specified.

(my emphasis)
Source: ​HTML spec for <a> tag

• The link is invalid because it has an itemprop attribute, which requires an href attribute that isn't present.
• I don't see this being added by Core anywhere, so I assume it's being added by a plugin or theme. In this case, the plugin/theme is failing to check the href value to determine whether itemprop should be added. If this is a bundled theme, we should correct this behaviour. If this is a third party theme/plugin, a ticket should be raised in the support forum for the plugin/theme.

Aside from that, this is only possible because Core doesn't fully validate the URL field.

• Currently, you can't add an empty URL via Appearance > Menus or via Customize > Menus.
• However, on both screens, you can edit an existing link to remove the URL. i.e. Incomplete validation.
• I think this should be the focus for discussion on this ticket. Should we add this missing validation?

If there is a desire for Core to allow plain text menu items, this should be created as a separate enhancement ticket.

[cliffpaulick]

Replying to costdev:

I tested with Twenty Twenty-One and all plugins disabled and there was less markup but the
a tag remained.

I then enabled Genesis child theme and the additional markup came through.

Sorry for the errant report here, but hopefully some bug fixing or enhancement results of it. Thanks for your efforts.

Thanks for opening this ticket @cliffpaulick!

Some info for those reading this ticket:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

The target, download, ping, rel, hreflang, type, and referrerpolicy attributes must be omitted if the href attribute is not present.

If the itemprop attribute is specified on an a element, then the href attribute must also be specified.

(my emphasis)
Source: ​HTML spec for <a> tag

• The link is invalid because it has an itemprop attribute, which requires an href attribute that isn't present.
• I don't see this being added by Core anywhere, so I assume it's being added by a plugin or theme. In this case, the plugin/theme is failing to check the href value to determine whether itemprop should be added. If this is a bundled theme, we should correct this behaviour. If this is a third party theme/plugin, a ticket should be raised in the support forum for the plugin/theme.

Aside from that, this is only possible because Core doesn't fully validate the URL field.

• Currently, you can't add an empty URL via Appearance > Menus or via Customize > Menus.
• However, on both screens, you can edit an existing link to remove the URL. i.e. Incomplete validation.
• I think this should be the focus for discussion on this ticket. Should we add this missing validation?

If there is a desire for Core to allow plain text menu items, this should be created as a separate enhancement ticket.

[costdev]

@cliffpaulick I tested with Twenty Twenty-One and all plugins disabled and there was less markup but the a tag remained.
I then enabled Genesis child theme and the additional markup came through.

Thanks for additional information!

An empty <a> tag without href isn't invalid as mentioned by the HTML spec above - and, for example, could be targeted in CSS with a:not([href]). It seems the Genesis theme adds the itemprop attribute without checking whether doing so will produce an invalid <a> tag. That's understandable, given that WordPress Core tries to block the possibility of an empty URL in most cases.

The Menus component considers an empty URL field to be invalid and prevents it in all cases except when editing an existing menu item. I consider this a bug in Core, and think we should make the validation consistent.

[cliffpaulick]

I agree empty a tag is not invalid HTML. I like the idea of consistent validation but would then also like to see an enhancement ticket added for the ability to add plain text items to the menu, if you don't mind proceeding with both ends of this ticket as it is now. tyvm

[sabernhardt]

Related tickets:

• Validating the field for existing custom links is in #42288.
• Requests for other non-link elements include #13273 and #54097.

[cliffpaulick]

Replying to sabernhardt:

Perfect, tyvm. Hopefully 13 years ago can pick up some activity sooner than later ;)

Related tickets:

• Validating the field for existing custom links is in #42288.
• Requests for other non-link elements include #13273 and #54097.