最常被误用的 html 标签有哪些?

发布于 2024-10-02 16:20:57 字数 1429 浏览 8 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(14

小嗷兮 2024-10-09 16:20:58
<div> and <span>  <!-- no, really -->

我见过相当多的页面使用

标签以及附加的 CSS 类,甚至内联 CSS,以完全排除更多语义诸如

等收费标签,即使语义收费标签更合适。唯一一次考虑语义标签的时候是当有人回来考虑 SEO 时。

<div> and <span>  <!-- no, really -->

I've seen a fair number of pages that use <div> and <span> tags with attached CSS classes or even inline CSS to the complete exclusion of more semantically charged tags like <p>, <h2> and <em>, even when the semantically charged tags would be more appropriate. The only time the semantic tags are even thought of is when someone comes back and thinks about SEO.

甜警司 2024-10-09 16:20:58

锚标记只能用于链接到另一个位置,而不是触发 javascript。如果我尝试在新窗口中打开一个链接并在我的网址栏中获取一些随机的 javascript,我不会高兴。 href 属性中的内联 javascript 更糟糕。

<a href='javascript:document.getElementById("foo").style.display="block"'>this is bad!</a>

相反,使用按钮作为 JavaScript 的“钩子”。


另外,避免在锚标记内使用无用的文本。 “点击这里!”和“转到页面”几乎总是糟糕的选择。如果链接需要独立存在,请使用“访问 Stackoverflow”之类的内容。否则,将其编织到内容本身中。 Stackexchange 博客 有很好的例子,这篇文章也是如此。使用更好的链接文本可以帮助搜索引擎优化、屏幕阅读器的可访问性、一般可用性和可维护性。

查看有关正确使用锚标记的更多信息

<a>

The anchor tag should only be used to link to another location, NOT to trigger javascript. If I try to open a link in a new window and get some random javascript in my url bar instead, I'm not going to be happy. Inline javascript in the href attribute is even worse.

<a href='javascript:document.getElementById("foo").style.display="block"'>this is bad!</a>

Instead, use buttons as 'hooks' for javascript.


Also, avoid non-helpful text inside anchor tags. "Click Here!" and "Go to the page" are almost always poor choices. Use something like "visit Stackoverflow" if the link needs to stand on its own. Otherwise, weave it into the content itself. The Stackexchange Blog has great examples of this, as does this post. Using better link text can help SEO, accessibility with screen readers, general usability, AND maintainability.

See more on proper use of the anchor tag

莫言歌 2024-10-09 16:20:58
<table>

人们经常将其用于页面布局而不是显示数据。

<table>

People constantly use it for page layout rather than displaying data.

仙女山的月亮 2024-10-09 16:20:58
<label>

如果单选/复选框不在标签内,则不指定 for 属性。

<label>

Not specifying the for attribute if the radio/checkbox is not within the tags.

栖竹 2024-10-09 16:20:58

这并不令人震惊,但使用了 code> 分别代替

在某些边缘情况下, 更可取,但在几乎所有情况下, 和 <应使用 code>,因为它们传达含义(强或强调),而不是与它们的显示方式相关的特定样式。

HTML 标签应该表示文档的结构和语义,而不是提供样式设置的方法。 获取样式的方法取决于样式表。它可以定义为 em { font-weight: Strong; font-variant: normal;},没关系,因为设计可以规定强调文本的样式。使用 标签表明文本是斜体的,如果您应用与上面相同的规则,则在语义上变得毫无意义(其中 this 是粗体而不是斜体 ;)。

<b>

<i>

It's not egregious, but use of <b> and <i> instead of <strong> and <em>, respectively.

There are edge cases where <b> and <i> are preferable, but in nearly all cases, <strong> and <em> should be used, as they convey the meaning (strong or emphasized) rather than the particular styling that is associated with how they are to be displayed.

HTML tags are supposed to signify the structure and semantic meaning of a document, not provide a means for styling it. The method by which <em> gets styled is up to the stylesheet. It could be defined as em { font-weight: strong; font-variant: normal;}, and that's ok, since the design can dictate that that is how emphasized text should be styled. To use a <i> tag suggests that the text is italicized, and becomes semantically meaningless if you apply the same rules as above (where <i>this is bold not italics<i>).

七颜 2024-10-09 16:20:58
<font>

有更有效的修改文本的方法(最好是 CSS)。

编辑:我想 IS 已被弃用,但我仍然会保留它,唯一的原因是这个标签应该被完全杀死:D

并且希望弥补我的错误,我提出了我的新答案:

<small>/<big>
<font>

There are much more efficient ways of modifying text (ideally CSS).

Edit: I guess IS deprecated but I'll still leave it up for the sole reason that this tag should be killed entirely :D

And to hopefully compensate for my mistake I present my new answer:

<small>/<big>
浪漫之都 2024-10-09 16:20:58

哦哦,我们开始吧!

<center></center>
<h7></h7> <!-- People think these things go on forever ;) -->

