我是HTML的新手,想要制作语义正确的HTML,但我发现很难处理似乎只是标题,列表和段落的内容.
特别是,我找不到一个对字幕有意义的地方.我正在写一个博客网站,所以我们以此为例:
博客标题
是世界上最好的博客
post_title1
post_title2
post_title3
语义上的'博客标题'是h1.对我来说,post_titleX是h2是有意义的,但是对于副标题感觉不对 - "世界上最好的博客"被归类为与它们相同的级别.
在其中使用其他标签是正确的做法还是有效的语法<title>？
多语言标题的示例
<html lang=en>
<title>Some title in English and a <i lang=fr>word in French</i></title>
我喜欢在我的博客文章中添加响应式旁注。响应方式如下：隐藏在小视口中，在宽视口的边缘可见。
当隐藏在小屏幕上时，需要可见元素（“链接”），以指示还有更多内容可供阅读。到目前为止，我的解决方案是：
<p>Some sentence with
<span class="sidenote" onclick="this.classList.toggle('active');">
underlined text
<span class="sidenote__content">
Sidenote content
</span>
</span>, which is clickable on small viewports.</p>
（增加了换行符以提高可读性）
使用CSS，我在带下划线的文本和旁注内容中都添加了星号，以便在大屏幕上可视地将它们连接起来。
该解决方案的问题在于sidenote__content正确的显示取决于CSS。像Pocket这样的读者都可以看到它，其中包括：
我希望有比简单跨度更多的语义解决方案。<aside>并且<section>，因为它们是块元素和不能使用可以自动关闭父p元素。
一种解决方案是将旁注内容与链接分开。但是，我宁愿将一组旁注及其链接保持为一组或一对，以便可以将其按原样插入帖子中。拆分它们将需要javascript逻辑来使链接与其内容匹配，并且在缺少一半的集合时可能导致维护问题。
很多人的HTML标记看起来像这样:
<html>
<body>
<div id="wrapper">
<p>Stuff in here</p>
</div>
</body>
</html>
大多数情况下,在这里的示例或网络上,人们建议您应该将宽度设置应用于#wrapper,而不是<body>.
这有什么潜在的原因吗？
例如,在一篇关于优雅降级媒体查询的技术的文章中,并为您提供技术1的一些上下文:什么都不做:
房间里的大象是桌面的Internet Explorer.借助移动优先解决方案,大屏幕将在一列中显示内容,从而为用户带来痛苦的阅读体验,超过既定的最大舒适度:50到75个字符. 可能值得在主容器中设置max-width属性,然后在媒体查询中增加max-width.
他们的CSS:
#wrapper {
_width: 460px; /* Take that, IE6! */
max-width: 460px;
}
@media only screen and (width) {
#wrapper {
max-width: 1200px;
}
}
以下是IE的结合方式(媒体查询已被注释掉).
是否有任何差异,而不是应用它#wrapper,我们会应用它<body>- 考虑到标准网站？
任何潜在的错误？我在这里尝试过,似乎没问题.如果布局变得更先进,那该怎么办...
这是一个主要是语义的问题.我想在网站上放置带有版权的图片.我知道数字和figcaption元素,但figcaption似乎不是最好的标签.这是我需要的标题.如果我有这样的图像:
<figure>
<img src="img/content/preview.jpg" alt="Alttext für das Bild" />
<figcaption>Caption goes here</figcaption>
</figure>
我在哪里放版权？
编辑:版权文字必须可见.
我有一个标题元素,需要在单击时触发一些JavaScript.我知道我应该只<a>在页面实际更改时使用标签,并且这<button>是JS功能的首选,但由于某种原因,它只是感觉不对
<h2><button onclick="myFunction();">My Title</button></h2>
我无法理解为什么那种语义不正确.只有我吗？
我在https://schema.org/Article找到的每个示例都在Google结构化数据测试工具中至少出现一个错误
据说headline现在需要; 那很好,只需itemprop="name"改为itemprop="name headline"
但它也给出了错误:
A value for the image field is required.
Required by:
Articles Rich Snippets
我听到有人形象地说应该是一个形象的文章(字面解释文档:"该项目的图像") -之类的文章的实际截图.这没用吗？这是否正确？我必须提供图像吗？每篇文章都可以使用相同的空白图像或徽标吗？或者由于不相关,复制图像会受到惩罚吗？
html5 semantic-markup microdata rich-snippets google-rich-snippets
自从我开始使用HTML,CSS等以来,我一直注意到的一个一致的事情是导航条似乎几乎总是以列表形式呈现,在某些变体中:
HTML:
<ul>
<li><a href="link1.html">link 1</a></li>
<li><a href="link2.html">link 2</a></li>
<li><a href="link3.html">link 3</a></li>
<li><a href="link4.html">link 4</a></li>
</ul>
还有<li>里面的<a>
CSS:
ul{list-style-type:none;}
li{display:inline-block;}
现在HTML5基本上是相同的,但在<nav>标签或任何说"这是浏览器/屏幕阅读器的一些导航内容"的任何东西.
我的问题是他们是否需要具有现代HTML5语义和ARIA可访问性角色的列表,还有什么好处？当然是一个链接列表,但还有其他任何实际原因吗？
我找到的理由:
语义,屏幕阅读器和可访问性:意见各不相同,特别是它如何使屏幕阅读器更好(或更糟糕......).但是不应该<nav>在链接周围使用HTML5 和/或相关的ARIA角色吗？是否还需要专门显示为链接列表(无序或其他)？
美学:在带有默认项目符号的垂直列表中,或者没有CSS,是的.但是,否则替代标记(例如<a>in <nav>)而不是<li>in <ul>将会如期望的那样容易或更容易.
现有用途:它在现有网站中使用很多(例如StackExchange站点,MDN,还有更多......).
W3C <nav>规范:说链接不必在列表中,但它可以.但它也指定了<nav>"链接部分" 的内容,它还需要是"链接列表"吗？
向后兼容性:它经常被使用,因此应得到广泛支持,HTML5和ARIA可能无法供旧浏览器/屏幕阅读器使用.
各种帖子:
任何人都可以解释rowspan和colspan,col和colgroup？这些W3C的有效性和语义是否正确？在哪些情况下这些有用？
假设aside元素包括"哦,顺便说一下......"等内容,例如阅读建议,广告或交叉销售.
aside外面是否在语义上可以main吗？aside不在外面,它是否优于可访问性main,例如"跳到主要内容"命令？aside在外面或内部包含标签,是否有任何SEO影响main.semantic-markup ×10
html5 ×6
html ×4
css ×2
seo ×2
css3 ×1
html-heading ×1
html-lists ×1
htmlbutton ×1
microdata ×1
navigation ×1
semantics ×1
xhtml ×1