Introduction to HTML link anchor tags and their role in SEO_HTML/Xhtml_Web page production

The

tag is mainly used to define links and bookmarks, also known as hyperlinks or anchor links. The most common uses are as follows:

Create a hyperlink href attribute and jump to the link in the middle of href="".

<a href="http://www.jb51.net/">www.jb51.net</a>

Create a bookmark, use the name or id attribute and add "#" at the end of the hyperlink and the name of this bookmark to jump to a certain location on the web page

<a name="top"></a>
<a name="1"></a>
<a name="2"></a>
<a href="#top">返回顶部</a>
<a href="#1">打开第一章</a>
<a href="#2">打开第二章</a>

When you open the E-Dimension Technology W3CSchool online tutorial, the navigation under the title will appear. These are created through the bookmark name.

Javascript event attributes, execute different commands after clicking

<a href="javascript:void(0)" onclick="this.href='http://www.jb51.net/'">www.jb51.net</a>

Anchor link CSS style

When there is no custom anchor linkanchor link textCSS style, the default anchor link style is as follows :

Default link style, please use the mouse to trigger to see the effect

<a href="http://www.jb51.net/">www.jb51.net</a>

a{color:#00F} Unvisited anchor links are all blue and underlined

a:visited{color:#800080} The link after clicking will be purple and underlined

a:hover{color:#F00} When the mouse is pressed, it will be red and underlined

However, because these three colors are too strong, they often cannot match all web design styles. If you need anchor link styles in other colors, you only need to modify the color and background in CSS according to the above three styles.

Why do anchor links need to be underlined?

In fact, when HTML was first launched, browsers were not as advanced as they are now. At the same time, computer screens at that time did not have the colors of today’s LCDs, and many were even black and white. At that time, the way to distinguish whether it was a link was through underlining. On many black and white displays, or on web pages for color-blind users, it was best to keep underlining, otherwise users would not be able to distinguish colors.

Of course, for the sake of aesthetics, modern web design generally does not put underlines directly on links. However, in order to take care of color-blind users and black-and-white mobile phone display users, it is recommended to set the CSS style to be underlined when the user mouse triggers it.

Anchor link Target jump window settings

When you open links on this page, you will find that opening some links will pop up to other windows, while opening some links will directly replace this page. This jump method can use the target attribute of the anchor link to set the jump window.

_self The current window is open , and anchor links will jump to the current browser window by default, that is, the default target="_self"

<a href="http://www.jb51.net/" target="_self">这里是当前新窗口显示E维科技首页</a>

_blank New window opens

<a href="http://www.jb51.net/" target="_blank">这里是打开新窗口显示E维科技首页</a>

Unnamed target opens in a new window

<a href="http://www.jb51.net/" target="_weigeti"> 如果这里面的_weigeti不是网页内部的name或id，就网页中所有target="_weigeti" 链接都在同一个新窗口打开，而_blank每个链接都打开不同新窗口 </a>

frame name or id

<a href="http://www.jb51.net/" target="weigeti">点击这里，将在下面name="weigeti" 的框架里面显示E维科技首页，不会跳转新窗口或者替换当前窗口</a>
<iframe name="weigeti"></iframe>

_parent The parent window opens and loads the linked file into the parent frameset or parent window containing the linked frame. If the frame containing the link is not nested, the linked file is loaded in the browser's full-screen window, just like the _self parameter.

<iframe>
   <a href="http://www.jb51.net/" target="_parent">这里是框架内部</a>
</iframe>

_top The top level of the frame , for example, web page B is embedded in iframe in network A, and web page C is embedded in iframe in web page B

<iframe>
   <iframe><a href="http://www.jb51.net/" target="_top">这里是框架内部的框架</a></iframe>
</iframe>

If the link setting target=_parent in web page C will jump to remove web page B and directly embed the link page in web page C in A;

And if target=_top in web page C, it will jump out of all iframes and go directly to the link page in C.

_top opens the linked document in the entire current browser window, thus removing all frames

The role of anchor links in SEO

External links have always been regarded as one of the core of search engine optimization. For this reason, various forms of external links have appeared, but not all external links are effective for SEO.

External links written in JS are invalid for SEO

Search engines are relatively reluctant to recognize Javascript, so this is easy to understand.

<a href="#" onclick="this.href='http://www.jb51.net/'">这样的链接对SEO无效</a>
<a href="#" onclick="window.open('http://www.jb51.net/');">这样的链接对SEO无效，甚至在Chrome等浏览器下都无法打开</a>

Link rel=nofollow is also invalid for SEO

If you are exchanging links with another website and find through the source code that the other website has added the rel=nofollow attribute to your link, it means that the link will not be crawled by search engines.

<a href="http://www.jb51.net/" rel="nofollow">这样的链接对SEO无效</a>

<meta name="robots" content="nofollow" />
<a href="http://www.jb51.net/">如果网页开头有上面一句话，那么这个网页内部所有链接都不会会搜索引擎抓取，所以对SEO无效</a>

Links and background colors are not effective for SEO

Google Search launched a new algorithm to crack down on external links with the same color as Beijing, and such external links are generally considered black links.

<style type="text/css">
#vgtlink{background:#FFF}
#vgtlinka{background:#FFF}
</style>
<div id="vgtlink">
  <a href="http://www.jb51.net/" id="vgtlinka">这样的链接对SEO无效</a>
</div>

 <a href="http://www.jb51.net/" style="background:#FFF">这样的链接对SEO也无效</a>