我应该使用新的 HTML5 语义元素吗？ [关闭]答案

【问题标题】：Should I use the new HTML5 semantic elements? [closed]我应该使用新的 HTML5 语义元素吗？ [关闭]
【发布时间】：2013-11-02 16:22:10
【问题描述】：

我正在升级我的网站，这涉及到使用新的 HTML5 语义元素 <nav> <header> <footer> <aside> <section> 而不是常规的旧 <div> 元素。

我确实计划支持 IE7 和 IE8，但我知道这些版本不支持上述语义元素。我已经阅读了诸如 Modernizr、Initializr 和 HTML5shiv 之类的“插件”，并且我知道旧的浏览器将支持新元素 IF JavaScript 已启用，但如果不是，我该怎么办?

默认情况下，<html> 标记的类为 no-js，如果启用了 JavaScript，Modernizr/Initializr 会将此类替换为 js。这一切都很好，但有些事情我不确定。到目前为止，涵盖了哪些内容？

已排序

如果启用了 JavaScript，则 Modernizr/Initializr 支持 IE7 和 IE8。
使用reset.css 文件，其他旧版浏览器支持这些新标签。
现代浏览器都很好。

问题

如果 JavaScript 被禁用，我应该如何处理 IE8 及以下版本？ no-js 类被添加到 <html> 标记中，那么我到底能做什么呢？
如何使用<noscript> 来发挥我的优势？我不想通过编码使页面变得太大。

所以，除了这些问题，我还想问一下是否真的值得使用这些标签，什么时候我可以使用好的 ol' <div> 标签，它既支持旧版浏览器，又通过消除需要编码以使新标签在旧浏览器中工作？

谢谢你，迪伦。

【问题讨论】：

您认为禁用 javascript 的收视率百分比是多少？这真的是你需要设计的东西吗？
@jfriend00 我希望它会很低； 5%左右，但美国5%的人口本身就是一个很大的数字，更不用说全世界了。任何优秀的 Web 开发人员都希望获得尽可能多的流量。
真的是 5%？你从哪里得到这个号码？
我们应该为禁用 css 的用户提供老式的内联格式吗？
我猜对于 IE7/8 和没有 JS 大约 1%，可以忽略不计。未来打样当然比过去打样更重要。

标签： javascript css html modernizr

【解决方案1】：

例如，最好同时使用两者

<nav>
    <div>
        <ul>
        <!-- etc -->
        </ul>
    </div>
</nav>

如果您需要支持那些过时的浏览器，我不会做更多的事情。这样的好处不值得付出额外的努力。

【讨论】：

这实际上是一个非常好的主意，但是这不会通过在彼此之间使用块元素来添加不需要的填充/边距吗？
@DylRicho：你要确保nav 的填充/边距是0，因为如果没有加载 shiv，这就是 IE7/8 上的内容（我认为） .但是，问题在于，在您的普通 CSS 中，您总是必须设置 div 的样式，而不是 nav。 nav 将是额外的，纯粹是为了语义。但如果你真的想支持这些旧浏览器没有 JavaScript（哇，那是一小部分人口），我看不出有多少选择。 :-)
@DylRicho 你必须问自己为什么要使用语义标签。唯一可能的答案是搜索引擎 - 可访问性可能是第二个，但您可以为此使用 aria 角色。所以，真的，对页脚、导航等使用老式 div，并用新的 HTML 5 元素包装它们就足够恕我直言了。我看不出做更多的事情有什么好处。
好吧，你把工作加倍了，而且有些标签不是用来设置样式的（我想的是“部分”），但除此之外没有什么问题
html5doctor.com 总是一个很好的来源

【解决方案2】：

我确实计划支持 IE7 和 IE8，但我知道这些版本不支持上述语义元素。我已经阅读了诸如 Modernizr、Initializr 和 HTML5shiv 之类的“插件”，并且我知道如果启用了 JavaScript，那么旧版浏览器将支持新元素，但如果不是，我该怎么办？

