冲突的布局会阻止语义 html
Conflicting layouts prevents semantic html
如果同一数据有两种布局，我应该尝试找到一种适合两种布局的语义布局，还是只选择一种语义布局而另一种仅风格布局？任何想法都将不胜感激，因为目前我两者都没有做。
我正在尝试将一些神圣的文本放到网上，并能够以各种方式设置它们的样式。主要有两种风格：段落形式和诗歌形式。诗歌形式很容易。段落形式让我很头疼，因为它与诗歌形式冲突，而且似乎与它本身冲突。在段落形式中，诗节编号和章节编号可以打开和关闭，因此在两种形式之间进行选择时加载新页面并不理想。进入 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>
将您的非语义片段传递给 W3 HTML Validator 显示它是有效的 HTML，除了缺少的 title 标签，这不是您做的。
至于语义有效性，这是一个真正基于观点的问题，但我会尝试解释我观点背后的原因。
我什至从未真正开始为语义烦恼，因为有太多事情只能通过一些丑陋的解决方法来实现，其中大部分都以某种方式涉及滥用表格（例如，使元素填充它放置的任何父元素）在 div).
中或垂直居中多行文本
我通常会尝试构建我的 HTML，这样才有意义，但对于某些位来说，这通常是不可能的。
对于某些东西，根本没有概念，比如可拖动的块。例如，如果您在 SO 上单击 post 下的 "flag" link，您会看到一个弹出窗口。该弹出窗口是 div，至少在撰写本文时是这样。
现在，div 是正确的元素吗？在W3 documentation上，"definition & usage"中有两行：
The <div> tag defines a division or a section in an HTML document.
据此，它应该以与 <p> 相同的方式使用，但对于 <p> 用于文本的块元素。
The <div> tag is used to group block-elements to format them with CSS.
据此，它几乎可以在任何地方使用，只要它包含一些块元素。
<span> tag也是一样，只是内联元素。
所以如果你愿意，你可以用 span 替换你不喜欢的 div，但这不是你想要的，对吧？
我认为对于你的例子，除了有几个预先格式化的隐藏 div 之外，你不可能让它在语义上有效，而你一次只显示一个。我认为这是不可能的，因为您正试图将 相同的元素 用于 多种用途 。一旦你有了流畅的文本，一旦你有了一个有序的经文列表，并且具有相同的元素？
语法上？ - 没问题。语义上？ - 没有机会。
I would just go with what you have, but if you really want to get it semantically valid too, then I believe you either have to create one hidden div for each display state, and when options are更改后，显示相应的 div，或者（如 doveyg 建议的那样）以某种形式将文本存储在 JavaScript 中并即时创建显示的元素。
如果同一数据有两种布局，我应该尝试找到一种适合两种布局的语义布局，还是只选择一种语义布局而另一种仅风格布局？任何想法都将不胜感激，因为目前我两者都没有做。
我正在尝试将一些神圣的文本放到网上，并能够以各种方式设置它们的样式。主要有两种风格：段落形式和诗歌形式。诗歌形式很容易。段落形式让我很头疼，因为它与诗歌形式冲突，而且似乎与它本身冲突。在段落形式中，诗节编号和章节编号可以打开和关闭，因此在两种形式之间进行选择时加载新页面并不理想。进入 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>
将您的非语义片段传递给 W3 HTML Validator 显示它是有效的 HTML，除了缺少的 title 标签，这不是您做的。
至于语义有效性，这是一个真正基于观点的问题，但我会尝试解释我观点背后的原因。
我什至从未真正开始为语义烦恼，因为有太多事情只能通过一些丑陋的解决方法来实现，其中大部分都以某种方式涉及滥用表格（例如，使元素填充它放置的任何父元素）在 div).
中或垂直居中多行文本
我通常会尝试构建我的 HTML，这样才有意义，但对于某些位来说，这通常是不可能的。
对于某些东西，根本没有概念，比如可拖动的块。例如，如果您在 SO 上单击 post 下的 "flag" link，您会看到一个弹出窗口。该弹出窗口是 div，至少在撰写本文时是这样。
现在，div 是正确的元素吗？在W3 documentation上，"definition & usage"中有两行：
The
<div>tag defines a division or a section in an HTML document.
据此，它应该以与 <p> 相同的方式使用，但对于 <p> 用于文本的块元素。
The
<div>tag is used to group block-elements to format them with CSS.
据此，它几乎可以在任何地方使用，只要它包含一些块元素。
<span> tag也是一样，只是内联元素。
所以如果你愿意，你可以用 span 替换你不喜欢的 div，但这不是你想要的，对吧？
我认为对于你的例子，除了有几个预先格式化的隐藏 div 之外，你不可能让它在语义上有效，而你一次只显示一个。我认为这是不可能的，因为您正试图将 相同的元素 用于 多种用途 。一旦你有了流畅的文本，一旦你有了一个有序的经文列表，并且具有相同的元素？
语法上？ - 没问题。语义上？ - 没有机会。
I would just go with what you have, but if you really want to get it semantically valid too, then I believe you either have to create one hidden div for each display state, and when options are更改后，显示相应的 div，或者（如 doveyg 建议的那样）以某种形式将文本存储在 JavaScript 中并即时创建显示的元素。