当可以改用CSS时,为什么还要使用p,span,hx等标签?


43

当可以改用CSS时,为什么还要使用p,span,hx等标签?从SEO角度来看重要吗?


2
我知道如何将带有span或p标签的CSS伪装成hx标签,但是无论如何,即使没有p或span标签,如何使用CSS设置文本样式?
joshuahedlund 2011年

一个半招半招的反应是:试着没有他们。使用<span>所有内容,看看您是否可以仅使用CSS即可完成所需的工作。通过尝试定位正确的跨度并使它们的行为像其他元素一样,您可能会学到很多东西。(尽管最可能的教训是“不要那样做。”)
内森·朗

Answers:


67

简短的版本是各种标记和CSS具有不同的用途。

<h1>Whatever</h1>例如,带有一定的含义及其用法:“这是标题,重要的是头一个标题”,依此类推。一些解析器还使用hx标签(和其他解析器)来创建文档结构的轮廓,该轮廓可用于从数据处理到可访问性的任何内容(例如,屏幕阅读器通过跳到下一个h3跳到网站站长首页上的下一个问题) 。

您不能根据CSS的作用来消除语义标签,反之亦然。
您可以将CSS应用于另一个标签,以使其看起来与h1相同,例如:,<span style="font-weight:bold;font-size:2em">Whatever</span>但是就功能和语义而言,仍不能使该span标签成为实际的标头。在这种情况下,我上面链接的大纲几乎是不可能的,因为那些跨度不是标题,而只是一些您随意设置为粗体的文本。


41

标记和显示方式不同

这有点像问“为什么我们在油漆时要有墙?” :)

HTML标签表示您的内容 -这是标题,这是列表等。

CSS表示您的内容应该是什么样子 -标题应为蓝色,列表应如此缩进,菜单应在左侧,依此类推。

Javsascript告诉您页面的行为 -动画等。

因此,如果没有HTML内容,CSS和Javascript实际上就没有任何工作。

这些类别并不是100%黑白的-例如,CSS现在可以指定“过渡”,它们是动画-但它们是基本概念。

请在此处此处在StackOverflow上查看有关此主题的先前讨论。

好的标记可以节省大量的精力,并且效果更好

如果您希望某些行为像链接一样,则可以使用<span class="mylink">并使用大量CSS和JS使其外观正确。或者,您可以只使用一个<a>元素并免费获得所有内容,而无需下载其他代码,因为浏览器已经知道该怎么做,并且已经用快速的本机代码实现了逻辑。此外,它对于屏幕阅读器,移动浏览器,搜索引擎,聚合器以及其他您从未想到的用例而言,更有可能正常工作。

这也是为什么您应在页面的主要部分使用a <button>进行可点击的操作,将a <label>标记为<input>,然后使用a的原因<main>

好的标记如何影响SEO

从根本上讲,SEO旨在说服搜索引擎,使您的内容与搜索词最匹配。显然,谷歌没有人亲自阅读每个网页并对其进行排名。

因此,为了使搜索引擎知道您的内容是什么,程序必须对其进行解析。

嘿,看!我们拥有称为HTML的整个语言,它旨在以机器可以理解的方式标记您的内容!:)

因此,是的,清除标记将有助于搜索引擎更好地为您的页面编制索引。

举一个极端的例子,如果您的页面标题实际上是您为报纸标题拍摄的照片,它可能看起来很有趣,并且人们可以很好地阅读它,但是对于搜索引擎来说,它只是一张毫无意义的图片。而<h1>Turtle Groomer 5000</h1>清楚地告诉搜索引擎您所拥有的产品可促进睾丸卫生。


2
“为什么我们油漆时要有墙?” 〜这是一个很好的问题?谢谢!
艾维克·詹姆斯

我认为标签名称是标记中令人困惑的部分-H1,H2等可以被屏幕阅读器以及查看它的人使用。话虽如此,世界上99%的页面都会被看到,因此,尽管它让SEO爱好者感到沮丧,但H标签却是视觉标记,就像<b>一次大胆的尝试一样。
克里斯·S

@ChrisS-我不认为这令人困惑。标签总是意味着可以被机器读取。包括浏览器和屏幕阅读器。不,这<h1>实际上不是视觉标记。如果没有其他说明,大多数浏览器将以粗体显示它,但是页面的样式或用户自己的首选项可能会覆盖它。<h1>表示含义:“这是我的主要标题。” 如果网站或用户希望主标题变小且呈橙色,这就是他们所看到的。
内森·朗

1
“就像<b>意味着一次大胆一样” –有人在<b>不告诉我的情况下改变了“含义” 吗?它仍然表示大胆吗?当然,我更喜欢语义标记,<em>并且<strong>
ghoppe11年

