网站HTML开发中自闭合标签斜杠使用疑问：HTML1与HTML2哪个正确？

Hey there! Great question—this is such a common point of confusion when getting deeper into HTML, especially if you’ve been exposed to older versions of the language. Let’s break this down clearly:

核心区别：HTML5 vs XHTML #

The key here boils down to which version of HTML you’re working with:

1. HTML5 标准写法（你的「HTML 1」） #

In HTML5, empty elements (tags that don’t have a closing pair, like <meta>, <link>, <img>, <br>) don’t require a trailing slash. This is the modern, recommended approach because HTML5 was designed to be more flexible and less strict than its predecessors.

Your first snippet is perfectly valid HTML5:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="apple-touch-icon" sizes="57x57" href="https://yeuteu.com/static/icons/apple-icon-57x57.png">

Browsers will render this without any issues, and it’s the style you’ll see in most modern tutorials and frameworks.

2. XHTML 严格写法（你的「HTML 2」） #

The trailing slash syntax (<meta .../>) comes from XHTML, a stricter, XML-based variant of HTML that was popular in the 2000s. In XHTML, all elements must be properly closed—even empty ones, hence the trailing slash.

While this syntax isn’t required in HTML5, browsers are backward-compatible, so your second snippet will still work perfectly fine:

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel="apple-touch-icon" sizes="57x57" href="https://yeuteu.com/static/icons/apple-icon-57x57.png"/>

The only downside here is that the trailing slashes are redundant in HTML5—they don’t add any functionality, just extra characters.

最终建议 #

If your document uses the standard HTML5 doctype (<!DOCTYPE html>) (which almost all modern websites do), go with the first, slash-free syntax. It’s cleaner, aligns with current best practices, and is what most developers use today.

If you’re working in a legacy environment that requires XHTML compliance (very rare these days), stick with the trailing slashes.

Either way, rest assured both versions will be interpreted correctly by all modern browsers!

内容的提问来源于stack exchange，提问作者Sourav Sarkar