如果未启用 JavaScript，则在显示新元素的内容时，CSS 将不会正确应用到它们。在 theory 中，您可以使用 noscript 元素触发重定向到不使用新元素的页面版本（通过 noscript 中的 meta 刷新标签），然后您'将维护您网站的两个版本。

例如，给定这个页面：Live Copy

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML5 Elements</title>
  <style>
    nav {
      color: green;
    }
  </style>
</head>
<body>
  <nav><ul><li>This text should be green</li></ul></nav>
</body>
</html>

...早期版本的 IE 将以默认颜色显示文本。在 style 元素之前添加 HTML5 shiv：

<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>

...如您所知，它需要 JavaScript，使文本变为绿色：Live Copy

【讨论】：

【解决方案3】：

不必遵循新的语义。新语义主要是为搜索引擎开发的，而不是为网站功能开发的。如果你真的想支持 IE，就支持 IE。

如果你真的考虑no-script 的情况，而 CSS 对你来说还不够，那么你所能做的就是 PHP/ASP 魔法。

我的一个朋友专门在 Flash 中工作，因为没有 js，完全是客户端，不关心浏览器......谁知道......

【讨论】：

【解决方案4】：

我应该使用新的 HTML5 语义元素吗？

是的。

如果 JavaScript 被禁用，我应该如何处理 IE8 及以下版本？ no-js 类被添加到标签中，那么我到底能做什么呢？

你可以这样做，

HTML

  <div id='wrapper'>
     // Whole website coding here
    </div>
    <div id='old-browsers'>
      Use an upgraded browser
    </div>

CSS

    .no-js #wrapper {
      display: none;
    }

    #old-browsers {
     display: none;
    }

    .no-js #old-browsers {
      display:block;
    }

我怎样才能在这里发挥我的优势？我不想通过编码使页面变得太大。

IE 考虑：

IE7 已经 7 岁了，现在大多数开发人员都不支持它。禁用 js 的 IE7 / IE8 用户非常少，您不应该针对这些异常进行开发。相反，您应该给他们一个使用上述方法升级的建议。您可以将noscript 标记用于相同的用例。

【讨论】：

这根本没有帮助； -1 并标记为 VLQ
不，“是”是评论。要成为答案，您实际上必须对其进行解释。
提示：如果您有详细的答案，请等到写完后再点击提交。
How to Answer 和常识。
如果您要重新编码整个内容，请使用 HTML5 元素。此页面上的每个答案都提供相同的建议。

【解决方案5】：

您可以做的（以及许多大型网站所做的）是在禁用 javascript 时（可选地，当浏览器为 IE7 或 IE8，但您需要服务器端检查）时显示通知，该网站不会按应有的方式显示。请参阅“How to detect if JavaScript is disabled?”了解如何操作。

只有 5.3% (source) 的互联网用户使用 source) 的用户禁用了 Javascript。您可以花费大量时间为最多 5% x 2% = 0.01% 的访问者制定一个平滑的解决方案，或者您可以花费 5 分钟构建我描述的通知系统。

【讨论】：

感谢您提供的信息；无论如何，我会考虑使用 PHP 来检测移动版本的用户代理，所以额外的 PHP 就可以了。但是，如果禁用 JS 的用户数量真的那么少，我不介意简单地使用语义元素。当然，我还是想支持IE8及以下，所以需要JS，但是当你想到Facebook和它有多少用户时，JS实际上必须是大多数网站的要求，以获得更好的体验。对于移动版本，我考虑过一些 <noscript> 的好处，但我还没有考虑清楚。
-1: 5.3% 的互联网用户使用 IE7 及以下并不意味着 5.3% 的 OP 潜在用户使用 IE7 及以下。例如，公司台式机的 IE 使用率通常高于 iOS 用户，因此了解人口统计数据始终很重要
@Nirk 我同意。我还认为 W3School 的统计数据仅反映访问他们网站的内容，而不是全球统计数据的代表（这可能很难实现）。