html - HTML5 语义网络元素 - 为什么我应该在内部应用程序中使用它们

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

Some users who use accessibility features like a screenreader will be able to use your site much more easily. This also goes for device-specific-accessibility features, such as the iOS screen reader.

Answer 3

可访问性。例如，您可能有需要屏幕阅读器的视障用户。

Answer 4

Ease of development

The gain is small in your context, so the "fun" and "ease" that semantic web elements offer may be the main reason.

I prefer coding and maintaning an application like this:

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

than:

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

It's even better when using CSS selectors:

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

Update

Also, you can use specific functionalities that may be useful in your context, for example:

• audio/video integration

• time tags (open a date in a calendar)

Example:

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

• locations (some browser could offer to open a map or give directions)

Example:

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