HTML验证报错：p/div标签内自定义resort元素不被允许的解决

问题根源 #

你使用的自定义<resort>元素在HTML规范中默认被归类为流内容，但：

• <p>标签的内容模型仅允许短语内容（行内级元素，如<span>、<em>等）
• 未明确声明类型的自定义元素，部分HTML验证器会判定其不符合<div>的内容预期，从而触发报错

最优解决方案：用原生行内元素+类名替代自定义标签 #

直接使用HTML原生的<span>元素配合类名实现样式需求，完全符合HTML规范，兼容性和验证通过率拉满。

修改后的CSS代码

header {
  background-image: url(sunset.jpg);
  background-position: right;
  background-repeat: no-repeat;
  line-height: 400%;
  text-indent: 1em;
}

body { 
  font-family: Arial, Helvetica, sans-serif;
  background-color: #FFFFFF;
  color: #555555;
}

h1 {
  background-color: #002171;
  color: #FFFFFF;
  margin-bottom: 0;
}

h2 {
  color: #1976D2;
}

nav {
  font-weight: bold;
  text-decoration: none;
  background-color: #BBDEFB;
}

dt {
  color: #002171;
}

footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: left;
  font-style: italic;
}

/* 修改为类选择器，同时适配p内和独立的resort文本 */
.resort {
  color:#1976D2;
  font-weight: bold;
}

main {

}

contact {

}

修改后的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pacific Trails Resort</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="pacific.css">
</head>

<header>
  <h1>Pacific Trails Resort</h1>
</header>
    
<nav>
  <strong><a href="index.html">Home</a> &nbsp; <a href="yurts.html">Yurts</a> &nbsp; <a href="activities.html">Activities</a> &nbsp; <a href="reservations.html">reservations</a></strong>
</nav>
<div>
  <!--Large image goes here-->
</div>
    
<main>
  <h2>Enjoy Nature in Luxury</h2>
  <p> <span class="resort">Pacific trails resort</span> offers a special lodging experience on the California North<br>
  Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails<br>
  Resort includes a sumptuously appointed private yurt and a cooked-to-order<br>
  breakfast each morning.</p>
  <ul>
    <li>Unwind in the heated ourdoor pool and wirlpool</li>
    <li>Explore the coast on your own or join our guided rours</li>
    <li>Relax in our lodge while enjoying complimentary apetiezers and beverages</li>
    <li>Savor nightlyfine dining with on ocial view</li>
  </ul>
  <div>
    <span class="resort">Pacific Trails resort,</span> <br>
    12010 Pacific Trails Road<br>
    Zephyr, CA 95555<br>
    <br>
    888-555-5555<br>
    <br>
  </div>
</main>
<footer>
  <small>copyright ©2020 Pacific Trails Resory<br>
  <a href="mailto:mw24396@georgiasouthern.edu">mw24396@georgiasoutehrn.edu</a></small>
</footer>

</html>

补充方案：注册自定义为行内元素（需JS） #

如果你坚持要使用自定义标签，可以通过JavaScript将<resort>注册为行内级自定义元素，让HTML验证器认可它属于短语内容：

// 在HTML的<head>或<body>末尾添加这段代码
class ResortElement extends HTMLElement {}
customElements.define('resort-element', ResortElement, { extends: 'span' });

然后HTML里的标签改为<span is="resort-element">，CSS选择器对应调整为span[is="resort-element"]。不过这种方式需要额外JS支持，不如第一种方法简洁。

内容的提问来源于stack exchange，提问作者Mr. Hollywood