css - 冲突的布局会阻止语义 html

Question

如果相同数据有两种布局，我应该尝试找到一种适合两种布局的语义布局，还是只选择一种语义布局而另一种仅风格布局？任何想法都将不胜感激，因为目前我什么都不做。

我正在尝试将一些神圣的文本放到网上，并能够以各种方式设置它们的样式。主要有两种风格:段落形式和诗歌形式。诗歌形式很容易。段落形式让我很头疼，因为它与诗歌形式冲突，而且似乎与它本身冲突。在段落形式中，诗节编号和章节编号可以打开和关闭，因此在两种形式之间进行选择时加载新页面并不理想。前往 non-semantic route简单。修复它虽然让我感到困惑。如果可能，我想将其保留为有效的 HTML。

这是我目前所拥有的:

<article>
  <h2>Book</h2>
  <div>
    <h3>Chapter 1</h3>

    <span class="verse-num">1 </span>Lorem ipsum dolor sit amet, duo ei 
    aliquam tincidunt, ut eos electram elaboraret, no nec falli omnesque. 
    <span class="verse-num">2 </span>Eu cum nisl alia aeterno. Mediocrem
    eloquentiam ad mel, no idque moderatius mei, sed legere inciderint 
    no. Et nec brute essent sententiae.
  </div>

  <div>
    <span class="verse-num">3 </span>Sea ea omnes explicari repudiare, et
    eam graeco alterum eruditi, vim consulatu referrentur ad. Id eros
    nostrud mei, nibh adipisci has eu. Ei pri ipsum primis accommodare.
    <span class="verse-num">4 </span>Ignota copiosae theophrastus ne qui,
    te suas essent molestiae nam. Tacimates patrioque quo ad.
  </div>

  <div>
    <span class="verse-num">5 </span>Nusquam appareat comprehensam has in.
    Qui melius labitur persequeris cu, no brute elitr libris eum.
    <h3>Chapter 2</h3>

    <span class="verse-num">1 </span>Voluptaria reformidans at sed, mollis
    ullamcorper sea id. Usu cu oblique voluptaria definitiones, dicant
    corpora iudicabit his an.
  </div>

  <div>
    <span class="verse-num">2 </span>Cum at illum facete corrumpit, aeque
    repudiare ad vim, cu has inimicus iudicabit. Qui eu interesset
    eloquentiam. Est ei nisl atqui, amet intellegat ea per. Integre
    adolescens id has, adhuc tibique corrumpit ut quo. Facer
    assum singulis eu per, et mea vulputate necessitatibus. 
    <span class="verse-num">3 </span>Ut ius facer tamquam erroribus, duo ei
    atqui dicunt liberavisse.
  </div>

  <div>
    Quo mundi offendit adolescens ut, nisl illum vis an. Ne vis luptatum 
    legendos, docendi vulputate omittantur usu eu. At mea luptatum 
    iracundia, ridens laoreet contentiones an pro, eu diam partem inciderint 
    mea. <span class="verse-num">4 </span>Veri sanctus mel te, no vero 
    etiam iudicabit vis, cu dicat explicari reformidans vix.
  </div>

  <div>
    <h3>Chapter 3</h3>

    <span class="verse-num">1 </span>Pri homero comprehensam ex, ad nemore 
    suscipit appetere mel. Ex simul albucius vel. No est hinc graeco 
    nominavi. <span class="verse-num">2 </span>Erat fabulas ex qui. Eu vis 
    nonumy omnium scaevola, audiam elaboraret eos in.
  </div>
</article>

我想摆脱 div，但不知道如何制作它们。如果可能的话，我想将其保留为有效的 HTML。我不能使用 p 标签，因为有时 h3 标签包含在一个标签中。我不能使用部分，因为并非所有部分都有 h3 标签。

我愿意完全重做 HTML(和 css)，但我想避免使用 JavaScript，因为我认为它不适合。任何想法将不胜感激。

为清楚起见:我应该忽略语义(使用我拥有的)，尝试使其中一个语义化而忽略另一个，还是使它们都在语义上有效？如果是后两者中的任何一个，如何？

/* Paragraph Mode styling = makes a div act like a <p> tag */
div {
  -webkit-margin-before: 1rem;
  -webkit-margin-after: 1rem;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -moz-margin-start: 0px;
  -moz-margin-end: 0px;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

/* simple toggle styling */
label {
  text-decoration: underline;
}
input[type=checkbox]:checked + label {
  color: blue;
}

/* chapter styling */
input[type=checkbox]#verses:not(:checked) ~ article h3 {
  display: inline;
  font-size: 1rem;
  font-weight: normal;
}
input[type=checkbox]#verses:not(:checked) ~ article h3:before {
  content: "[";
}
input[type=checkbox]#verses:not(:checked) ~ article h3:after {
  content: "]";
}

/* main toggle changes - makes things disappear */
input[type=checkbox]#verses:checked ~ #super-label,
input[type=checkbox]#verses:checked ~ #super,
input[type=checkbox]#verses:checked ~ #chapters-label,
input[type=checkbox]#verses:checked ~ #chapters,
input[type=checkbox]#chapters:not(:checked) ~ article h3,
span.verse-num {
  display: none;
}

/* more chapter styling - not grouped above due to precedence issues that I'm to lazy to fix at the moment */
input[type=checkbox]#verses:checked ~ article h3 {
  display: block;
  margin-bottom: 0;
}

/* Verse Mode styling - make spans simulate <p> tags */
input[type=checkbox]#verses:checked ~ article span.verse-num:before {
  content: '\A';
 white-space: pre;
  display: block;
}
input[type=checkbox]#verses:checked ~ article span.verse-num:after {
  content: '';
  display: inline-block;
  width: .5rem;
}

