Defining inner section on HTML5 markup

本小妞迷上赌 提交于 2020-01-07 03:06:13

问题


A question about HTML5 markup. Which is correct?

<header class="wrapper">
    <div class="wrapper-inner">
    </div>
</header>

-OR-

<div class="wrapper">
    <header class="wrapper-inner">
    </header>
</div>

.wrapper { width: 100%; }
.wrapper-inner { width: 980px; margin: 0 auto; }

回答1:


Either is correct.

If you want to use as a sectioning element for the page, then, you likely want:

<header class="page-header">
    <div class="page-header-subsection">
    </div>
</header>

If you want to use as a sectioning element for a sub-section of the page, then, you likely want:

<section class="author-biography">
    <header class="author-name-and-thumbnail">
    </header>
</section>



回答2:


Leaving attributes (like lang) aside, you can ignore div and span elements, as they are meaningless. So (apart from the different classes) your examples are semantically equivalent.

Assuming that the .wrapper element won’t contain anything else than the .wrapper-inner element, it’s up to you which one to use for which.

A possible benefit of using <header><div></div></header> over <div><header></header></div> could be that it might be easier for markup authors to spot the header in the document, as authors wouldn’t have to "enter" the div element to check what it contains and what it’s used for.



来源:https://stackoverflow.com/questions/33788638/defining-inner-section-on-html5-markup

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!