References to old example

Hey,

A red prickly pear fruit

The src attribute above has the “#” in it. what does that mean, why use it in place of a complete link?

It generally indicates an example URL. In reality, it points to the location bar, or, ‘top of page’. It returns that last requested URL. This is not another request, though. Just the last response. Bear that in mind while you think this through. The response document is already in client memory.

<a href="#">Back to Top of page</a>

We as publishers can tack on page fragments, which is what the hash really is about. Note that CSS denotes the hash symbol as an ID. That means any element with an ID attrbute is a hash designate.

<div id="foo"></div>

<a href="#foo">foo</a>
1 Like

what does the “#” inside stand for?

By itself it means the root fragment, as in the top of the document. In a link within the page, clicking that will scroll to the top of the page.

<a href="#">Back to top of page</a>

After you click that, look at the location bar and you’ll see it in the URL.

The octothorpe is commonly referred to as the hash symbol. (Twitter users refer to it as hashtag.) Clearly it represents an anchor to which we can link.

www.example.com/index.html#fragment

where fragment is an id somewhere in the page.

<div id="fragment">

</div>

We’re told not to write URLs with hashes in them because they are global variables and there is the risk of a collision if some other API is imported that uses the same name for a global object of its own. That’s for another discussion further down the road. For now we can see (and use) it for what it is.

<a href="#fragment">Jump to page fragment</a>

is perfectly fine to use in the document context, just not in URLs linking to this page. It’s within the intent of interlinking page elements and providing in-page navigation. Long articles usually have several headings. A menu at the top or down the side will have links to all those headings, as an example of direct access to other sections. Fragment identifiers are the perfect tool.

The workaround for collision problem is to use fragment names that would never show up as variable names, such as goofyText, random words camelCased together, or hashes which are 32 byte random hex strings. That requires a framework though, with a database. Again, another discussion for way later.

Thank you for the clear and detailed explanation.

2 Likes

I understand and noticed that this topic was 44 days ago, however - I think the instructions should specify that you’re replacing the original image and not adding a “transform” image, as this is confusing and frustrating for some of us. The grading system doesn’t care if you have a transform image if it sees anything on the page that it doesn’t like.

For instance, I made the mistake of doing this:
a href=“https://en.wikipedia.org/wiki/Brown_bear” target="_blank"img src="#" alt=“Brown Bears”

When really, it wants you to do this:
a href=“https://en.wikipedia.org/wiki/Brown_bear” target="blank"img src=“https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg

But it doesn’t tell you that you did it incorrectly, you just see a broken link on the page.

The answer to the coding assignment is Brown Bear. I want to know what src = “#” mean. in particular what “#” means.

In a src attribute we are expecting a URL. When none is available, we use the location hash as a placeholder. If that were a link, with href="#" when it is clicked the page would scroll to top.

Consider,

<a href="#">Return to Top of Page</a>

Hello everybody. I jave a quick question about the followng code:

<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img src="#" alt="A red prickly pear fruit"/></a>

What exactely does the src="#" mean? I know its ment for the source. But here I don’t quite get it why thert is a # and what it does. As for the rest of the code is clear as day.

Thanks for your help fellas :slight_smile:

The hash is a placeholder so the URL is not empty. It is only temporary, though, until an actual URL is written to replace it.

Hello,

My question is why is the “#” sign used and not something else? Is this “#” sign replacing the whole source, meaning the hyperlink? Is this sign applicable in other cases?

Thank you :slight_smile:

An empty src or href value is invalid HTML, that is why we use a temporary placeholder, and in particular the hash symbol while we compose the document. It is not important to have the URLs in order to render the page. Once the page is composed and looking the way we want, then we can add in the URLs (which tend to take up lots of space and clutter the markup).

In more technical terms, the hash symbol is part of a URL and it represents a page fragment if it is followed by a name, or just the location bar if it is alone.

<a href="#">Top of page</a>

<a href="#info">Info</a>

<a href="https://www.example.com#info">Example site info</a>

The latter two links refer to the page fragment,

<div id="info">

</div>

@mtf

Thank you very much. I really appreciate your help.

1 Like