https://github.com/atapas/anchors
An app to demonstrate the HTML anchor tags and their properties.
https://github.com/atapas/anchors
anchor css html styling tags
Last synced: about 1 year ago
JSON representation
An app to demonstrate the HTML anchor tags and their properties.
- Host: GitHub
- URL: https://github.com/atapas/anchors
- Owner: atapas
- License: mit
- Created: 2021-12-10T10:39:27.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-25T04:03:51.000Z (about 4 years ago)
- Last Synced: 2025-03-26T13:03:47.688Z (over 1 year ago)
- Topics: anchor, css, html, styling, tags
- Language: HTML
- Homepage: https://www.tapasadhikary.com/project/anchors
- Size: 206 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
## Anchors
An application can have multiple anchors. Each anchor can have multiple attributes. Anchors can be used to create links to other parts of the project.
`Anchors` is a demo application that shows how to use anchors. It provides a simple interface to try out different anchor attributes. The extensive documentation for anchors can be found from the demo application.
## Demo Application
> Please access the demo application from the following link: [Anchors](anchors.vercel.app)
Please give the repo a ⭐ if you liked the work. It motivates me.
### Many Thanks to all the `Stargazers` who has supported this project with stars(⭐)
[](https://github.com/atapas/anchors/stargazers)
## Documentation
This section contains the documentation for the attributes with sample source code.
### The `href` attribute
The `href` attribute is used to specify the link target.
- Link to a page to another website:
```html
Click me
```
- Link to a page to a section of the same website:
```html
Go to the News section
News
Here is some news
```
- Link to open the default phone app
```html
Call +914123456765
```
- Link to open the default email app
```html
Send an email to me
```
- You can link to a script and execute it with a single click.
```html
Click me
```
Please find the possible values for the `href` attribute in the [w3c.org](https://www.w3schools.com/tags/att_a_href.asp) specification.
### The `title` attribute
The `title` attribute is used to specify the title of the link as a tooltip.
```html
Hover over me
```
### The `rel` attribute
The `rel` attribute is used to specify the relationship between the current document and the link target.
```html
No Follow
```
Please find the complete list of possible values for the `rel` attribute in the [w3schools](https://www.w3schools.com/tags/att_a_rel.asp).
### The `download` attribute
The `download` attribute is used to specify the file name of the link target. This attribute is only supported in the [HTML5](https://www.w3schools.com/tags/att_a_download.asp) specification.
```html
Download
```
### The `ping` attribute
The `ping` attribute is used to specify the URL of a pingback server. This attribute is only supported in the [HTML5](https://www.w3schools.com/tags/att_a_ping.asp) specification. The ping attribute specifies a space seprated list of URLs to ping when the link is clicked.
```html
Ping me
```
### The `type` attribute
The `type` attribute is used to specify the MIME type of the link target. This attribute is only supported in the [HTML5](https://www.w3schools.com/tags/att_a_type.asp) specification.
```html
HTML
```
### The `hreflang` attribute
The `hreflang` attribute is used to specify the language of the link target. This attribute is only supported in the [HTML5](https://www.w3schools.com/tags/att_a_hreflang.asp) specification.
```html
English
```
### The `referrerpolicy` attribute
The `referrerpolicy` attribute is used to specify the policy for the link target. This attribute is only supported in the [HTML5](https://www.w3schools.com/tags/att_a_referrerpolicy.asp) specification.
The possible values for the `referrerpolicy` attribute are:
```html
```
The possible values for the `target` attribute are:
```html
```
```html
same window(target: _self)
New Tab
```
## Credits
This demo application is developed by [Tapas Adhikary](https://tapasadhikary.com) and is maintained by [Vercel](https://vercel.com).