What is the semantic HTML tag to display for URLs that are not links?

715 views Asked by At

I have a search engine plugin that outputs results in a basic structure:

<a href="page url">
    <div class="searchResult">
        <h3>Page title</h3>
        <p>Page url</p>
        <p>Page <meta> description</p>
    </div>
</a>

The plugin is designed to integrate into an existing website so it has no default styling. However, websites are supposed to be usable even without CSS through the use of the correct, semantic HTML tags. Currently the displayed URL is indistinguishable from the description and would appear as a software glitch without additional styling.

Google uses the <cite> tag, however in HTML 5 <cite> should be used for the title of a work, not a URL so this isn't the answer.

Is there a HTML tag that is designed to show a URL other than <a>, a URL that is not clickable? What is the semantic approach for this?

2

There are 2 answers

3
Lance On BEST ANSWER

If I understand you correctly, you want the url to be a link but also display as a url. To do this put the url in the a tag twice, like so:

This can then be style as desired by the destination page.

<style>
a {
color: blue;
text-decoration: underline; }
</style>

<a href="http://www.google.com/">http://www.google.com/</a><br /><br />

Edited to add:<br /><br />

<a>http://www.google.com/</a>

0
bcr On

The href attribute is required for default link styling.

Since adding css seems to be an issue I doubt you can use JS but if you can here's a solution that requires the css class .do-not-open to prevent links from opening.