Skip to content

fix: improve HTML sample snippet with lang attribute and modern defaults#304794

Closed
yogeshwaran-c wants to merge 1 commit intomicrosoft:mainfrom
yogeshwaran-c:fix/html-sample-snippet-viewport-tabstops
Closed

fix: improve HTML sample snippet with lang attribute and modern defaults#304794
yogeshwaran-c wants to merge 1 commit intomicrosoft:mainfrom
yogeshwaran-c:fix/html-sample-snippet-viewport-tabstops

Conversation

@yogeshwaran-c
Copy link

What kind of change does this PR introduce?

Bug fix / UX improvement

What is the current behavior?

The HTML sample completion snippet has several issues:

  1. Missing lang attribute on the <html> tag (accessibility and i18n concern)
  2. Includes obsolete <meta http-equiv='X-UA-Compatible' content='IE=edge'> tag, which is only relevant for legacy IE browsers
  3. Tab stops prompt for viewport values, which are universally standardized

Closes #272331

What is the new behavior?

The updated snippet:

  • Adds lang attribute with ${1:en} tab stop to the <html> tag for accessibility
  • Removes the obsolete X-UA-Compatible meta tag
  • Places viewport meta before <title> (standard ordering)
  • Tab stop flow: langtitlestylesheet hrefscript srcbody content

Before:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    
</body>
</html>

After:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>Page Title</title>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    
</body>
</html>

Additional context

  • The lang attribute is recommended by WCAG accessibility guidelines and is included in modern HTML boilerplates
  • The X-UA-Compatible meta tag was only needed for Internet Explorer and is no longer relevant
  • Viewport meta is placed before <title> to follow the convention of meta declarations first
  • The viewport values (width=device-width, initial-scale=1) are universally standard and don't need tab stops

- Add lang attribute to html tag with tab stop for accessibility
- Remove obsolete X-UA-Compatible meta tag (IE-only)
- Place viewport meta before title (standard ordering)
- Renumber tab stops: lang -> title -> css -> js -> body
@vs-code-engineering vs-code-engineering bot added this to the 1.114.0 milestone Mar 25, 2026
@yogeshwaran-c
Copy link
Author

Duplicate of #304818 which has been approved by maintainers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[html] improve HTML sample snippet: Don’t prompt for viewport values

2 participants