只需 Google 即可搜索:http://www.maximumpc.com/article/features/the_7_most_misused_html_tags_and_how_fix_them

Ohhh, here we go!

<center></center>
<h7></h7> <!-- People think these things go on forever ;) -->

Just Google it: http://www.maximumpc.com/article/features/the_7_most_misused_html_tags_and_how_fix_them

心作怪 2024-10-09 16:20:58

许多网站仍然尝试将关键字放入元标记中。据我所知,拥有元关键字实际上会损害您的 Google 排名,因为 Google 不仅会忽略您的元关键字,还会损害您的代码与内容的比率。虽然很少使用,但它们的用处甚至更少。元描述是一个例外 - 搜索引擎有时会引用它来进行快速描述。

<meta> Plenty of site still try to put keywords into meta tags. As far as I can tell, having meta keywords actually hurts your Google ranking because not only does Google ignore your meta keywords, it hurts your code to content ratio. While seldom used, they are evel more seldom useful. meta description is one exception - Search engines will sometimes reference it for a quick description.

小嗲 2024-10-09 16:20:58

的排名没有那么高,但想想每次您看到内容图像时,没有替代文本...

以及当它用于布局而不是实际显示图像时来辅助文本。
大多数人似乎没有意识到,如果您想显示没有功能的图像,则应该将其放入 CSS 中。

<img> doesn't rank that high, but think of every time you saw an image of content, with no alt text...

And again when it's used for layout instead of actually displaying an image to aid the text.
Most of the people don't seem aware that if you want to display an image that has no functionality, you should put it in your CSS.

高速公鹿 2024-10-09 16:20:58
<h*>

在任何给定页面上多次且荒谬地使用

。也许 HTML 规范应该对这个主题有所启发。

网站上是否需要

? (也许如果您正在编写包含多个嵌套标题的报告?)

<h*>

Multiple, and ridiculous, uses of <h1> on any given page. Maybe the HTML spec should shed some light on this topic.

Is there even a need for <h6> on a website? (Maybe if you were writing a report with multiple nested headings?)

半边脸i 2024-10-09 16:20:58

基本上是一个链接标记,可以单击图像的不同部分来转到不同的链接。它可能看起来很吸引人,但考虑到第一次访问该网站的用户,他/她可能不知道该点击哪里以及图像的哪一部分会将人带到哪里。如果用户的互联网带宽较小而无法加载图片,则情况会变得更糟。

因此,这个标签应该只用在图像不言自明的地方,例如地图。

<imagemap>

The <imagemap> is basically a linking tag where different parts of the image can be clicked to go to different links. It might look appealing but considering a first time user who goes to the website, he / she might not know where to click and which part of the image will take the person where. If the user’s internet bandwidth is less and the picture could not be loaded, it makes things all the more worse.

Hence this tag should be used only at places where the image is self-explanatory, maps for example.

浅笑依然 2024-10-09 16:20:58

这是一个有点旧的数据,但我想它对于今天来说可能是最准确的:http: //code.google.com/webstats/2005-12/elements.html

据此,最常用的表示元素是 brtable 及其子元素。

It's a bit old data, but I guess it could be mostly accurate for today: http://code.google.com/webstats/2005-12/elements.html

According to this the most used presentational elements are br and table with its children.

痴者 2024-10-09 16:20:58
<iframe>

不好:

<iframe src ="my_whole_site.html" width="100%" height="1500"></iframe>

更好:

<iframe src ="a_subsection_of_my_site.html" width="100%" height="300"></iframe>
<iframe>

Not Good:

<iframe src ="my_whole_site.html" width="100%" height="1500"></iframe>

Better:

<iframe src ="a_subsection_of_my_site.html" width="100%" height="300"></iframe>
旧人 2024-10-09 16:20:58

  • 标签经常被滥用,因为每个浏览器都会给你一个可行的列表,但没有正确地将它们包装在有序/无序列表标签中,或者正确地完成它们。
  • 哎呀,它在这里工作。
  • 瞧!

  • Bare <li> tags are misused a lot because every browser will give you a workable list, without properly wrapping them in the ordered / unordered list tags, or finishing them properly.

  • heck, it works here.
  • see!

  • ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文