HTML5元素和HTML结构化/分段 [英] HTML5 Elements and HTML Structuring/Sectioning
问题描述
我使用HTML已有很长时间了，但是从未深入研究新的HTML5元素和HTML结构/部分.我已经对MDN和w3s进行了一些阅读，但是仍然很困惑.下面是布局，正文部分的文档结构以及我所遇到的一些问题的图像.
I have been using HTML for ages, but had never looked too deep into the new HTML5 elements and HTML structuring/sectioning. I have done some reading on MDN and w3s, but am still quite confused. Below is an image of the layout, the document structure of the body section, and some question that I have.
<body>
<header id='header'>
<h1 id='header-left'>
<img id='logo' />
</h1>
<div id='header-right'>
<nav id='nav-links-cont'>
<a class='nav-links' href='' alt=''>FILTER</a>
<a class='nav-links' href='' alt=''>SELL</a>
<a class='nav-links' href='' alt=''>FEEDBACK</a>
</nav>
</div>
</header>
<main id='content'>
<div id='content-left'>
<aside id='search-and-filter-pane'></aside>
<article id='product-info-pane'></article>
<aside id='transaction-pane'></aside>
</div>
<section id='content-right'>
<article class='grid-item'>
<h4 class='row item-transaction'></h4>
<div class='row item-image'></div>
<h1 class='row item-product'></h1>
<h2 class='row item-brand'></h2>
<h3 class='row item-model'></h3>
</article>
<article class='grid-item'>
<div class='row item-transaction'></div>
<div class='row item-image'></div>
<div class='row item-product'></div>
<div class='row item-brand'></div>
<div class='row item-model'></div>
</article>
</section>
</main>
</body>
-
content-left和content-right应该是section元素，甚至是h3和h4元素而不是div元素?还是content-left和content-right分别是aside和section元素?
Should
content-leftandcontent-rightinstead besectionelements or evenh3andh4elements rather thandivelements? Or shouldcontent-leftandcontent-rightbeasideandsectionelements respectively?
可以像content-right article:first-child元素那样以无序方式使用h1到h4元素吗?
Is it okay to use h1 thru h4 elements in an unordered fashion like in the content-right article:first-child element?
我知道您应该避免使用多个h1标签，但是在MDN上的某个地方读到它在不同部分中可以接受吗?那么可以在article元素中重用h1至h4吗?
I know you're supposed to avoid using more than one h1 tag, but read somewhere on MDN that it is acceptable in different sections? So is it okay to reuse h1 thru h4 in article elements?
我在content-left中使用aside元素正确吗? content-left aside元素应该改为section元素吗?
Is my use of aside elements in content-left correct? Should the content-left aside elements be section elements instead?
推荐答案
老实说:有几件事我会做不同的事情……
To be honest: there are a couple of things I would do differently...
关于您的问题:
- content-left和content-right应该是section元素，还是h3和h4元素而不是div元素?还是应该分别将content-left和content-right放在一边和section元素?
div元素只允许流内容，而h *元素只允许短语内容.这只是为什么它们不应该是h *元素的原因之一.
A div-element allows for flow-content and the h*-elements allow for phrasing-content only. This is only one reason why they should not be h*-elements.
您提到content-left包含有关所选产品的重要信息.对我而言，将关键的相关信息放在一边的说法对我来说是没有意义的.
You mentioned that content-left contains crucial information about the selected product. It does not make sense to me to cover crucial related information in an aside-element.
- 可以像无内容版权的article:first-child元素那样以无序方式使用h1到h4元素吗?
不.您可以这样做，但我不会称之为好".
No. You can do that, but I would not call it "okay".
- 我知道您应该避免使用多个h1标签，但要在MDN上阅读某个地方的不同部分可以接受的标签?
什么?在单个页面中使用多个h1元素可能是很有意义的.
What? It might make perfect sense to use several h1-elements in a single page.
- 那么可以在文章元素中重用h1到h4吗?
从语义上讲，不能在错误的嵌套级别上重用h *元素. IE.在最高级别使用h1元素(一个或多个)，在h1以下的级别使用h2元素，依此类推...
It is semantically not okay to reuse h*-elements on the wrong level of nesting. I.e. use h1-elements (one or several) on the highest level, h2-elements on the level below h1, and so on...
- 我在content-left中使用aside元素正确吗?应该将content-left aside元素改为section元素吗?
事务窗格对于该页面似乎至关重要.我看不出有任何理由将其放在一边.
Transaction-pane seems to be crucial for the page. I can't see any reason to put it in an aside-element.
通常来说:h *-，section，aside，nav和article元素分别用于文档. (几乎)每个人都在虚拟目录"中创建一行.您建议使用h *元素的方式似乎并不表示预期的用法.在深入探讨分节和文章元素之前:您是否关心HTML树的目录?您希望该目录如何显示?
Generally speaking: h*-, section, aside, nav and article elements section the document. (Almost) each of them create a line in a virtual "table of content". The way you suggest using h*-elements does not seem to indicate intended usage. Before we dive into section- and article-elements: Do you care about a table of content for your html-tree? How do you want that table of content to look like?
这篇关于HTML5元素和HTML结构化/分段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
