From the Chrome DevTools I cannot find any tags to differentiate this highlighted text segment from the rest text. How can I make the highlighted text(mechanism for) an HTML element? Three for this one.
More specifically, for illustration, I want to change this HTML snippet:
. The fragment directive is a mechanism for URLs to specify instructions directed to the browser rather than the document. It is meant to avoid direct interaction with author script, so that future user agent instructions can be added without fear of introducing breaking changes to existing content. One potential example of such future additions could be translation hints.
to this one:
. The fragment directive is a <span class="custom_element">mechanism for</span> URLs to specify instructions directed to the browser rather than the document. It is meant to avoid direct interaction with author script, so that future user agent instructions can be added without fear of introducing breaking changes to existing content. One potential example of such future additions could be translation hints.
according to the fragment directive: :~:text=directive%20is%20a-,mechanism%20for,-URLs%20to%20specify
Related
Is there a good practice or advice/requirement that every HTML element has an id or/and class specified (Including elements that wouldn't be accessed from JavaScript, for example)?
I would say that it is not necessary for these attributes to be present, but I see a number of situations when there might be a requirement to do that.
For example, another developer wants to extend the functionality of the site without changing the layout or the content - just extending existing/replacing JavaScript (or supplying the plugin, without even knowing the HTML of the final page).
I can see such a scenario in developing reusable components, for example, where an author of the component can't foresee all the use cases upfront but wants to protect himself from constant bug fixing after the release.
Another benefit would be the readability of the final HTML. I learn from reading the rendered HTML more than from more formal reading. A meaningful id often helps.
It would be nice to have an opinion of an experienced web developer or an reference to some guide lines/best practices.
In my opinion i would put the Id or class for every element in my website just so that the code is a little more organized and you can see what the (for example) div is for right away in the code by reading the class. I also agree with your ideas.
Sorry for the vague question name - didn't know how to phrase it.
I have built a PHP engine to parse web pages and extract phone numbers, addresses etc.
This is going to be used by clients to populate an address book by simply entering a new contacts web address.
The problem I am having is useability:
At the moment the script just adds each item (landline number, fax etc) to a different list box and the user picks the correct one - from a useability standpoint this is hard work (how do you know which is the correct contact number without looking at the site)
so my question (finally!)
How would achieve the functionality of
http://bartaz.github.io/sandbox.js/jquery.highlight.html
On someone else website (I have no problem writing this functionality).
FOR CLARITY**
I want to show someone elses site (their contact page for example) on my site BUT I want to highlight items I have found (so for example add a tag around a phone number my php script has found)
I am aware that to display a website not on your domain an iFrame would be used - but as I need to alter the page content this is useless.
I also contemplated writing a bookmarklet that could be run on that page - but that means re-writing my parsing engine in javascript and exposing some of my tricks to make it accurate.
So I am left with pulling the page by cURL and then trying to match up javascript files, css files etc. that have relative URLs
Does anyone know how best to achieve this - and any pitfalls that might befall me.
I have tried using simple html dom parser - but it is tricky to get consistency and I also dont know how having two sets of tags, body tags etc. would affect sites.
If anyone has managed this before and could point me to the tools / general methods they used I would be eternally grateful!
PLEASE NOTE - I am very proficient with google and stack-overflow and have looked there first!
The ideal HTML solution
The easiest way to work around the relative paths for an arbitrary site would be to use the base href tag to specify the default relative location (just use the url up to the filename, such as <base href="http://www.example.com/path/to/" /> for the URL http://www.example.com/path/to/page. This should go at the top of the head block.
Then you can alter the site simply by finding the relative parts and wrapping them in your own tag, such as a span. For the formatting of these tags, the easiest way would be to add a style attribute, but you could also try to insert a <style> tag in the <head>.
Of course, you'll also need to account for badly made webpages without <html>, <head> or <body> tags. You could either wrap the source in a new set of these tags, or just put in your base and style tags, hoping that the browser will work out what to do.
You probably also want to make this interactive, so you should also wrap them with some kind of link, and ideally you'll insert some javascript to handle their actions by ajax. You should also insert your own header at the top of the page, probably floating at the top, so that they know they're using your tool. Just keep in mind that some advanced pages might then conflict with your alterations (though for those cases you could have a link saying 'is this page not displaying correctly?' to take the user to your original basic listbox page as a backup).
The more robust solution
Clearly there are a lot of potential problems with the above, even though it is ideal. If you want to ensure robustness and avoid any problems with custom javascript and css on the page you're trying to alter, you could instead use a similar algorithm to that used in text based browsers such as lynx to reformat the page consistently. Then you can apply your algorithm to highlight the relevant parts of the page, and you can apply your own formatting as well without risk of it not displaying correctly. This way you can frame it really well and maintain your interface.
The problem with this is that you lose the actual look of the original page, but you should keep the context around the numbers and addresses which is the important thing. You would also then be able to use some dynamic javascript to take the user to each number and address consecutively to improve the user experience. Basically, this is rigorous and gives you complete control over the user experience, but you lose the original look of the website which may or may not confuse your users.
Personally, I'd go for the second option, but I'm not sure if anyone's created such a parser before. If not, the simplest thing you could do would be to strip the tags to get it as plain text. The next simplest would be to convert it into some simple text markup format like markdown, then convert it back into html. That way, you'd keep some basic layout such as headings, italicised and bold text, etc.
You definitely don't want to have nested body tags. It might work, but it'll probably mess up your formatting and be inconsistent across browsers.
Here's a resource I found after a quick Google search:
https://github.com/nickcernis/html-to-markdown
There are other html to markdown scripts, but this was the more robust from the few I found. I'm still not sure though whether it can handle badly formatted pages or ones with advanced formatting, try it out yourself.
There are quite a few markdown to html converters though, in fact you could probably make a custom converter yourself quite easily to accommodate your personal needs.
When analyzing a webpage, I usually open these js files one after another and then read the source code to determine which file added a certain portion of html in the final rendered page. Is there an easy way / tool to solve this problem?
No, there is not a tool to do such a thing. Understanding the code yourself or searching for specific key phrases in the HTML you're trying to source (such as a class name or tag name or piece of text) is the typical method.
It could work to grep for the common ways that the DOM is modified (.innerHTML property, .appendChild(), .insertBefore, etc... if it's plain javascript) or similar methods in whatever library is being used.
Partially, you may use Firebug in Mozilla and, viewing the HTML tab, right click some tags and tick "break on child addition/removal". And then reload the page. Javascript execution will pause at any changing of DOM inside the chosen element.
I'm looking for good/semantic/passing-validation way to indicate my links, that are used as hooks for javascript.
link
As I understand "rel" is more about relationships between documents. Also the "data-lang" (from here) doesn't feel to be a good enough solution.
Thanks a lot in advance!
You may use the class-attribute, or as of HTML5, the custom data-attributes.
If the link is an "enhanced" link, that will do pretty much the same that the usual link would do but in a more "user-friendly" way – such as a navigation link, that, when JavaScript is enabled on the page, will reload only the "content" part of the page and update the address of the page with HTML5 History API – then I would just use a semantic class, actually describing the links, such as "navigation".
In case they are JavaScript triggers and they wouldn't be functioning when JavaScript is off – I would suggest not using the a element at all. From the spec:
If the a element has an href attribute, then it represents a hyperlink
(a hypertext anchor). If the a element has no href attribute, then the
element represents a placeholder for where a link might otherwise have
been placed, if it had been relevant.
I believe that in most cases "action triggers" aren't really fitting the description of the use of an a element. Therefore, I would suggest using a span element, that would be styled in a way that would suggest that it's a trigger for interaction. Quoting the spec again:
The span element doesn't mean anything on its own, but can be useful
when used together with the global attributes, e.g. class, lang, or
dir. It represents its children.
Another suggestion regarding these triggers: use this line of code (the very first thing after the <title> in the head of your document) in order to give your html element a class js:
<script>document.documentElement.className = 'js';</script>
Then in your CSS do this:
/*
assuming that this is your mark-up for the pseudo-links:
<span class="action-trigger">Beautiful transition</span>
*/
.action-trigger {
display:none;
visibility:hidden;
}
.js .action-trigger {
display:inline;/* or whatever suits your styling of these elements */
visibility:visible;
}
This way, when JavaScript is disabled, users won't see "pseudo-links" that would be calling for action, but wouldn't actually work.
UPD. Semantically, in certain cases, you could also use form submit elements, such as <button>: as an example – you may trigger form submission – all the "voting"/"liking"/"deleting" functionality falls into this category. Which, when JS is disabled would really submit that form, but when JS is enabled that would trigger an action on the side of your back-end API.
In the project I work on I've recently moved from developing backend (i.e. non-web) servers to web-related things. In the HTML code I've found the following thing all over the place:
<a href='#'>some link</a>
Then some JS is attached to the click event of <a> element.
Does this sole hash has any special meaning? I understand how the href='#some_id' tells the browser to scroll to element with ID = some_id. But href='#' doesn't work that way, right?
If it's all about creating a clickable piece of text, why not simply use a <span>?
Exactly. What you see here is somehow bad design (although it is quite common to use href="#").
What it actually will do is jumping to the top of the page if the default action is not prevented.
Much better would be to
use a <button> and style it accordingly (maybe even only inserted via JavaScript)
or let the link point to some real resource (that triggers some action on the server side) and attach the JavaScript event handler to do this (or similar) action on the client and prevent following the link (keyword: unobtrusive JavaScript).
It also depends on whether the site is meant to run with disabled JavaScript. If yes, then such a link (but also a button) will not work.
But in any case, from a semantic point of view, using a link solely to have something "clickable" is wrong.
A hash on its own links to the top of the page.
This is sometimes used for exactly this purpose -- ie a "Back to top" link, but more typically this kind of link is used in conjunction with a Javascript click even which returns false, and thus negates the action of the href.
In this context, it is used in this way for the following reasons:
An <a> tag may be semantically correct -- ie the item to be clicked on is acting as a link; ie to load more content, or open a popup, etc, even though it is using Javascript for it's functionality.
Using an <a> tag also means that the element will be styled in the same way as other <a> tags on the site. This includes :hover effect styles, etc. Note that IE6 only supports :hover on <a> elements, and nothing else, meaning that if the site was designed to work in IE6 or still needs to support it, then you can't replicate this functionality with other tags. This was a very good reason to use <a> tags for this feature in the past, even if it wasn't appropriate semantically. These days it's less of an issue. Even in modern browsers, using <a> for these items is still useful for cutting down on replicated stylesheets if you want them to look the same as other links. Links also have a few other special features which may be difficult to replicate with other elements, such as being in the tab index sequence, etc.
HTML requires that an <a> tag has a href attribute in order for the element to be rendered as a link, so the hash is used as a minimal value for this. In addition, having a hash in the href attribute means that the link won't cause any nasty unexpected consequenses if the user turns off Javascript or if the developer forgets to return false;. By contrast, having an empty string would cause it to reload the page, which is unlikely to be what you want if you have just run some javascript. It is however also common to have the link point to a valid URL, which would be run if Javascript was switched off; this is a good way to have a fall-back mechanism for your site. But it isn't always appropriate, and clearly isn't the intention here.
Given that the item is just triggering a click event in Javascript, there's no reason why you couldn't use any other element for this. You could very easily use a <span> (or even better, a <button>) instead, but the above points should show that there's nothing wrong with using an <a> tag.
Hope that helps.
Does this sole hash has any special meaning?
It links to the top of the page
Why not simply use a <span>?
It won't be in the focus order
It won't take on the default styles of something that should be clicked
A <button> would be better than a span. Something built on top of a server side alternative would be best.
Because you want the browser to style this link the same as all other links, and without having to specify (e.g. with a class) that "you know, I want this to look like a link even though it's technically not". That's really not good for maintainability.
Because:
the styling is done for you;
the link is semantically still a link, even if it starts off with a no-op href.
Rhetorical question:Can you explain why you think a span is more appropriate than a for a link?
Addendum:Something like a button or another dynamic element may be better suited here, but taking a non-link span of text and pretending that it's a link is worse.