/* Paragraph Mode styling  - not grouped above due to precedence issues that I'm to lazy to fix at the moment */
input[type=checkbox]#verses:checked ~ article div,
input[type=checkbox]#verses:checked ~ article span.verse-num,
input[type=checkbox]#super:checked ~ article span.verse-num {
  display: inline;
}
input[type=checkbox]#super:checked ~ article span.verse-num {
  font-size: .83rem;
  vertical-align: super;
}

/* Verse Mode styling  - not grouped above due to precedence issues that I'm to lazy to fix at the moment */
input[type=checkbox]#verses:checked ~ article span.verse-num {
  font-size: 1rem;
  vertical-align: baseline;
}

<input type="checkbox" id="verses">
<label for="verses">Toggle Verses</label>
<input type="checkbox" id="chapters">
<label for="chapters" id="chapters-label">Toggle Chapters</label>
<input type="checkbox" id="super">
<label for="super" id="super-label">Verse numbers as superscript</label>
<article>
  <h2>Book</h2>
  <div>
    <h3>Chapter 1</h3>

    <span class="verse-num">1 </span>Lorem ipsum dolor sit amet, duo ei aliquam tincidunt, ut eos electram elaboraret, no nec falli omnesque. <span class="verse-num">2 </span>Eu cum nisl alia aeterno. Mediocrem eloquentiam ad mel, no idque moderatius mei,
    sed legere inciderint no. Et nec brute essent sententiae.</div>

  <div><span class="verse-num">3 </span>Sea ea omnes explicari repudiare, et eam graeco alterum eruditi, vim consulatu referrentur ad. Id eros nostrud mei, nibh adipisci has eu. Ei pri ipsum primis accommodare. <span class="verse-num">4 </span>Ignota copiosae
    theophrastus ne qui, te suas essent molestiae nam. Tacimates patrioque quo ad.</div>

  <div><span class="verse-num">5 </span>Nusquam appareat comprehensam has in. Qui melius labitur persequeris cu, no brute elitr libris eum.
    <h3>Chapter 2</h3>

    <span class="verse-num">1 </span>Voluptaria reformidans at sed, mollis ullamcorper sea id. Usu cu oblique voluptaria definitiones, dicant corpora iudicabit his an.</div>

  <div><span class="verse-num">2 </span>Cum at illum facete corrumpit, aeque repudiare ad vim, cu has inimicus iudicabit. Qui eu interesset eloquentiam. Est ei nisl atqui, amet intellegat ea per. Integre adolescens id has, adhuc tibique corrumpit ut quo. Facer
    assum singulis eu per, et mea vulputate necessitatibus. <span class="verse-num">3 </span>Ut ius facer tamquam erroribus, duo ei atqui dicunt liberavisse.</div>

  <div>Quo mundi offendit adolescens ut, nisl illum vis an. Ne vis luptatum legendos, docendi vulputate omittantur usu eu. At mea luptatum iracundia, ridens laoreet contentiones an pro, eu diam partem inciderint mea. <span class="verse-num">4 </span>Veri sanctus
    mel te, no vero etiam iudicabit vis, cu dicat explicari reformidans vix.</div>

  <div>
    <h3>Chapter 3</h3>

    <span class="verse-num">1 </span>Pri homero comprehensam ex, ad nemore suscipit appetere mel. Ex simul albucius vel. No est hinc graeco nominavi. <span class="verse-num">2 </span>Erat fabulas ex qui. Eu vis nonumy omnium scaevola, audiam elaboraret
    eos in.
  </div>
</article>

Answer 1

将您的非语义片段传递给 W3 HTML Validator显示它是有效的 HTML，除了缺少 title标签，这不是你做的。

至于语义有效性，这是一个真正基于观点的问题，但我会尝试解释我观点背后的原因。

我什至从来没有真正开始为语义烦恼，因为有太多的事情只能通过一些丑陋的解决方法来实现，其中大部分都以某种方式涉及滥用表格(例如，让一个元素填充它所在的任何父元素，或在 div 中垂直居中多行文本)。
我通常会尝试构建我的 HTML，这样才有意义，但对于某些位而言，这通常是不可能的。
对于某些东西，根本没有概念，比如可拖动的 block 。例如，如果您单击 SO 上的帖子下的“标记”链接，您会看到一个弹出窗口。该弹出窗口是 div ，至少在撰写本文时是这样。
现在，是div正确的元素？关于W3 documentation ，“定义&用法”中有两行:

The <div> tag defines a division or a section in an HTML document.

据此，它应该以与<p>相同的方式使用, 但对于 <p> 的 block 元素用于文本。

The <div> tag is used to group block-elements to format them with CSS.

据此，它几乎可以在任何地方使用，只要它包含一些 block 元素。

<span> tag 也是如此, 仅适用于行内元素。

因此，如果您愿意，可以替换 div你不喜欢 span s，但这不是您想要的，对吧？

我认为对于你的例子，除了有几个预先格式化的隐藏 div 之外，你不可能让它在语义上有效，而你一次只显示一个。我认为这是不可能的，因为您正试图将相同的元素用于多种用途。一旦你有了一个流畅的文本，一旦你有了一个有序的经文列表，并且具有相同的元素？
语法上？ - 没问题。语义上？ - 没有机会。

我会随心所欲，但如果你真的想让它在语义上也有效，那么我相信你要么必须为每个显示状态创建一个隐藏的 div，并在更改选项时显示相应的 div ，或者(如 doveyg 建议的那样)以某种形式将您的文本存储在 JavaScript 中并动态创建显示的元素。