Question

为什么我应该在内部应用程序中使用HTML5语义Web元素？语义元素似乎有利于搜索引擎检测哪些元素特定于导航，文章等。如果我在仅基于客户端的HTML应用程序中使用这些元素，我将获得什么？

Answer 1

可能获益：

可读性
辅助
轻量级应用程序
减少对网络的约束（较小的文件大小）
更容易扩展
更容易培训第二位开发人员以适应
练习开发外部网站的良好习惯的机会

可能的缺点：

无？

基本上，

<header>
    <hgroup>
        <h1>Logo and Application Title</h1>
        <h2>Clever Slogan</h2>
    </hgroup>

    <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            <li>Test</li>
            <li>Stuff</li>
        </ul>
    </nav>
</header>

看起来比...更好。

<div id="header">
    <div class="top_logo">
        <h1>Logo and Application Title</h1>

        <h2>Clever Slogan</h2>
    </div>

    <div class="navigation">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            <li>Test</li>
            <li>Stuff</li>
        </ul>
    </div>
</div>

还有样式

<style type="text/css">
    header hgroup {}
    header nav li {}
</style>

看起来比

更好

<style type="text/css">
    #header .top_logo {}
    #header .navigation li {}
</style>

Answer 2

使用屏幕阅读器等辅助功能的某些用户可以更轻松地使用您的网站。这也适用于特定于设备的辅助功能，例如iOS屏幕阅读器。

Answer 3

辅助功能。例如，您可能有一个需要屏幕阅读器的视障用户。

Answer 4

易于开发

在你的环境中收益很小，所以＆＃34;有趣＆＃34;和＆＃34;轻松＆＃34;语义网元素提供可能是主要原因。

我更喜欢编码和维护这样的应用程序：

<nav>
    ...
</nav>
<article>
    <h2>Article's title</h2>
</article>

比：

<div class="navigation">
    ...
</div>
<div class="article">
    <h2>Article's title</h2>
</div>

使用CSS选择器时效果更好：

$("nav").show();
$("article figure")...

<强>更新

此外，您可以使用在您的上下文中可能有用的特定功能，例如：

音频/视频集成
时间标记（在日历中打开日期）

示例：

<time datetime="1982-07-18">Priyanka Chopra’s birthday</time>

位置（某些浏览器可以提供打开地图或指示）

示例：

<location lat=51.502064 long=-0.131981>London SW1A 4WW</location>

HTML5语义Web元素 - 我为什么要在内部应用程序中使用它们

4 个答案: