meo*_*meo 6 html5 semantic-markup
每当我创建一个HTML5页面时,我都会在哪里放置主页面标题.每个人都接缝处理这个问题......
情况如下:
假设我有一个名为"Meo's frontend adventures"的网站.在这个网站上有一个名为"Abracadabra Semantics"的页面,其副标题并不重要,例如"lorem ipsum delor"
网站顶部还有一个导航,一个页脚和一些内容.
在HTML 4.0中我会这样做:
- div.header
+ div.nav
+ a.siteName: "Meo's frontend adventures"
- div.contents
+ h1.pageTitle: "Abracadabra Semantics"
+ strong.lead: "lorem ipsum delor"
- div.cn
+ h2
+ p
+ etc..
+ div.footer
+ul.footerNav
现在,在HTML5中基本上每个结构元素都有一个H1.我应该在哪里放置实际页面的标题？
我会这样:
- header
+ h1.siteName: "Meo's frontend adventures"
+ nav
- section.contents
- header
-hgroup
+ h1: "Abracadabra Semantics"
+ h2: "lorem ipsum delor"
- article
- header
+h1.ArcticleTitle
+ p
+ etc..
- footer
+ nav
我不确定将实际页面的标题放在主要部分中是否正确,或者它是否应该在文档的标题中.我刚从旧的HTML4思维中做到这一点.
将它放在文档的标题中对我来说更合乎逻辑,因为这个页面是关于这个主题的.但在我发现的每个例子中,页面标题都在主要部分,网站标题在标题中.
在HTML 4中,很容易决定:h1=主题标题.但在HTML5中对我来说并不是那么清楚.
Google或屏幕阅读器如何确定内容的标题是什么？你会用什么结构？
有趣的问题,我将为答案提出一个反点:你如何看待这个标题？
让我们说被质疑的标题是指整个文件.在这种情况下,从语义上讲,我们会将该文本放在文档的标题中.然而,页面标题可能是另一回事.如果我们查看与内容相关的页面标题(例如,如果Abracadabra Semantics正在引导文章本身),那么它不属于页面的子项,而是属于文章或部分的子项.那么,在这种情况下,我们的HTML可能如下所示:
<!-- Head stuff here -->
<body>
<header>
<h1>Meo's frontend adventures</h1>
<h2>Lorem Ipsum Dolor Sit Amet...</h2>
<nav>
<!-- ul of navigation items -->
</nav>
</header>
<section>
<header>
<h1>Abracadabra Semantics</h1>
<h2>Lorem Ipsum Dolor Sit Amet...</h2>
<!-- optional introductory text -->
</header>
<article>
<p>Lorem Ipsum Dolor Sit Amet...</p>
</article>
<!-- Other potential related articles -->
</section>
<!-- Possible footer -->
</body>
从语义上讲,我们在层次结构中组织页面 - 上面的标记告诉我们这个标题(或任何类型的子标记)属于什么.在这种情况下,我们可以有两个标题元素(一个提供对网站的介绍,另一个提供对该节的介绍).
但是,并非所有人都以相同的方式查看这组语义.例如,他们可以将单个页面视为相关部分,因此他们可以在页眉中包含其页面标题.或者,他们的部分可能是他们的主导元素,并且标题是该部分的第一个孩子.这是关于您对内容的估计的观点.屏幕阅读器将根据您布置文档的顺序组织网站; 然而,并非所有人都会以同样的方式做到这一点.HTML4迫使屏幕阅读器的一些开发人员考虑CSS定位,但HTML5试图通过放置更多的语义元素来重新组织您的网站来纠正这个问题.
无论如何,既然你已经被告知你可以做什么,以及它是如何运作的,你可以做出自己的决定.考虑一下如何理解与周围内容相关的内容,并进行相应的组织.
为了进一步帮助您,请查看规范:http://www.w3.org/TR/html-markup/header.html
| 归档时间： |
|
| 查看次数： |
1086 次 |
| 最近记录： |