我是 HTML 和一般编程的新手,我想确保我的代码井井有条,并且我在进行过程中使用了最佳实践。
所以,我制作了这个示例布局,我想将其转换为 HTML5: https://postimg.org/image/je10syxhz/
这是我创建的 HTML5 代码:
<!-- Solutions Section -->
<section id="Solutions">
<header>
<h1>Title</h1>
<h2>Subhead</h2>
</header>
<!-- Items -->
<section>
<article class="Solutions_items">
<!-- Should I have a <header> inside each article? -->
<h1>Item 1</h1>
<p>Lorem ipsum...</p>
</article>
<article class="Solutions_items">
<h1>Item 2</h1>
<p>Lorem ipsum...</p>
</article>
<article class="Solutions_items">
<h1>Item 3</h1>
<p>Lorem ipsum...</p>
</article>
</section>
</section>
现在回答问题:
使用 div
而不是 sections
或 articles
有区别吗?我的意思是,不仅在组织领域,而且在优化领域?现在是否有关于这个特定主题的一般最佳实践惯例?因为我觉得使用 sections
和 articles
可以让代码更容易阅读(也可以让 CSS 文件更干净)。
谢谢! :)
最佳答案
- div 与部分
如果页面部分内的内容在主题上相似,则使用部分,div 的内容不需要主题相似性,div 的目的是样式而不是内容相似
更多详情 -> What is the difference between <section> and <div>?
div 与文章
article 表示“联合”内容,例如“论坛帖子、杂志或报纸文章、博客文章”。
更多详情 -> Section, Article, or Div? and Smaller text in a section and article tag?
- 标题标签允许“语义组织”,如果一页上有很多可变内容,最好用标题标签来组织部分
更多详情 -> http://html5doctor.com/the-header-element/
- 如果要在部分之间添加 br 标记以指示页面的新结构区域,则允许在 html 中添加 br,但是,对于纯粹基于样式的目标,请使用样式表
更多详情 -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
- 嵌套部分标签是可以的,但请记住正确使用部分标签(主题相似性),不建议出于样式目的嵌套部分,使用 div
更多详情 -> Nesting HTML5 section tags
此外,我每页只有一个 h1,这与保持 html 组织一致
关于css - 如何组织 HTML5 结构以获得更好的实践和更好的代码可读性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38427488/