如何在HTML5中正确标记网站的标题?通常我用以下标记网站的名称:
<h1>
<a href=#>Website Name</a>
</h1>
Run Code Online (Sandbox Code Playgroud)
最近我遇到了HTML5文档概述算法.我还读到,似乎在h1标签中标记您的网站名称没有意义,因为除了网站名称之外,每个页面可能都有不同的主标题(h1).
如果让我们在Facebook上说,如果Facebook的标识/标题的<h1>标记包含在标签中,该怎么办?然后,如果每个帖子都包含在<article>标签中.例如:
<article class="post">
<h5 class="post-header">
<a href="#">Someone has shared Blah Blah's photo</a>
</h5>
<div class="post-body">...</div>
</article>
Run Code Online (Sandbox Code Playgroud)
我认为文件大纲是
Facebook的
1.1有人分享了Blah Blah的照片
1.2其他职位
1.3其他职位
这样可以吗?
特别是因为轮廓使用是有意义的h1.
如果您的网页是网站的一部分,则每个网页都应有一个网站标题h1,其中包含网站标题,网站徽标或两者.这个站点标题不是分段元素(section/ article/ aside/ nav)的子元素,这一点很重要.
因此页面的顶级标题将始终是站点标题.并且网站导航,页面的主要内容,带有辅助内容的侧边栏等都将是该顶级标题的"孩子".
因此,博客帖子页面的简单结构可能是:
<body>
<h1><img src="logo.png" alt="John's blog"></h1>
<nav><!-- the site-wide navigation --></nav>
<article>
<h1>My first blog post</h1>
<p>…</p>
<footer><!-- this footer applies to the article only--></footer>
</article>
<footer><!-- this footer applies to the whole page (? the site)--></footer>
</body>
Run Code Online (Sandbox Code Playgroud)
这将创建一个如下轮廓:
1 John's blog (? body>h1)
1.1 untitled (? body>nav)
1.2 My first blog post (? body>article>h1)
Run Code Online (Sandbox Code Playgroud)
如果您不使用网站标题/徽标h1,页面将有一个无标题的顶级大纲条目:
1 untitled (? body)
1.1 untitled (? body>nav)
1.2 My first blog post (? body>article>h1)
Run Code Online (Sandbox Code Playgroud)
如果您不使用a h1作为网站标题/徽标,并且没有用于主要内容的切片元素......
<body>
<img src="logo.png" alt="John's blog"> <!-- omitted h1 -->
<nav><!-- the site-wide navigation --></nav>
<!-- omitted article -->
<h1>My first blog post</h1>
<p>…</p>
</body>
Run Code Online (Sandbox Code Playgroud)
...你会得到一个包含两个顶级条目的大纲:
1 untitled (? body)
1.1 untitled (? body>nav)
2 My first blog post (? body>h1)
Run Code Online (Sandbox Code Playgroud)
我把它放在一个header元素中:
标头元素通常旨在包含节的标题(h1-h6元素或hgroup元素),但这不是必需的。标头元素还可以用于包装部分的目录,搜索表单或任何相关徽标。
像这样:
<header>
<a href="/"><img src="..." alt="Foo Company Home"></a>
</header>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
7217 次 |
| 最近记录: |