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

HTML的语义化的案例分析

HTML元素的语义化有着多个优点

1）.可读性和可维护性

使用语义化元素可以让代码更具有可读性，可以降低其他开发者观察他人代码时的难度，可以尽快理解代码的含义，提高工作的效率。

2）.可访问性

语义化的标签也可以让屏幕阅读器等辅助技术理解页面结构，提高网站的可访问性，让其更易于为残障人士使用。

3）.设备兼容性

语义化标签有助于页面在不同设备上的正常显示，包括移动设备和未来的浏览器版本

以下代码展示了一个由语义化标签构成的简单页面：

<main>
    <section id="articles">
        <article>
            <h2>主体元素</h2>
            <p>22222</p>
            <a href="#">了解更多</a>
        </article>
    </section>
    
    <aside>
        <section id="sidebar">
            <h2>侧边</h2>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </section>
    </aside>
</main>

<footer>
    <p>底部元素</p>
</footer>

第三方网站HTML结构分析

我观察了一些网站，并且使用控制台查看后如下：

他们采用的是非语义化标签，直接观看代码的时候是存在一定难度的，需要查看标签中的class属性名来更好的体现这一部分的代码是什么功能的。这样可能会影响其他开发者观看时的效率。

总结

综合对比下来可以发现，恰当的使用语义化标签可以提升网页性能和质量，可以为用户和开发人员创造更好的体验。