HTML语义化的案例分析 | 青训营

su_muzhe
79 阅读2分钟

结构化

一个页面比作房子，那HTML就是有着钢筋混凝土的墙，房盖房梁一样的架子；而CSS就是装饰材料，油漆地板一类的物品。好的页面结构就是在没有CSS装饰的情况下，页面结构依然清晰明了，房屋依然可现。而人们常说的DIV+CSS，只是通俗的说法，并不是通篇的DIV，记住：DIV不是神！

语义化

HTML是一种对文本内容和意义（即语义）的补充说法。它会告诉我们说：“这行是一个标题，这几行组成一个段落，这是一个项目列表，那是一个链接。”而不是来告诉我们：“这些字是蓝色的，那些又是红色的，这部分内容靠右，这几个是斜体。”这些是CSS的工作。总之：HTML告诉我们一块内容是什么（或其意义），而不是它长什么样子。这时候就会有猹说了：“我闲的dan疼，DIV 就是 yyds。” 那这时候，只能给你上优点了：

1.有助于构架良好的html结构；
2.有利于搜索引擎的建立索引、抓取；
3.有利于页面在不同的设备上显示尽可能相同；
4.有利于构建清晰的机构，有利于团队的开发、维护

案例分析

语义化HTML结构：

<body>
    <header>
        <nav>
            ……
        </nav>
    </header>
    <aside>
        <nav>
            ……
        </nav>
    </aside>
    <section>……</section>
    <section>……</section>
    <section>……</section>
    <footer>
        <address>……</address>
    </footer>
</body>

非语义化HTML结构：

<body>
    <div class="header">
        <div class="nav">
            ……
        </div>
    </div>
    <div class="aside">
       <div class="nav">
            ……
        </div>
    </div>
    <div class="section">……</div>
    <div class="section">……</div>
    <div class="section">……</div>
    <div class="footer">
        <div class="address">……</div>
    </div>
</body>

分析

  • 在这个语义化HTML结构中，使用了诸如<header>、<section>、<aside>等语义化标签，这有助于构建清晰的内容层次结构，让整篇文章更加易读，更加知道那部分的内容属于哪里，是什么。

  • 在HTML语义化，将结构与样式分离，这样使得页面更加易于维护和修改，也可以提高网页访问量，使得屏幕阅读器和搜索引擎更容易理解页面内容。

  • 像<header>、<main>、<footer>这样的标签，通常是按照文章的逻辑顺序进行编排，整体层次结构更加清晰。让人更加快速定位文章的头部标题，网页主体内容和尾部。

  • 而非语义化结构中使用了大量的<div>元素，但并未明确表示它们的作用。这样做虽然可以实现相同的外观效果，但给浏览器和搜索引擎带来了解页面内容的难度，也降低了可访问性

总结

合理地使用HTML语义化标签，对于我们开发者而言，可以让网页结构更加清晰、内容更加易读、网页的访问量也比较可观，增强SEO优化，提高搜索引擎的识别度，从而为用户带来更好的体验。

avatar
文章
阅读
粉丝