如何让 HTML 代码更干净更详细？答案

【问题标题】：How to turn HTML code cleaner and more detailed?如何让 HTML 代码更干净更详细？
【发布时间】：2022-08-13 23:01:10
【问题描述】：

我有这个 HTML 代码，我试图通过遵循语义 html 元素的原则来编写它。我不完全确定 HTML

语义正在传达您的内容的含义。如果我们不知道它的含义，我们就不能提出更多的语义元素。通常，所应用的 CSS 类会给出含义的概念，例如，如果文本的格式比其他文本大，它可能应该是标题。可以分享一下视觉效果图吗？
否则aria-labelledby中引用的ID是否存在？为什么<p> 是空的，这看起来像是滥用元素来保留一些空间。这正是语义的意义所在：不要使用带有意义的元素、一段文本来获得视觉效果。周围还有其他<hX> 吗？他们遵循正确的顺序吗？ <h3> 与图像接近，如果与图像相关？如果是，您需要将两者关联起来，例如在 <figure> 和 <figcaption> 中。
你能清理你的标签吗？我不相信你正在使用语义 UI 框架，你？而且我相信剃须刀的使用与您的问题无关
@Andy 我清理了 <p> 标签。
这是一个错误还是您的问题的一部分？那么你不应该把它从你的问题中删除。滥用<p> 以获得视觉效果将是该问题的答案。另外，我很确定<h3> 不是标题，是吗？我们需要更多的上下文来回答这个问题

标签： html dom

【解决方案1】：

正如马修所说，您的代码在语义上很好，但您仍然可以进行一些更改以使其更具语义，因为您的页面上只有这些代码，您可以使用 h1 而不是 h3 并将第一个 div 替换为 section，第二个 div 为文章，这里是更新的代码：

<section class="padTop EnvironmentComponent" id="x55">
    <article class="environmentDiv Green">        
        <div class="col-sm-6 col-md-6">           
            <div class="left">
                <svg class="svg-inline--fa fa-map" aria-labelledby="svg-inline--fa-title-ChPQbKTpSuca" data-prefix="fas" data-icon="map" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="" aria-hidden="true" focusable="false"><path fill="currentColor" d="M384 476.1L192 421.2V35.93L384 90.79V476.1zM416 88.37L543.1 37.53C558.9 31.23 576 42.84 576 59.82V394.6C576 404.4 570 413.2 560.9 416.9L416 474.8V88.37zM15.09 95.13L160 37.17V423.6L32.91 474.5C17.15 480.8 0 469.2 0 452.2V117.4C0 107.6 5.975 98.78 15.09 95.13V95.13z"></path></svg><!-- <i title="Environment Icon" class="fas fa-trash"></i> -->
                <h1>Our Planet is Huge</h1>
            </div>         
            <div class="right">
                <p style="text-align: center; margin-bottom: 1.5em;">Earth, our home planet, is a world unlike any other. The third planet from the sun, Earth is the only place in the known universe confirmed to host life. With a radius of 3,959 miles, Earth is the fifth largest planet in our solar system, and it's the only one known for sure to have liquid water on its surface.</p>
            </div>
        </div>
    </article>
</section>

【讨论】：

【解决方案2】：

如果你愿意，我建议让你的类名更简洁和“不那么分散”；例如，class="logo-image"、class="svg-map" 和 class="text-description"——类似的东西。这样，当您稍后回顾它时，您会更容易记住它（字面意思！）。我不确定为什么有<div class="environmentDiv Green">；我会删除它，因为它没有做任何事情。此外，最好通过https://validator.w3.org/ 的 W3C Validator 运行您的代码。它发现了一个错误：

错误：aria-labelledby 属性必须指向相同的文件。

您可能应该使用<h1> 而不是直接跳转到<h3>。此外，您的 <p> 标签是空的。尝试改用<div> 或<span>。为了以后的参考，尽量避免<br>，如果可能的话，使用CSS来换行。在您添加 style="text-align: center; 的地方，我会将其放在单独的 CSS 文档中，而不是内联 CSS。

【讨论】：