13

还请考虑一些有障碍的人(例如)必须使用盲文阅读器。在这种情况下,html标记比视觉css样式重要得多。


10

苏回答了语义部分。关于SEO,您会发现搜索引擎给h1元素的权重要高于其他标签。与普通文本相比,h2 / b / strong标签的权重要大一些。

其他大多数标签几乎相等,但是您应该始终使用最合适的标签进行作业。Google最近开始解析用于表格数据的表,并且其他适当使用的HTML可以发出信号,表明内容比其他内容更重要。


这是有趣的。你有这个来源吗?
2011年

3
@ user606723哪一部分?第一部分是SEO的基本知识,并在Google自己的SEO指南(PDF)中提到。我不知道表格的内容是否记录在任何地方,但是我已经在搜索结果中看到过几次-它们在目标页面上列出了表格中的2-4行。
DisgruntledGoat

1
更新:下面是提到在SERP中的表一个职位:googlesystem.blogspot.com/2011/11/...
DisgruntledGoat

1

对于HTML5,请检查HTML5中的粗体和斜体

摘要:

使用<b>时,你想要的文字有不同的风格没有上下文的重要性,但在使用<strong>时,你希望文本具有从内容或SEO的角度来看额外的重要性。

使用<i>抵消文本的心情,但使用<em>使文本强调。


3
否。不推荐使用<b>和<i>。如果您希望文本看起来是斜体/斜体,请使用CSS。如果要传达粗体/斜体文字的含义,请使用<strong>和<em>。
Mircea Chirea 2011年

4
@iconiK被谁弃用?我的理解还在于它在HTML5标准中已“弃用”。并且有充分的理由-除了强调以外,还有很多传统的斜体用法(例如,书名或外来词)-明确标有“斜体”标签(而不是语义标签)与直接输入大写字母没有区别和标点符号。不过,如果您想使用<span class="proper-name"> <span class="question-sentence">...
Random832

1
不建议使用它,因为HTML根本不应该定义任何演示文稿格式。这就是我们之所以写CSS到CSS文件(而不是内联),所以我们有人力,打印机,屏幕阅读器,手机,电子书阅读器ECT,Safari阅读器等不同的风格。
SOD

3
@sod我不是在问为什么不推荐使用它,我是在挑战它完全不推荐使用的说法。尚不清楚为什么斜体比大写字母和标点符号更“呈现格式”。这是内容的一部分。
2011年

2
@iconiK,“实际上已弃用”与是否已弃用某些内容无关。鉴于它们是在HTML5规范中提供的,并且绝不列为已弃用,因此我将<strong>明确声明它们未被弃用。
zzzzBov

1

另外:不要忘记语义对于残障用户的重要性。Screenreader软件依靠这些语义为盲人提供因残疾而错过的必要上下文。


1

首先,<hx>是一个相当重要的标签,正如其他人提到的那样,它定义了标题。标题不仅对外观非常有用,而且因为它们以某种外观无法分开的方式分隔了各个部分。仅以Wikipedia为例。一些程序依靠这些类型的标签将文档“分解”,甚至创建自动目录。搜索引擎会认为,<h1>标签中的文本会更重要,因为它是标题-标题。

其次,虽然样式表很棒,但是某些设备会忽略样式表,而只关注HTML,这是像HTML这样的标记<em>派上用场的地方。如果样式表被禁用或加载有问题(例如,互联网连接问题),则文本仍显示为格式化的。<em>我们还可以说应该强调这个词,而仅是斜体字就可以是任何东西,从电影标题到仅使图像标题与常规文本都不同。那些使用残疾工具的人可以使用此工具,否则他们通常无法获得重视。

<span>另一方面,它基本上是<div>标记的内联版本,并且如果有的话,它可以节省您不必键入额外的类(这样说,您真的想<span class="italic">代替<i>每个斜体实例使用)它使代码更难阅读,不那么标准化(在广泛的假设下,大多数人会使用后者而不是前者),并且不会以任何方式增强文档。

<p>对于残障人士来说,它也很方便,因为它确保文本可以以一种<br />无法分割的方式分成可管理的段落。

当然,可以说HTML并不是为了样式,而是在设计和样式之间存在微妙的界限。坦率地说,我认为这是用户的偏爱。不管您使用<i>还是<span class="italic">,它都取决于您,并且对于SEO不会有所不同。毕竟,为什么将我们限制为一种做事方式?(就像我们如何选择是否在JavaScript的行尾使用分号一样-我总是使用它们,而其他人则从不使用它们,并且对功能完全没有影响。)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.