Related
Although Outlook sends e-mails as HTML by default, Microsoft seems to want to make it hard for us to write that HTML ourselves. One important reason for using HTML is to keep the size of an e-mail down when inserting an image by using an <img> tag to access the image from online instead of inserting the image itself in the body of the e-mail.
Several sources [e.g., 1, 2] say that the way to do this is to use "Insert as Text" to insert a file containing the HTML code. But as of Office 2016, the "Insert as Text" option is no longer available by default. Fortunately though, there are also sources [e.g., 3] that show how to get it back.
However, when I tried this, Outlook did not interpret my HTML. So, for example, if I make a file containing the line:
<img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">
and then use "Insert as Text" to insert that line in my e-mail, the result is just that line of code, not the image. What am I doing wrong?
(As indicated by the alt attribute, the image file in that example is just a random online image that appears in one of the articles referenced above. I have no affiliation with that website.)
The answer is very simple. In a way, it's obvious, but in another way, it's not.
The answer is that each segment of HTML code inserted has to be a complete HTML file, including the <!DOCTYPE>, <HTML> and <body> tags, not just the desired HTML code. The reason this is not obvious is because if you insert multiple code segments, each one has to be a complete HTML file, which is something you would never do when actually writing HTML. I presume that what is happening is that when Outlook detects a valid HTML file being "Inserted as Text", it strips the opening and closing <!DOCTYPE>, <HTML> and <body> tags and then inserts the code that was between them -- as HTML, not as text.
So, the solution I found was that instead of the single line of code shown in the question, I need to "Insert as Text" a file containing:
<!DOCTYPE html>
<html>
<body>
<img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">
</body>
</html>
When I insert that as text in my e-mail, I see the image, not the code.
In all the sources I found online that said to use "Insert as Text" to insert HTML in Outlook, none of them said it had to be a complete HTML file instead of just the desired code. So maybe this Q&A will be helpful to someone else, if I'm not the only person who had to scratch my head for a long time before thinking of that.
========================
Added details about using HTML in the e-mail:
As pointed out in the Lenetek article linked in the question, Outlook does not support all HTML tags. In particular, for embedding images, I have found:
When sending from Outlook:
Outlook does not support <figure> and <FigCaption>. I found that an image and caption placed in those tags were rendered inline, just ignoring the tags. For floating to the right margin, I found I was able to get the same results by replacing <figure> with <table> and then placing the image and its caption each inside of <TR><TD>...</TD></TR>.
When receiving in Outlook:
There are differences in how different e-mail clients interpret HTML, which is probably why some e-mails come with a link at the top for viewing the e-mail in one's browser. In particular, I've read that Outlook is not well behaved in this regard. And that was the case with my right-floated image referred to above.
After doing the "Insert as Text" trick, the image appeared correctly at the right margin in the draft e-mail in Outlook, but when it was sent, the CSS style float attribute was ignored and the table appeared by itself at the left margin with no text wrapped around it. I was able to fix this by, in the <table> tag, replacing the style attribute float: right; with the old-fashioned HTML attribute align="right". With that, the image and caption appeared correctly at the right margin when received in Outlook. I have not tested what it looks like in other e-mail clients.
In addition to NewSites answer, I want to point out, that in current Outlook 365 versions the option for "Insert as text" does not appear in the standard settings. The mentioned function under the "attach" tab does NOT offer the "Insert as text" option in the modal window.
For this to work, you will have to add a new tab yourself to the ribbon and add the "Attach" button to this new tab. Once you click this newly added button, you will get a modal with the little dropdown next to the "Insert" button.
I had this same issue and have been so frustrated. It's actually super easy. The trick is to use outlook.live.com. Type any word in the body, highlight it, right click, select "inspect". The code will appear and the word you typed in the body of the email should be highlighted. Right click in the code and select "edit as html." Then, in the code, highlight the word you typed in the body and replace it with your code. Voila! (I learned that here: https://youtu.be/yZOYRhB6ONs)
I had issues displaying the linked image while generating outlook email using HTML code. Somehow it works on a couple of machines, but most didn't show the image.
Kept on researching knowing the problem is with Outlook interpreting the HTML code. And then I reached this thread and the #NewSites answer really nailed it. Just added the line <!DOCTYPE HTML> at the top of my HTML code and all are working perfectly now.
Outlook 365 (2022 Update)
For Outlook 365, the Attach option needs to be enabled manually. Modify the Command Ribbon from inside the message, not the main Outlook window:
Note this option is Attach File without subcommands, i.e. the "classic" Attach File.
From there you can choose Insert as Text as the HTML snippet will show up as processed, not just code.
Outlook version for this post: Microsoft® Outlook® for Microsoft 365 MSO (Version 2202 Build 16.0.14931.20652) 64-bit
I am trying to create a TOC for my Markdown blog.
The methods I am finding here... : Markdown to create pages and table of contents?
....do not work for me because I am naming all of my headers # _</>_ The Setup because I am using CSS on to style the "", giving each header a nice colored Icon next to it. If I simply use ```# The Setup ```` it works great.
This causes issues whenever I try to use [The Setup](#The-Setup).
I tried a few things like [The Setup](#_</>_-The-Setup) and other things, but I can not get it to work.
If someone can point me in the right direction I would greatly appreciate it. Also, if anyone has a better way of adding custom icons next to headers, I think that would be the better way to go about it.
As always, thanks in advance.
The general solution is to examine the rendered HTML output to see what the tool is converting the special characters to, in the HTML's element ID. Every tool could handle the conversion differently (it could convert special characters to -, _, or just remove special characters). Some examples:
<h1 id="_____the-setup">The Setup</h1>
<h1 id="-the-setup">The Setup</h1>
<h1 id="the-setup">The Setup</h1>
Once you have identified the exact id that the tool is using, then you use that value as the heading link in the markdown's table of contents. For example:
[The Setup](#_____the-setup)
Now, the tricky part is that not all Markdown tools will export the rendered HTML, including VS Code. The workaround for VS Code is:
Open the markdown preview mode (which renders to html internally).
Open the VS Code Developer Tools (Help > Toggle Developer Tools).
Use DevTools to inspect the element (in this case, the heading element for "The Setup").
I see that VS Code named the id as the-setup, so in the markdown's table of contents, I write [The Setup](#the-setup). Now the table of content hyperlink works in VS Code. Caveat: it might not work in other Markdown tools if they render a different HTML element ID!
Another shortcut now available in VS Code (1.70 July 2022), is that markdown can autocomplete the header ID. So you just type #, and it will list the valid IDs:
How do I create a link to a part of long webpage on another website that I don't control?
I thought you could use a variant of the #partofpage at the end of my link. Any suggestions?
Just append a # followed by the ID of the <a> tag (or other HTML tag, like a <section>) that you're trying to get to. For example, if you are trying to link to the header in this HTML:
<p>This is some content.</p>
<h2><a id="target">Some Header</a></h2>
<p>This is some more content.</p>
You could use the link Link.
Create a "jump link" using the following format:
http://www.example.com/somepage#anchor
Where anchor is the id of the element you wish to link to on that page. Use browser development tools / view source to find the id of the element you wish to link to.
If the element doesn't have an id and you don't control that site then you can't do it.
That is only possible if that site has declared anchors in the page.
It is done by giving a tag a name or id attribute, so look for any of those close to where you want to link to.
And then the syntax would be
text
In case the target page is on the same domain (i.e. shares the same origin with your page) and you don't mind creation of new tabs (1), you can (ab)use some JavaScript:
see tenth paragraph on another page
Trivia:
var w = window.open('some URL of the same origin');
w.onload = function(){
// do whatever you want with `this.document`, like
this.document.querySelecotor('footer').scrollIntoView()
}
Working example of such 'exploit' you can try right now could be:
javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('https://stackoverflow.com/questions/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')
If you enter this into location bar (mind that Chrome removes javascript: prefix when pasted from clipboard) or make it a href value of any link on this page (using Developer Tools) and click it, you will get another (duplicate) SO question page scrolled to the footer and footer painted red. (Delay added as a workaround for ajax-loaded content pushing footer down after load.)
Notes
Tested in current Chrome and Firefox, generally should work since it is based on defined standard behaviour.
Cannot be illustrated in interactive snippet here at SO, because they are isolated from the page origin-wise.
MDN: Window.open()
(1) window.open(url,'_self') seems to be breaking the load event; basically makes the window.open behave like a normal a href="" click navigation; haven't researched more yet.
The upcoming Chrome "Scroll to text" feature is exactly what you are looking for....
https://github.com/bokand/ScrollToTextFragment
You basically add #targetText= at the end of the URL and the browser will scroll to the target text and highlight it after the page is loaded.
It is in the version of Chrome that is running on my desk, but currently it must be manually enabled. Presumably it will soon be enabled by default in the production Chrome builds and other browsers will follow, so OK to start adding to your links now and it will start working then.
Edit: It's been implemented in Chrome. See https://chromestatus.com/feature/4733392803332096
You can NOW...
As of Chrome release 81 (Feb 2020), there is a new feature called Text Fragments. It allows you to provide a link that opens at the precise text specified (with that text highlighted).
At the moment, it works in Edge, Chrome and Opera but not in Firefox, Safari or Brave. (See note 6 at bottom for more)
For security reasons, the feature requires links to be opened in a noopener context. Therefore, make sure to include rel="noopener" in your anchor markup or add noopener to your Window.open() list of window functionality features.
You create the link to your desired text by appending this string to the end of the URL:
/#:~:text=
and providing the percent-encoded search string thus:
/#:~:text=String%20to%20focus%20on
Here is a working example:
https://newz.icu/#:~:text=Google%20surveillance%20increases
Notes:
Test the above link in Chrome or Opera only
In the above example, note that the text string is in a div that is normally hidden on page load - so in this example it is being displayed despite what would normally happen. Useful.
Recent versions of Chrome also include a new option when you Right-Click on selected text: Copy link to highlight. This will auto-create the direct-to-text link for you (i.e. it automatically appends the /#:~:text= to the text you highlighted) and place it in the clipboard - just paste it where desired.
Suppose you want to highlight an entire block of text? The Text Fragments feature allows specifying a starting%20phrase and an ending%20phrase (separated by a comma), and it will highlight all text in between:
https://newz.icu/#:~:text=Dr.%20Mullis,before%20now
Note the comma between Mullis and before
web.dev article about Text Fragments
CanIUse status of Text Fragments
PS - Please forgive choice of example website. It simply had the desired
elements required for the demonstration. Hoping we can focus on function
rather than content.
First off target refers to the BlockID found in either HTML code or chromes developer tools that you are trying to link to. Each code is different and you will need to do some digging to find the ID you are trying to reference. It should look something like div class="page-container drawer-page-content" id"PageContainer"Note that this is the format for the whole referenced section, not an individual text or image. To do that you would need to find the same piece of code but relating to your target block. For example dv id="your-block-id" Anyways I was just reading over this thread and an idea came to my mind, if you are a Shopify user and want to do this it is pretty much the same thing as stated.
But instead of
> http://url.to.site.example/index.html#target
You would put
> http://example.com/target
For example, I am setting up a disclaimer page with links leading to a newsletter signup and shopping blocks on my home page so I insert https://mystore-classifier.com/#shopify-section-1528945200235 for my hyperlink.
Please note that the -classifier is for my internal use and doesn't apply to you. This is just so I can keep track of my stores.
If you want to link to something other than your homepage you would put
> http://mystore-classifier.example/pagename/#BlockID
I hope someone found this useful, if there is something wrong with my explanation please let me know as I am not an HTML programmer my language is C#!
It's now possible to create an "anchor" link that goes to a specific part of any webpage in most browsers in a few different ways.
All of them will create a link with an #anchor at the end, where "anchor" is the thing that you want to navigate to. The browser will interpret the part of the URL after the # to scroll to a specific part of the page.
Here are 3 ways to create a url like this:
Using an existing anchor. Perhaps there will be one in the URL as you scroll down the page. If not, look around the page for a header that has a little link icon to the left of it and click it to update the browsers navigation url.
Using any html element's id property or the name or id on an ("anchor") element. The other answers explain this quite well. You will have to open the developer console and inspect the part of the page to find an id (and you may not find one). It's a little different on each browser, but here's how to inspect an element in Chrome.
Using a text snippet to highlight part of the page.
Basically, html tag can have id="abc" as shown below:
<div id="abc">test</div>
<p id="abc">test</p>
<span id="abc">test</span>
<a id="abc">test</a>
And, "<a>" tag can also have name="abc" as shown below:
<a name="abc">test</a>
Then, you can use the id and name values "abc" with "#" in urls as shown below to go to the specific part of a page:
https://www.example.com/#abc
https://www.example.com/index.html#abc
Then, you can put the urls above in "<a>" tag to create the links to id="abc" and name="abc" as shown below:
test
test
And, if you want to go to the specific part of the same page, you can only put the id and name values "abc" with "#" in "<a>" tag to create the links to id="abc" and name="abc" as shown below:
<!-- Go to the specific part of the same page -->
test
<div id="abc">test</div>
<!-- Go to the specific part of the same page -->
test
<a name="abc">test</a>
How do I create a link to a part of long webpage on another website that I don't control?
I thought you could use a variant of the #partofpage at the end of my link. Any suggestions?
Just append a # followed by the ID of the <a> tag (or other HTML tag, like a <section>) that you're trying to get to. For example, if you are trying to link to the header in this HTML:
<p>This is some content.</p>
<h2><a id="target">Some Header</a></h2>
<p>This is some more content.</p>
You could use the link Link.
Create a "jump link" using the following format:
http://www.example.com/somepage#anchor
Where anchor is the id of the element you wish to link to on that page. Use browser development tools / view source to find the id of the element you wish to link to.
If the element doesn't have an id and you don't control that site then you can't do it.
That is only possible if that site has declared anchors in the page.
It is done by giving a tag a name or id attribute, so look for any of those close to where you want to link to.
And then the syntax would be
text
In case the target page is on the same domain (i.e. shares the same origin with your page) and you don't mind creation of new tabs (1), you can (ab)use some JavaScript:
see tenth paragraph on another page
Trivia:
var w = window.open('some URL of the same origin');
w.onload = function(){
// do whatever you want with `this.document`, like
this.document.querySelecotor('footer').scrollIntoView()
}
Working example of such 'exploit' you can try right now could be:
javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('https://stackoverflow.com/questions/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')
If you enter this into location bar (mind that Chrome removes javascript: prefix when pasted from clipboard) or make it a href value of any link on this page (using Developer Tools) and click it, you will get another (duplicate) SO question page scrolled to the footer and footer painted red. (Delay added as a workaround for ajax-loaded content pushing footer down after load.)
Notes
Tested in current Chrome and Firefox, generally should work since it is based on defined standard behaviour.
Cannot be illustrated in interactive snippet here at SO, because they are isolated from the page origin-wise.
MDN: Window.open()
(1) window.open(url,'_self') seems to be breaking the load event; basically makes the window.open behave like a normal a href="" click navigation; haven't researched more yet.
The upcoming Chrome "Scroll to text" feature is exactly what you are looking for....
https://github.com/bokand/ScrollToTextFragment
You basically add #targetText= at the end of the URL and the browser will scroll to the target text and highlight it after the page is loaded.
It is in the version of Chrome that is running on my desk, but currently it must be manually enabled. Presumably it will soon be enabled by default in the production Chrome builds and other browsers will follow, so OK to start adding to your links now and it will start working then.
Edit: It's been implemented in Chrome. See https://chromestatus.com/feature/4733392803332096
You can NOW...
As of Chrome release 81 (Feb 2020), there is a new feature called Text Fragments. It allows you to provide a link that opens at the precise text specified (with that text highlighted).
At the moment, it works in Edge, Chrome and Opera but not in Firefox, Safari or Brave. (See note 6 at bottom for more)
For security reasons, the feature requires links to be opened in a noopener context. Therefore, make sure to include rel="noopener" in your anchor markup or add noopener to your Window.open() list of window functionality features.
You create the link to your desired text by appending this string to the end of the URL:
/#:~:text=
and providing the percent-encoded search string thus:
/#:~:text=String%20to%20focus%20on
Here is a working example:
https://newz.icu/#:~:text=Google%20surveillance%20increases
Notes:
Test the above link in Chrome or Opera only
In the above example, note that the text string is in a div that is normally hidden on page load - so in this example it is being displayed despite what would normally happen. Useful.
Recent versions of Chrome also include a new option when you Right-Click on selected text: Copy link to highlight. This will auto-create the direct-to-text link for you (i.e. it automatically appends the /#:~:text= to the text you highlighted) and place it in the clipboard - just paste it where desired.
Suppose you want to highlight an entire block of text? The Text Fragments feature allows specifying a starting%20phrase and an ending%20phrase (separated by a comma), and it will highlight all text in between:
https://newz.icu/#:~:text=Dr.%20Mullis,before%20now
Note the comma between Mullis and before
web.dev article about Text Fragments
CanIUse status of Text Fragments
PS - Please forgive choice of example website. It simply had the desired
elements required for the demonstration. Hoping we can focus on function
rather than content.
First off target refers to the BlockID found in either HTML code or chromes developer tools that you are trying to link to. Each code is different and you will need to do some digging to find the ID you are trying to reference. It should look something like div class="page-container drawer-page-content" id"PageContainer"Note that this is the format for the whole referenced section, not an individual text or image. To do that you would need to find the same piece of code but relating to your target block. For example dv id="your-block-id" Anyways I was just reading over this thread and an idea came to my mind, if you are a Shopify user and want to do this it is pretty much the same thing as stated.
But instead of
> http://url.to.site.example/index.html#target
You would put
> http://example.com/target
For example, I am setting up a disclaimer page with links leading to a newsletter signup and shopping blocks on my home page so I insert https://mystore-classifier.com/#shopify-section-1528945200235 for my hyperlink.
Please note that the -classifier is for my internal use and doesn't apply to you. This is just so I can keep track of my stores.
If you want to link to something other than your homepage you would put
> http://mystore-classifier.example/pagename/#BlockID
I hope someone found this useful, if there is something wrong with my explanation please let me know as I am not an HTML programmer my language is C#!
It's now possible to create an "anchor" link that goes to a specific part of any webpage in most browsers in a few different ways.
All of them will create a link with an #anchor at the end, where "anchor" is the thing that you want to navigate to. The browser will interpret the part of the URL after the # to scroll to a specific part of the page.
Here are 3 ways to create a url like this:
Using an existing anchor. Perhaps there will be one in the URL as you scroll down the page. If not, look around the page for a header that has a little link icon to the left of it and click it to update the browsers navigation url.
Using any html element's id property or the name or id on an ("anchor") element. The other answers explain this quite well. You will have to open the developer console and inspect the part of the page to find an id (and you may not find one). It's a little different on each browser, but here's how to inspect an element in Chrome.
Using a text snippet to highlight part of the page.
Basically, html tag can have id="abc" as shown below:
<div id="abc">test</div>
<p id="abc">test</p>
<span id="abc">test</span>
<a id="abc">test</a>
And, "<a>" tag can also have name="abc" as shown below:
<a name="abc">test</a>
Then, you can use the id and name values "abc" with "#" in urls as shown below to go to the specific part of a page:
https://www.example.com/#abc
https://www.example.com/index.html#abc
Then, you can put the urls above in "<a>" tag to create the links to id="abc" and name="abc" as shown below:
test
test
And, if you want to go to the specific part of the same page, you can only put the id and name values "abc" with "#" in "<a>" tag to create the links to id="abc" and name="abc" as shown below:
<!-- Go to the specific part of the same page -->
test
<div id="abc">test</div>
<!-- Go to the specific part of the same page -->
test
<a name="abc">test</a>
Is there a way to bookmark or link to an HTML page (which I am not author of) without having an anchor in the HTML code?
I want the page to get scrolled down to a particular section when accessed from a bookmark or hyperlink even if there is no anchor tag in the destination page.
Note: the destination page has an anchor tag as "foo" then bookmarking like http:/...hello.html#foo will not only take the user to hello.html, but also automatically scroll down to the section of the page so that the anchor tag "foo" is at the top of the screen.
It's the year 2020, there is a draft by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the following to the hash
#:~:text=<Text To Link to>
Working example on Chrome Version 81.0.4044.138:
Click on this link Should take you to another answer page and highlight the link there
You only need to have the appropriate id attribute on an element to use it like a bookmark...
Test
...
<p id="test">Hello world</p>
See the W3C specification: Anchors with the id attribute
Older specifications also allowed navigation based on the name attribute, but this attribute has been removed from the latest HTML specifications (but if there is a name attribute it may be used in the same way as an id attribute).
If there is no id or name attribute where you wish to navigate to, there is no way of navigating to the specific point within the page, only to the page itself. In this case you may want to quote the pertinent information and supply a citation with a link or perhaps ask the author if they would add an id.
This is a copy of #AbderrahmaneTAHRIJOUTI's answer but updated with some extra info.
It's the year 2020, and now there is a draft by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the percent-encoded quote to the URL like this:
#:~:text=<percent-encoded-text-quoted-from-site>
For example, this link highlights the syntax from the spec.
One can also highlight multiple sections as well by chaining query parameters with ampersand (&):
#:~:text=<quote-1>&text=<quote-2>
For example, see these highlights to the spec.
Even ranges can be set in case of a longer quote (at least in Chrome):
#:~:text=<begin-text>,<end-text>
For example, highlighting an entire paragraph in the spec.
For some reason, in Chrome 89.0.4389.90 the above links may only work if one (1) clicks on them, (2) goes to the address bar by clicking in it or by F6, and (3) hits Enter. Not sure why this is when Google search constantly offers links like this in the results which work out of the box (e.g., a link to Azure Vault)
Support
It's still spotty, but most major browsers support it (except for Firefox...). To check the current status of adoption, check out https://caniuse.com/?search=%3A~%3A
There is a relatively recent W3C Working Group Note on Selectors and States which would allow linking to selected text.
Here is a Firefox webextension partially implementing the link format (allowing you to "create" a link, based on the selection, as well as, obviously, open such a link, highlighting the correct selection):
https://addons.mozilla.org/en-US/firefox/addon/precise-links/
As of 2019 it seems to work fine.
Its source code is available here.
The Firefox extension "Web Marker" does exactly what you want.
https://addons.mozilla.org/en-US/firefox/addon/web-marker/
You can find its source code and documentation here:
http://liveurls.mozdev.org/tech.html
If the page supports being embedded as an iframe, you can link to a document that embedds it and then autoscrolls the document. The issue is that we can't get the height of the page, so instead we just hijack the scrolling event to make the page taller once we approach the bottom:
data:text/html,<html><body style="margin:0; padding:0;"><iframe id='i' src='http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0' width=100% frameborder=0 margin=0 scrolling=no style="height: calc(100vh + 170px + 200px);"></iframe></body><script>window.scrollTo(0, 170);window.onscroll = function(e) {if((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200) {document.getElementById('i').style.height = window.innerHeight + window.scrollY + 200;}};</script></html>
Modern browsers will try to scroll to an element with an ID that matches the hash part of the URL (i.e. if you have <h1 id="foo">, then #foo would get you there).
If everything else fails, you can use jQuery. Get the hash part from the document URL with window.location.hash. You can then interpret that in JavaScript to determine an element in the page.
Use scrollTop to move there (see Scroll to an element with jQuery).
See also: https://api.jquery.com/scrolltop/
I must be not getting something, but sadly your solution is not working for me... The attached document's jargon confuses me a bit as the dilettant I am. :-(
Though, it gave a nice clue... Hence, I found this link with a simpler way to do this (in my case, link to a specific part of a text in some other author's blog post without ID tags):
Share or link to quotes and text in Chrome
https://support.google.com/chrome/answer/10256233?hl=en-GB&co=GENIE.Platform%3DDesktop
To create a link that opens directly to highlighted text:
On your computer, open Chrome.
Go to a page with text that you want to share.
To highlight the text that you want to share, click and hold, then drag your mouse.
To open the context menu, right-click on the highlighted text.
Select Copy link to highlight.
If you can’t select this option, this feature may not work for the selected content.
Paste the link anywhere; for example, into an email or message thread.
Tip: To remove the highlight from the text in the linked content, right-click the highlighted text and select Remove highlight.
If you want to link to a specific part of a PDF file online, this solution also worked for me:
https://helpx.adobe.com/acrobat/kb/link-html-pdf-page-acrobat.html#:~:text=Open%20a%20PDF%20file%20to,end%20of%20the%20link's%20URL.
Just posting this in case someone is still lost as I was.
Cheers!
The AnchorMe addon from Firefox just solved this for me. Ctrl + double click on your desired destination and voilà.