Free Web Development Online Tutorials, Learn to Code
A Tag in Html Example, Webpage Designing using HTML, HTML5 Tags, HTML Tutorial for Beginners

Anchor or A Tag Example

Anchor tag is hyperlink, some people say link, in html page design we often link content from webpage using a tag. <a href="url or path">Text</a>

Hyperlink A Tag Style

Anchor or a href tag for Hyperlink in HTML
The anchor element is used to create hyperlinks between a source and a destination.

The source can be image, button or plain text that links to another resource, and the destination is also a type of resource (like page, document, images, different website, or some position on same page) that the source anchor links to.

Hyperlinks are one of the fundamental technologies that you will be using very often in web designing and development, by linking web information to information (content), so you need to understand how to use anchor elements, and how you can apply different style on hyperlink .

Anchor or ahref tag <a href="pageurl.html" /> is used when we want to link some content on same page or to a different page

Let's look at some example of Anchor or ahref tag .
<a href="pagename.html" > Click Here </a>

A Tag Attributes

Anchor tag or a tag often termed as hyperlink.

  • href

    here you need to set the destination url, incase want to link something on same page, use #id example: <a href="#dvShortinfo">Link on same page</a>

  • target

    indicate how you want the destination to be open, "_blank" | "_top" | "_self" | "_parent"

  • title

    this is optional, but very useful for SEO

This is how you can create a proper hyperlink tag

<a href="destination_resource_location" target="_blank" title="SEO freindly title text"> Click Here </a>

Hyperlink CSS Style Example

When we create a hyperlink, the default Anchor or A Tag <a>my link</a> color is blue, and when we hover the mouse pointer there will always be an underline.

But in real-time webpage designing we need to change the color and the style to match with web page layout.

Here is an example of how we can customise the hyperlink look and feel, change font color, background, font size for every mouse event like hover , mouse out etc.

a
{
    font-size: 15px;
    text-decoration: none;
    color: #808080;
}
            
a:hover
{
    font-size: 15px;
    color: #f00;
    text-decoration: underline;
}
            
a:active
{
    font-size: 15px;
    text-decoration: none;
    color: #000;
}

We can apply many other style attribute to hyperlink CSS using CSS Style Properties

 

Web Designing Tutorials
Anchor or A href Tag

digital marketing software


HTML Tutorial | Join Web Designing Course | HTML5 Introduction