Sunday, June 30, 2013

Anchor tag tutorial

Anchor tag is a traditional tag used from the initial stage of HTML to give the navigation option to the user. It allows user to jump a page from and to. This page will describe its attributes and their significance.

Attribute Value Description
hrefabsolute URLdifferent domain, which start with http protocol
href="http://www.differentsite.com/test.asp"
relative URLurl link on same domain, which doesnot need to start with http protocol
href="homepage.html"
href=+"/homepage.html"
example: href="http://www.example.com/2013/test/homepage.html"

href="/homepage.html"
href=+"/homepage.html"
example: href="http://www.example.com/homepage.html"

href="//homepage.org"
href="http:"+"//homepage.org"
example: href="http://homepage.org"

href="./homepage.html"
href=+"/homepage.html"
example: href="http://www.example.com/2013/test/homepage.html"

href="../homepage.html"
href=+"/homepage.html"
example: href="http://www.example.com/2013/homepage.html"
anchor URLhref="#top"
href=+"#top"
example:href="http://www.example.com#top"
mailto protocolhref="mailto:user@example.com? subject=MessageTitle& body=Message Content"
target _blankOpens the linked document in a new window or tab
_self(default)Opens the linked document in the same frame as it was clicked
_parentOpens the linked document in the parent frame
_topOpens the linked document in the full body of the window
framenameOpens the linked document in a named frame
charset char_encoding Not supported in HTML5. Specifies the character-set of a linked document
coords (supported in Firefox and Opera only) x1,y1,x2,y2If the shape attribute is set to "rect", it specifies the coordinates of the top-left corner and the bottom-right corner of the rectangle
x,y,radiusIf the shape attribute is set to "circle", it specifies the coordinates of the circle center and the radius
x1,y1,x2,y2,..,xn,ynIf the shape attribute is set to "poly", it specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser must add the last coordinate pair to close the polygon
hreflang language_code A two-letter language code that specifies the language of the linked document. To view all available language codes, go to w3schools Language code reference.
media media_query Specifies what media/device the linked document is optimized for. more
name section_name Not supported in HTML5. Specifies the name of an anchor
rel alternateLinks to an alternate version of the document (i.e. print page, translated or mirror)
authorLinks to the author of the document
bookmarkPermanent URL used for bookmarking
helpLinks to a help document
licenseLinks to copyright information for the document
nextThe next document in a selection
nofollowLinks to an unendorsed document, like a paid link.("nofollow" is used by Google, to specify that the Google search spider should not follow that link)
noreferrerSpecifies that the browser should not send a HTTP referer header if the user follows the hyperlink
prefetchSpecifies that the target document should be cached
prevThe previous document in a selection
searchLinks to a search tool for the document
tagA tag (keyword) for the current document
rev text Not supported in HTML5. Specifies the relationship between the linked document and the current document
shape default
rect
circle
poly
Not supported in HTML5. Specifies the shape of a link
type MIME_type The MIME type of the linked document. Look at IANA MIME types for a complete list of standard MIME types
Reference: w3schools.com w3.org