Have you thought of disabling Anchor tag in HTML either using HTML code or CSS code or Javascript code? It is quite easy to do but very useful at times.
Before we move to the topic, let’s talk a bit about HTML, CSS, Javascript and the Anchor tag.
What is HTML?
HTML stands for Hyper Text Markup Languages which is used to create web pages by tagging the texts to achieve font, color, links, etc. to form a web page.
If you want to learn HTML, click here.
What is CSS?
CSS stands for cascading stylesheet which is used for giving the style to HTML pages. If HTML is the body, CSS is the clothing.
What is Javascript?
If you want to make your web pages interactive, Javascript the best to use it is an object-oriented computer programming language used to create interactive effects within web browsers.
Don’t confuse Javascript with Java. They are different. Javascript is a client-side scripting language that runs on the browser.
What is Anchor Tag?
Anchor tag, i.e. <a> defines a hyperlink which is used to link from one webpage to another webpage.
Href is the most important attribute of Anchor tag which holds the destination link. Apart from href there are so many different attributes that can be used within <a> tag for various purposes.
The anatomy of <a> tag is below
<a href=”https://techtricksworld.com/”>TTW</a>
In this, you can see that in the tag <a>, href is indicating that the link will go to https://techtricksworld.com when the text “TTW” will be clicked.
When you put this code in an HTML page, the output will show only the text “TTW” which if you click will open the site.
Text which is hyperlinked is called Anchor text as it is the text used for this Anchor tag code. In this example “TTW” is the Anchor text.
<a> tag is supported by almost all web browsers.
This post will guide you to disable Anchor tag in HTML, CSS, and Javascript.
How to Disable Anchor Tag in HTML?
To disable Anchor tag in HTML, there is a simple code, but that doesn’t work in modern day browsers. It worked with Internet Explorer.
<a href=”https://techtricksworld.com/” disabled=”disabled”>TTW</a>
Unfortunately, in the modern day browsers, this code won’t work. But, we have options such as CSS and Javascript to disable Anchor tag.
How to Disable Anchor Tag in HTML pages using CSS?
CSS is love♥. It is used to adorn your HTML web pages, and that is why we term this as the styling of web pages. Moreover, CSS can do a lot more.
You can disable Anchor tag in CSS as well.
For this, you can just use Pointer-events style, and it will be done.
I am writing an inline CSS code for the same:
<a href=”https://techtricksworld.com/” style=”pointer-events:none; cursor:default;”>TTW</a>
Within the Anchor tag, what I have added within “style” is the CSS code. When you add this code, the link from the text will be disabled, and the text becomes not clickable.
How to Disable Anchor Tag in HTML pages using Javascript?
You can disable Anchor tag in HTML pages using Javascript as well, and that is very easy. You just need to use one javascript function
<a href=”https://techtricksworld.com/” onclick=”return false;”>TTW</a>
When you do this, you can still see the link on the text but, when you click that, the link won’t open which means the link is disabled.
Conclusion
For creating web pages, HTML and CSS are the base requirements, and you can do a lot with these. Disabling Anchor tag using HTML, CSS or Javascript codes are quite easy as you have read in this post.
Even, the whole course of HTML and CSS is very easy but you have to be creative to design beautiful and professional looking web pages.
We will be sharing such small HTML/CSS tricks that would help you do some amazing stuff. Stay tuned!
Add Comment