I was reading sscce.org/ and without any particular reason I checked its HTML source. I found there are many <a> links without href attribute, like this:
<h2><a id='eg' rel="nofollow">Example</a></h2>
Now from HTML 5 specification we know that this is allowed (for example if link is completed later through JavaScript code), it's also allwed in HTML 4.01 (thanks to this post for references). In short it's useful if a link may be placed there but for any reason it has not been (server side) or it has been removed (client side). OK it's clear as it's also well summarized here.
Another (kind of) subtle difference is styling: even if link isn't rendered as link (by default underline and hand cursor) it'll inherit custom CSS styles for links such as:
a {
font-weight: bold;
}
Question: what I don't understand is the reason it's used in that page. There isn't any client-side JavaScript to add/remove href for that links and (more or less reasonably) I suppose such simple page is plain HTML and it's not generated server side. That said...why that links? Is there any other use I'm missing? Is it something related to SE?
Check http://sscce.org/#eg and you will now.
It was an old way to create links to a specific part of the page. Back then, you couldn't reference any element on the page, just anchors. Now it works the same with divs having an id.
Related
I am new to HTML/CSS and in this project intend to create a simple web page in such a way that each page links to three other HTML pages.
<div id="mySidenav" class="sidenav">
Home Page
about
Projects
Contact
</div>
My questions:
Is it possible to link to other pages other than the page itself via
programming (to write if page_name == link.html then exclude it from
the links)? e.g., I want to tell my HTML that if I am in the "about"
page, don't add the link to this page.
If that is possible, how I can fill the self-link button without using JS.
Yes, it possible. First, you have to know about PHP. Then get the current page url by $_SERVER['REQUEST_URI'].
IF the current page url is matched with your link like about.html then ignore the link for the same current page.
Otherwise, you can create a separate page with ignoring link. Like when you at about page ignore that link.
The short answer is no. HTML isn't a programming language and has no flow control or logic capabilities. You could achieve this via server-side rendering (express or php or whatever) or via static site generation (gatsby, etc.).
Otherwise you could (of course) modify the nav on each page accordingly, but I understand and agree that that's less than ideal.
This is a bit of a stretch, but you could link to homePage.html#homePage and use the CSS :target pseudo-selector to hide the current item or give it special css treatment, but this is sort of a brittle hack and it will break down if the fragment (#homePage, #projects, etc.) isn't present in the browser's url.
Ok, I was able to link a specific section of a page from another page, but for some reason none of the CSS is loading with the page being referenced. What can be causing this?
In hopes of providing context, this is the code I'm using to reference (which works only to link the section correctly, but no styling in the entire page is shown)
(Page link)
Dog Food
(Section being referenced in different page)
<a name="dog-food-a" id="dog-food-a">Food</a>
I was able to acquire the referencing information from the following link, but I'm having trouble finding somebody else with the same 'lack of css' issue.
https://stackoverflow.com/a/2835151/2488264
Thanks in advance for any help! :)
The id tag specifies the ID of an element, not to what element your doing an anchor tag.
Having that in mind, it is always http://mypage.com/this.html#my-anchor
are you trying to remote accesss that link and section?
if your answer is YES i should say you have to load entire target page Or load <link> tag of target page Or use same CSS file for both pages
if I dont get the right point forgive me
I want my website to become eligible for Google+ Direct Connect.
So after googling a bit I found this Google Support page, which has since been edited.
View Google Support page providing these instructions via WayBack Machine:
You can directly link your website by inserting a small snippet of
code on your website and then listing that website as your Google+
page's primary link in the About section of the profile. For example,
if your Google+ page’s primary link is set to www.pagewebsite.com,
you can create a bidrectional link by placing the following code snippet in the <head> tag of the site’s HTML:
<a href="https://plus.google.com/{+PageId}" rel="publisher" />
What gives? An anchor tag within the head?
I thought only title/meta/link tags are allowed in the head.
Is it legal to place that above snippet in the head tag?
I think there's an error in Google's documentation and this should be a <link>-tag, like this:
<link href="https://plus.google.com/{+PageId}" rel="publisher" />
You can test it on https://developers.google.com/structured-data/testing-tool/ if it works. Include the <link>-tag into your website and see what Google detects with this tool. There's a section "Publisher" where you can see if Google detects the correct information.
I'm using <link> on my sites and Google detects the correct values.
An a element inside head is of course invalid according to any HTML specification. I have no idea why Google tells you to do so, but presumably their software actually looks for such tags.
What happens in practice in browsers is that the a tag implicitly closes the head element (you can see this if you look at the document tree in Developer Tools in a browser). This isn’t as bad as it sounds, since the rest of elements meant to be in the head will still be processed normally. For example, even a title element works when placed inside body. To tell truth, the division of a document into head and body is just a formality.
The tag <a href="https://plus.google.com/{+PageId}" rel="publisher" /> will be taken as a start tag only, potentially causing naughty surprises, since the start of the document will then be inside a link (which might extend to the end of the document!). Only if the page were served with an XML content type would the tag be taken as “self-closing”. So if you have been forced into using such an element, at least write it with a real end tag;
It will still be bad for accessibility and usability, since empty links may still participate in tabbing order etc.
Using link tag is the right (and valid!) way to go in the header:
<link href="https://plus.google.com/{+PageId}" rel="publisher" />
If you stick with the verbatim anchor tag when following the instructions (Link your brand page to your website), then you'll be setting yourself up for something to blow up down the road.
We just experienced it, in fact. It seems starting with iOS 8.x, mobile Safari will see this anchor tag and move it (along with the code below it!) to the body. This broke a smart banner we had in place.
We switched to using a link tag and verified that Google still detects the correct values.
I'm pretty sure that many people have thought of this, but for some reason I can't find it using Google and StackOverflow search.
I would like to make an invisible link (blacklisted by robots.txt) to a CGI or PHP page that will "trap" malicious bots and spiders. So far, I've tried:
Empty links in the body:
<a href='/trap'><!-- nothing --></a>
This works quite nicely most of the time, with two minor problems:
Problem: The link is part of the body of the document. Even though it is pretty much unclickable with a mouse, some visitors still inadvertently hit it while keyboard-navigating the site with Tab and Enter. Also, if they copy-paste the page into a word processor or e-mail software, for example, the trap link is copied along and sometimes even clickable (some software don't like empty <a> tags and copy the href as the contents of the tag).
Invisible blocks in the body:
<div style="display:none"><a href='/trap'><!-- nothing --></a></div>
This fixes the problem with keyboard navigation, at least in the browsers I tested. The link is effectively inaccessible from the normal display of the page, while still fully visible to most spider bots with their current level of intelligence.
Problem: The link is still part of the DOM. If the user copy-paste the contents of the page, it reappears.
Inside comment blocks:
<!-- <a href='/trap'>trap</a> -->
This effectively removes the link from the DOM of the page. Well, technically, the comment is still part of the DOM, but it achieves the desired effect that compliant user-agents won't generate the A element, so it is not an actual link.
Problem: Most spider bots nowadays are smart enough to parse (X)HTML and ignore comments. I've personally seen bots that use Internet Explorer COM/ActiveX objects to parse the (X)HTML and extract all links through XPath or Javascript. These types of bots are not tricked into following the trap hyperlink.
I was using method #3 until last night, when I was hit by a swarm of bots that seem to be really selective on which links they follow. Now I'm back to method #2, but I'm still looking for a more effective way.
Any suggestions, or another different solution that I missed?
Add it like you said:
<a id="trap" href='/trap'><!-- nothing --></a>
And then remove it with javascript/jQuery:
$('#trap').remove();
Spam bots won't execute the javascript and see the element, almost any browser will remove the element making it impossible to hit with tabbing to it
Edit: The easiest non-jQuery way would be:
<div id="trapParent"><a id="trap" href='/trap'><!-- nothing --></a></div>
And then remove it with javascript:
var parent = document.getElementById('trapParent');
var child = document.getElementById('trap');
parent.removeChild(child);
this solution seems to work well for me, luckily i have bookmarked it. I hope it helps you as well.
you can create a hidden link like this and put it at the very top left of your page and to prevent regular users from accessing it too easily you can use css to lay a logo image over this image.
<img src="images/pixel.gif" border="0" alt=" " width="1" height="1">
if you are interested in setting up how to blacklist the bots refer to this link for detailed explaination of howto.
http://www.webmasterworld.com/apache/3202976.htm
I use Delphi 2010 . I am using twebbrowser to load up HTML source and view it.
Now I want to click on an area (background, links, etc) in the web browser and get the styling in the CSS file that styles the HTML.
For example: I click on the H3 region and I want to be taken to the h3{ color: white; } in the CSS.
Any help at all is much appreciated; this is hard for me to figure out.
You will have to handle the parsing of the source yourself to make this work. Because the CSS entry can be in another file or even files, this can be tricky. I would start by looking at the DIHtmlParser component which can help greatly here. You will have to parse the main document, and each identified CSS file to locate the proper file/position to jump too. I would also look at tEmbeddedWB as an alternative over TWebBrowser as it supplies much more control over the embedded browser as well as TRichEditWB which works well for viewing syntax highlighted HTML source.
Edit: You still have to parse the CSS and HTML to build an index of each tag and its CSS location. When your editing the HTML, you have to parse the tag your cursor is currently on or in, compare that to the index you parsed earlier, to display the CSS attributes in effect. Keep in mind that CSS cascades and nests, so your index will most likely be a tree, and your tag will be relative in that tree.