正确使用HTML语义元素



我想知道什么是最好的"或者是在HTML中使用语义元素的最常见方式。我知道它们是什么,它们的作用是什么,但是我应该这样使用它们吗?

<section>
<div class="info">
...

或者像这样:

<section class="info">
...

用一个或另一个是错的吗?实际上都是"有效的"。

?另一个例子是header元素:
<body>
<header>
<div class="logo">
...

还是直接从

开始?
<body>
<header class="logo">
...

对于高级开发人员来说,这个问题可能听起来很奇怪,但对于初学者来说,它可能并不明显,我也没有真正找到一个明确的答案。

我个人使用"长"当我开始看别人的代码时,我开始质疑自己。

都可以。但是如果我要读别人的代码,我更喜欢这样的代码。

<body>
<header class="logo">

读取第二个代码,

<section>
<div class="info">
...

您需要仔细扫描类名,从样板文件中挑选出来。一旦深入到标记的一些层次,跟踪哪个结束标记与哪个<div…>开放标签

都可以。这是个人喜好。

技术方面,它将在两个嵌套元素之间添加一些填充。

我更喜欢第一个,因为它看起来更有条理,但老实说,这只是我的偏好。

<section>
<div class="info">
<h1>Information</h1>
</div>
</section>

都是有效的。当使用语义HTML时,标签应该能够为正在发生的事情提供一些上下文。我喜欢这样组织我的页面:

<section class=blogPost>
<!-- section acts as a container for content -->
<h1>Introduction to HTML</h1>
<p> blah blah blah blah </p>
<!-- h1 and p are the actual content -->
</section>

您可以为HTML文件中的每个标记使用类,通过使用微格式来增加语义,尽管语义标记通常只是意味着您尝试使用特定的标记而不是未指定的标记,如div或span。我想说的是,如果可能的话,你应该尽量限制使用的标签数量,因为添加一个div标签只是为了给它一个类,最终会让你更加困惑,特别是如果你可以直接把你的内容放在你的header或section标签中。

最新更新