CODEWITHSUNDEEP
htmlanchorhref
Ali
Ali

Reputation: 58511

How can I display the href as the text too?

I would like to get the same result as below but without the duplication (the same link appears twice):

<html>
<body>
<a href="http://www.w3schools.com">http://www.w3schools.com</a>
</body>
</html>

Is it possible in static HTML without Javascript?

Upvotes: 15

Views: 19378

Answers (5)

Siham
Siham

Reputation: 158

You can do this without duplication using CSS selectors, by using the attr function in CSS.

In your style sheet you can add this:

a::after {
    content: attr(href);
}

For your example in the question:

<html>
<style>
a::after {
        content:  attr(href);
}
</style>
<body>
    <a href="http://www.w3schools.com">Some text</a>
</body>
</html>

And it displays the link after Some text.

Upvotes: 12

paxdiablo
paxdiablo

Reputation: 882656

The HTML standard (a) only allows certain things to be placed in a href URL itself, and a "please use the textual description as the link" marker isn't one of those things.

You're right that it would save a lot of duplication, though most people may think that the textual description of a link should be a little more human-readable than a link. You wouldn't, for example, want to see the following in your web page:

http://www.google.com/patents?id=vmidAAAAEBAJ&printsec=frontcover&dq=database&hl=en&sa=X&ei=tN-0T-TtKu3TmAWNq7DiDw&ved=0CDUQ6AEwAA

Having said that, you can do it with CSS, specifically by using after to add elements containing the textual href attribute to the document. I'd suggest limiting it to a specific class so that you're not modifying every single a tag that you have, something like:

<html>
    <style>
        .add-link::after {
            content: " (" attr(href) ")";
        }
    </style>
    <body>
        <a class="add-link" href="http://www.example.com">Link added</a>
        <p />
        <a href="http://www.example.com">No link added</a>
    </body>
</html>

The first link will have the link text added, the second will not. Unfortunately that won't solve the problem of monstrously large URIs (see above) being placed on the page as text, but you at least have the option of not attaching the add-link class on those):

(a): The HTML5 standard specifies the A element here and the URI specification here.

Upvotes: 5

pearcoding
pearcoding

Reputation: 1149

No, there is no way to remove the duplication with only static html.

It is also not neccessary. Many Webpages use PHP or something like this and to make links in PHP is easy :)

PHP example:

<a href="<?php echo $item->link; ?>"><?php echo $item->link; ?></a>

Upvotes: -1

Registered User
Registered User

Reputation: 3699

Actually a good way of formatting a link is:

<html>
<body>
<a href="http://www.w3schools.com">w3schools.com</a>
</body>
</html>

Upvotes: -4

Mathew Thompson
Mathew Thompson

Reputation: 56459

You can't, you'll either have to use JavaScript or keep it as it is.

Upvotes: 3

Related Questions