HTML语义和样式

时间:2014-04-23 11:22:59

标签: html css html5 css3

我的问题是 - 使用某些HTML代码仍然是最佳做法,即使您需要根据浏览器解释和显示这些代码的方式进行不同的设置吗?

例如 - HTML5 <blockquote>标记将在其自己的行上开始,具有默认边距和填充,以及缩进。

但是 - 如果你不希望有缩进,你是否仍然使用<blockquote>标签以向浏览器和搜索引擎传达含义,然后应用CSS来减少/消除缩进,或者你应该只使用<p>标签?

重新设计blockquote元素并没有太大的努力,我认为使用最准确地传达其内容含义的标签很重要,但同时我不想养成写作的习惯额外的代码,如果被认为是不这样做的最佳做法。

5 个答案:

答案 0 :(得分:4)

  

我认为最准确地使用标签很重要   传达其内容的含义

你假设正确。

我会说,绝对总是尝试使用适合您想要的内容/目的类型的元素。由于某种原因,元素具有名称/名称,因此您的代码可以以具有语义意义的方式构建。为什么这很重要?很好地忽略了它对其起着重要作用的搜索引擎优化,或者对代码的访问方便,这是HTML的预期设计

不使用特定元素,因为它应用了默认样式,在此上下文中不是一个明智或合乎逻辑的行动方案。这尤其是因为当您比较browser-specific styling时,大多数元素可能会应用默认样式。

  

我不想养成编写额外代码的习惯   考虑不这样做的最佳做法

在某种程度上的不良做法是主观的,否则它是对或错 - 在这种情况下,不使用正确的标签不会破坏游戏,但是你会违反其预期用途,因此这肯定是不好的做法。

请参阅:

  1. Semantic HTML (Wikipedia)
  2. Semantic Web (Wikipedia)

答案 1 :(得分:1)

是的,使用与内容语义最相符的标记。在构建HTML文档时不要关心样式,因为你可以为不同的分辨率(智能手机,平板电脑,桌面)甚至不同的媒体(网页浏览器,屏幕阅读器,盲文显示器,任何设备出来)提供不同的样式。未来......)

下面详细讨论了类名,但它确实说明了语义正确性的重要性:

参考:http://www.w3.org/QA/Tips/goodclassnames

答案 2 :(得分:1)

HTML5为我们提供了许多新元素来描述网页的各个部分,例如headerfooternavsectionarticle,{ {1}}等等。这些存在是因为Web开发人员实际上需要这样的语义。 HTML5规范的作者是如何知道这一点的?因为在2005年Google analyzed 1 billion pages看到作者在div和其他元素上使用什么作为类名。最近,在2008年,Opera MAMA分析了300万个网址,以查看野外使用的top class namestop IDs。这些分析表明,作者想要标记页面的这些区域,但没有任何元素可以这样做,除了简陋和通用的div,然后他们添加了描述性的类和ID。 (HTML5 Doctor有很多关于HTML5 semantics的文章。)

Read

答案 3 :(得分:1)

您使用blockquote标记表示内容是引用。 标记提供的默认样式将信息传递给解释或解码符号的样式。

http://html5doctor.com/blockquote-q-cite/

这不仅仅是标记元素的默认样式。 通过使用CSS,您可以创建该基本样式的变体。这肯定对于blockquote有效。默认样式不提供仅填充和边距的引号。它由CSS引号属性提供。这只是造型引用的一种方式。你可以在引号上有一个左边框,斜体,......

blockquote {
  quotes: "\201C""\201D""\2018""\2019";
}

http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

答案 4 :(得分:0)

这主要是基于意见的,对此类事项的意见通常表达为宗教信仰,很少或根本没有提供事实证据或论据。但是,我将尝试在技术基础上处理这个问题,重点是给出的例子。 (这是一个很好的例子,并没有太深入到语义丛林中。)

blockquote元素被定义为结构元素而不是语义元素。它没有说明其内容的含义(可能是苹果,上帝或螺丝刀),只是关于它与封闭文件的结构关系:内容是一些内容的副本来自外部源,即来自文档外部 - 即引用 - 并且它是“块引用”与“内联引用”相反,这意味着除了其默认呈现之外几乎没有(如果有的话)是块。 / p>

在实践中,blockquote通常只是简单地缩进文本,特别是在过去,在CSS普遍可用之前。这就是为什么没有搜索引擎(或浏览器)使用结构关系(或“语义”,如果你想这样说)的名义上由元素表示的一个原因。搜索引擎可以对此类信息做很多事情。他们只是没有。他们是否会这样做是值得怀疑的:过多的内容会被错误地视为引用,并且实际引用的内容太多但未标记为blockquote

因此,blockquote的效果实际上只是默认渲染,所有边都有一定的边距。当CSS由于某种原因被禁用或覆盖时,这是 呈现,您应该尝试使用HTML标记,即使没有CSS也能提供可容忍的呈现。这可以被视为使用blockquote进行块引用的充分理由。另一方面,如果您的块引用已在其他方法中明确表示为引用,例如介绍性短语或标题,则此论点并不适用。

另一方面,没有充分的理由因为你不想要缩进而使用blockquote。在这种情况下,您必须使用其他方法在视觉上区分块引用与其他内容,例如使用背景颜色,不同的字体或大的装饰引号。您自然会使用CSS,并且与使用它进行比较,设置margin-left: 0是一件微不足道的事情。

此外,即使浏览器和一般搜索引擎忽略了blockquote的结构含义,您(或您的组织)也可能决定不这样做。您可以选择统一标记块报价,以便能够轻松找到它们(用于统计,检查或其他目的)。你可以通过一致地使用class=quote来实现同样的效果,但为什么不尽可能地使用元素呢?