How can I display the href as the text too?

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.


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.


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

Tags:

Html

Anchor

Href

Recent Posts