正确使用a标签

<a>标签和<div>不同，它是有语义的，应该正确的使用<a>标签而尽量避免超出它的语义，以免让搜索引擎产生误会。

HTML中<a>元素（或称锚元素）可以通过它的href属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他URL的锚文本链接。<a>中的内容应该指明链接的目标，避免空的href属性。默认情况下鼠标移到<a>标签上，鼠标显示可点击状态，CSS样式为“cursor:pointer;”，如果标签不是可点击的，应该尽量避免使用<a>标签。另外，可点击标签不只有<a>标签，还有button标签。如果希望让标签看上去是可点击的，也可以加了CSS属性“cursor:pointer;”。

<a>标签的三种日常用途：

<a href="https://seo.lichil.com">守页SEO</a>

<a href="mailto:admin@lichil.com">Email</a>

<a href="tel:075512345678">075512345678</a>

1、链接地址，这个最常用，以上面为例，点击第一个<a>标签会跳转到https://seo.lichil.com。

2、发送邮件，点击第二个<a>标签会唤醒邮箱应用并给admin@lichil.com发邮件。

3、拨打电话，点击第三个<a>标签会拨打电话075512345678，注意，该功能一般用于手机网页，如果你的电脑无法拨打电话，PC网站上尽量不要使用。

虽然“<a>”标签通常用于创建超链接，但在某些情况下可能不适合或不建议使用：

1、如果您需要在网页上执行操作或触发特定行为而不链接到不同的URL，则使用<a>标签是不合适的。在这种情况下，应该考虑使用其他HTML元素或JavaScript事件处理程序来实现所需的功能。

2、遇到不可用的URL，如果没有可链接的有效URL，则使用<a>标记会产生误导且不正确。相反，可以使用其他HTML元素来显示信息或为用户提供与您的内容交互的替代方式。

3、可访问性问题，如果仅将链接用于视觉样式目的或创建没有任何有意义目标的交互元素，则可能会给屏幕阅读器用户带来可访问性问题。在这种情况下，最好使用适当的HTML元素（如按钮）并应用CSS样式来实现所需的视觉效果。

4、如果要创建具有特定语义元素的结构化文档，那么使用<a>标记可能不是最佳选择。例如，如果您想标记标题、段落或列表项，那么使用适当的HTML标记（例如<h1>、<p>或<li>……）更为合适。

请记住，HTML标签的选择应基于其预期目的、语义和可访问性考虑因素。仅当语义适当且与所需功能一致时才使用<a>标记是一个很好的做法。

因为排版的统一性而使用了<a>标签，而不是链接跳转页面，可以在上面加了rel="nofollow"。

<a href="javascript:;" onclick="change()" rel="nofollow">点击切换</a>

日常中比较容易使用到<a>标签但尽量不要使用的地方：

1、点击切换内容；2、点击提交表单；3、点击获取验证码；

例如：

<ul>
 <li><a href="https://seo.lichil.com" title="守页SEO">首页</a></li>
 <li><a href="https://seo.lichil.com/seo-all">SEO知识</a></li>
 <li id="login_global" class="login_global"><a href="javascript:;" rel="nofollow">弹窗登录</a></li>
</ul>

前面几个<a>标签都是有链接URL的锚文本链接，后面突然有一个标签是没有href值的<a>标签，这个没有href值的标签，尽量不要使用<a>标签，例如<span>。