资讯专栏INFORMATION COLUMN

标签<a>的最佳实践

jsyzchen / 323人阅读

摘要:也就是说,在大多数情况下,他们只关注标签中的,而忽略标签周围的上下文。就算对于大多数正常使用浏览器的用户来说,人们也容易只被标签中的内容吸引,而忽略上下文。总之,保持标签中的关键字简洁是非常重要的。

什么是标签

官方定义是这样的:

The HTML element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.

也就是 , 我们需要关注的就是中的属性,以及标签之间的内容(content).

例子

我们先观察以下看起来没啥问题的例子:

点击链接 下载销售报告

探讨之前

在分析以上例子之前,我想先探讨一下我们的目的

前端的一个关键目的就是,尽可能满足不同用户的需求。这里的用户不光指人类,还包括各种搜索引擎,各种辅助设备(比如给视障人士的读屏器等)。

具体分析

那么我们试着从不同的“用户”角度来分析上面例子存在的问题

对于搜索引擎来说,会着重分析标签中的content,也就是例子1中的“点击链接”这个文本,和明显“点击链接”并没有包含对链接的描述,那么搜索引擎也就不明白这个链接的意义。

对于使用屏幕阅读器的用户来说,会偏向于在不看链接周围的上下文的情况下,在链接之间跳来跳去。也就是说,在大多数情况下,他们只关注标签中的content,而忽略标签周围的上下文。在例子1中,他们也很容易只看的到“点击链接”这个文本,不明白这个链接到底指向何处。

就算对于大多数正常使用浏览器的用户来说,人们也容易只被标签中的内容吸引,而忽略上下文。

那么我们要注意的是:要尽量在标签content中放入有意义的关键字

第一次改善

点击链接下载销售报告

改善之后,将关键字都放到了标签之内,解决了上面提出来的问题,那么我们再继续分析剩下的问题

改善后的问题在于标签中的内容太多,用户通过标签已经知道这是一个链接,所以就不要再出现“链接”之类的关键字。用户也知道链接是用来点击的,所以也不需要“点击”这个关键字。总之,保持标签中的关键字简洁是非常重要的。

第二次改善

销售报告

如上的例子中,精简了content,只剩下了“销售报告”四个字,貌似非常完美了。但是,我们知道通过点击链接之后,可能打开一个新的页面直接查看报告,也有可能是开始下载报告,有各种各样的可能性。 所以,我们在关键字中不能忽略掉点击链接之后的行为描述,告诉用户点击这个链接之后会发生的动作。

第三次改善

下载销售报告

改善后的链接已经相对不错了,但是还是存在问题。就是URL是绝对地址,我们应该将它改成相对地址

第四次改善

下载销售报告

采用相对地址有如下好处:

代码更加容易阅读

相对地址更加高效,如果采用绝对地址,浏览器会去查找DNS服务器,然后产生了一系列不必要的流程消耗。

最后,让我们再针对下载的链接,做一次优化,那就是添加 download 属性。

第五次改善

下载销售报告

在这里,download属性指定了下载时的默认文件名。

总结

综上所述,标签的最佳实践要注意以下几点:

在标签的content中,写上清晰易懂的关键字描述

尽可能使用相对地址

对于点击链接后的动作,给出清晰的提示

对于下载链接,添加download属性 (PS:download属性并没有被浏览器广泛支持,使用須谨慎)

参考

HTML element referenc
Creating hyperlinks

笔者博客

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51426.html

相关文章

  • XSS攻击实践

    一、前言由于浏览器同源策略,限制了页面无法引用第三方资源,无法请求不同源下面的资源,影响了web的发展,所以浏览器出让了一些安全策略来满足web的发展。通过CSP安全策略来保证浏览器可以安全的加载第三方资源;通过CORS允许浏览器跨域请求;通过PostMessage来操作DOM但这些策略也给了黑客攻击我们的站点的机会。web站点常见的攻击方式包括:XSS攻击,CSRF攻击、Sql注入攻击等。二、X...

    社区管理员 评论0 收藏0
  • 【数据科学系统学习】机器学习算法 # 西瓜书学习记录 [12] 集成学习实践

    摘要:本篇内容为机器学习实战第章利用元算法提高分类性能程序清单。将当前错误率与已有的最小错误率进行对比后,如果当前的值较小,那么就在字典中保存该单层决策树。上述,我们已经构建了单层决策树,得到了弱学习器。 本篇内容为《机器学习实战》第 7 章利用 AdaBoost 元算法提高分类性能程序清单。所用代码为 python3。 AdaBoost优点:泛化错误率低,易编码,可以应用在大部分分类器上...

    terro 评论0 收藏0
  • 云极高性能计算 EPC

    摘要:云极是提供的高性能计算产品,其底层为屡受好评的快杰云主机,旨在为用户提供基于公有云技术的超高性能算力,以及涵盖数据传输数据计算数据可视化处理等一站式的使用体验。云极(EPC)是UCloud提供的高性能计算产品,其底层为屡受好评的UCloud快杰云主机,旨在为用户提供基于公有云技术的超高性能算力,以及涵盖数据传输、数据计算、数据可视化处理等一站式的使用体验。EPC支持以下功能:秒级创建计算节点...

    ernest.wang 评论0 收藏1873

发表评论

0条评论

最新活动
阅读需要支付1元查看
<