sharepoint online – Data-Ms-Options is not a valid attribute of element ‘div’


I am using VS 2019 to develop a sharepoint add-on for sp online. When I hover over ‘data-ms-control’ and ‘data-ms-options’, I get the error “Validation(XHTML 1.0 tRANSITION): Attribute ‘data-ms-control’ is not a valid attribute of element ‘div’, which appears to be the reason why my top bar does not work. How do I fix this?

The relevant code in question is shown below.

<head>...</head>
<body style="margin:10px;">

    <!-- Chrome control placeholder. Options are declared inline.  -->
    <div>Test div!</div>
<div 
    id="chrome_ctrl_container"
    data-ms-control="SP.UI.Controls.Navigation"  
    data-ms-options=
        '{  
            "appHelpPageUrl" : "Help.aspx",
            "appIconUrl" : "/Images/AppIcon.png",
            "appTitle" : "Chain Store",
            "settingsLinks" : (
                {
                    "linkUrl" : "Account.aspx",
                    "displayName" : "Account settings"
                },
                {
                    "linkUrl" : "Contact.aspx",
                    "displayName" : "Contact us"
                }
            )
         }'>
</div>
 .....

More info: I am following the microsoft tutorial https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/give-your-provider-hosted-add-in-the-sharepoint-look-and-feel and the sharepoint top bar does not show up, which I have concluded to be because of this error message as the div tags are what displays the sharepoint top bar.