<section>是否有必要像这里提到的那样在 HTML5 中添加标题http://blog.whatwg.org/is-not-just-a-semantic
有时在页面上我们有一些相关的元素，可以组合成一个，<section id="semantic name">但<div id="semantic name">我们没有任何标题。
里面<section>没有<h1>, <h2>,可以使用吗<h3>
可能重复:
HTML标签DIV和SPAN有什么区别？
我知道在编写HTML时,我应该记住语义,例如,h1需要是一个主头,h2需要是一个子头,表需要是表,<em>用于强调而不是<i>等等.有没有div和span之间的正确差异除了一个是块而另一个是内联的？
当我在学习的过程中,我被告知这<span>是为了设计文字中线.如果我需要在我的网页中的某个位置放置一小段文字,一个不会<p>标记标签的文字,我是否应该使用跨度？如果该文本需要覆盖两行(即,它需要一个宽度),如果它只包含文本,那该怎么办？
以他们最着名的一系列行:
哈姆雷特:成为或不成为:这是
一个问题:是否在
心中更高尚地遭受
了无耻财富的吊索和箭头,或者
采取武器对抗麻烦的海洋,
并反对结束它们？死:
睡觉; 不再; 并且睡着了,说
我们结束了心痛和一千个
自然的震撼肉体是继承人,
"这是一个圆满的虔诚的愿望
.要死,要睡觉; 睡觉:
梦见:唉,有
揉搓; 因为在那种死亡的睡眠中,
梦想可能会来临
你会如何以语义方式标记,为a)行号(例如,1.1.1),b)字符名称保留空间,c)当然是文本？
我应该使用什么元素进行JavaScript操作？
执行播放/暂停/停止/新建/打开/保存/打印/关闭等操作.
<a id="play" href="#">Play</a>
<a href="#play">Play</a>
<button id="play" tabindex="0">Play</button>
<div id="play" role="button" tabindex="0">Play</div>
我看到很多人用锚<a>用href="#",但并不觉得很语义,感觉就像锚是指向一个资源,不为,做东西的动作的超链接.然后你必须用event.preventDefault(即return false)破解它.
我很少看到人们使用该<button>元素,但它不应该被用于什么？
我一直在忙着使用CSS 制作交互式标签布局,而且有人告诉我这不是<input>标签的预期语义含义.现在,我知道HTML5比以前的HTML版本更多地关注语义,所以我想知道,对于输入语义来说,它是类似于以下内容的东西:
<label for="toggleTab" class="togglelabel">Toggle tab</label>
<input type="checkbox" id="toggleTab" class="toggleinput">
<div class="toggletab">Look at this thing hide and show</div>
CSS:
.toggletab, .togglelabel {border:1px solid #AAA;display:block;}
.toggleinput, .toggletab {display:none;}
.toggleinput:checked + .toggletab {display:block;}
(演示)
该
input元素表示类型化的数据字段中,通常用表单控件以允许用户编辑的数据.
所以对我而言,这似乎确实与输入标签应该用于什么(因为这与数据无关,而只是向用户显示某些事物).
然后当然我的后续问题是,如果确实不是根据标准应该使用什么输入标签,那么违背语义标准是不是很糟糕？
简而言之,HTML5规范允许我们使用多个h1元素.然而,关于这一特征存在相当大的争议,有2个主要声明为什么不使用它.
1.搜索引擎优化:主要是可疑的声称,搜索机器人不支持它,未经证实的声称它将"混淆"他们.但是,让我们将这种推测推迟到其他帖子.
2.用户代理不支持它:不幸的是,这背后的推理似乎不如SEO声明.
HTML5文档的章节和大纲的MDN文章包含以下警告:
重要提示:目前在图形浏览器或辅助技术用户代理中没有已知的轮廓算法实现,尽管该算法是在其他软件中实现的,例如一致性检查器.因此,不能依赖轮廓算法将文档结构传达给用户.建议作者使用标题等级(h1-h6)来传达文件结构.
但它不像使用新文档大纲结构的文档不起作用.为了亲自了解浏览器的反应,我创建了一些样本,这些样本可以在同一页面上使用多个独立文章.
HTML4:
<!DOCTYPE html>
<html>
<head>
<title>Outline HTML4</title>
</head>
<body>
<div>
<h1>Section List</h1>
<div>
<h2>Alpha</h2>
<p>Alpha is the first letter of the greek alphabet.</p>
<h3>Subheading</h3>
<p>This is just filler.</p>
</div>
<div>
<h2>Beta</h2>
<p>Beta is the second letter of the greek alphabet.</p>
<h3>Subheading</h3>
<p>This is just filler.</p>
</div>
</div>
</body>
</html>HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Outline HTML5</title>
</head>
<body>
<main>
<h1>Section List</h1>
<section>
<h1>Alpha</h1>
<p>Alpha is the first letter of …我最近开始使用<template>我之后使用模板库处理的HTML标记,例如
<template id="tmpl">
<div class="something">
<a href="/pages/{{link}}">{{title}}</a>
</div>
</template>
...
<script>
var output = Mustache.render($('#tmpl').html(), {
link: 'abc',
title: 'abc'
});
</script>
但是,我已经意识到这意味着我的HTML中有一个断开的链接(example.com/pages/{{link}}).这是一个问题,因为各种抓取工具可能会认为它无效(实际上,Google Search Console会将我的主页报告为链接断开).
使用<template>这种方式有效吗？
把它放在类似的东西<script type="text/template">(如handlebars.js网站上看到的)更好吗？
我目前正在清理我的个人博客，我正在努力使 HTML 正确遵守 HTML 标准。博客结构很简单。我有一个链接到博客文章的主页和每个博客文章的页面。
对于博客文章页面。我不确定是否应该使用<main>or<article>标签来包装所有内容。
我要么用
<html>
<body>
{ heading, navigation, etc. }
<main>
<h1>{title}</h1>
<time datetime="{publish date}">{human readable publish date}</time>
{content}
</main>
</body>
</html>
或者
<html>
<body>
{ heading, navigation, etc. }
<article>
<h1>{title}</h1>
<time datetime="{publish date}">{human readable publish date}</time>
{content}
</article>
</body>
</html>
如果我读的HTML规范的<article>正确使用<main>似乎是更好的选择，因为<article>是为了分离HTML文档的独立自足的部分，而<main>意在表示在文档的文档或肉的主要部分。
我犹豫的原因是因为<article>与<time>元素一起使用以允许我指定帖子的发布时间。
来自 MDN（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article）：
元素的发布日期和时间可以使用元素的 datetime 属性来描述。请注意， 的 pubdate 属性不再是 W3C HTML 5 标准的一部分。
我想创建一种标准方法来提供带有 alt 标签的图像，以实现可访问性和 SEO、描述性标题以及摄影师信用的单独元素。似乎每个元素只<figcaption>允许有一个<figure>，并且它必须是第一个或最后一个元素，因此排除了这样做：
<figure>
<img src="https://placedog.net/500/280" alt="a handsome pooch stares at the camera">
<figcaption class="caption">George, the doggo</figcaption>
<figcaption class="photo-credit">Photo: Jane Doe</figcaption>
</figure>
其中哪一个最好，为什么？
<figure>
<img src="https://placedog.net/500/280" alt="a handsome pooch stares at the camera">
<div class="photo-credit">Photo: Jane Doe</div>
<figcaption class="caption">George, the doggo</figcaption>
</figure>
<figure>
<img src="https://placedog.net/500/280" alt="a handsome pooch stares at the camera">
<figcaption>
<span class="caption">George, the doggo</span>
<span class="photo-credit">Photo: Jane Doe</span>
</figcaption>
</figure>
还有别的事...
我在 WordPress 主题中的站点标题链接上经常看到这一点（可能是因为 Underscores 做了它并且每个人都复制了它）：
<a href="/" rel="home">Some Site Title</a>
我什至找不到任何浏览器、屏幕阅读器或其他用户代理有意义地使用rel="home"锚标签上的半权威声明。我找到的唯一“官方”文档是microformats.org 站点上2005年的规范草案。
该文档建议home将 中的两个<link>标签<head>以及<a>标签作为有效值。在 a<link>上使用它有一些来自 HTML v3 的谱系，并且从 2002 年开始就有对它的引用。但我没有看到任何关于<a>标签使用的信息。
那么，包括它对任何人/任何人都有帮助吗？我会做的更好，以使用<link rel="home">在<head>，或者是过于陈旧，到2020年？
html ×10
semantic-markup ×10
html5 ×3
browser ×1
htmlbutton ×1
microformats ×1
tags ×1
wcag ×1
xhtml ×1
xml ×1