Can I add a link to heading in HTML?
Something like this
<h2 href="/ingredients">illness</h2>
Somehow it seems to work on simple text only.
(Almost) All elements may contain other elements. So the following is possible:
<h2>Illness</h2>
you need to tag the a anchor tag inside your h2 tag. something like this:
<h2>illness</h2>
Sometimes.
If you can't edit the destination page (e.g. to add an anchor, as per the other answers), you may not be out of luck.
For example, nothing like
href="https://www.hospitalsafetygrade.org/h/ucsf-medical-center-moffitt-long-hospitals#Sepsis infection after surgery"
will open that page and display the section with the heading
<h3>Sepsis infection after surgery</h3>
However, there's a new standard, scroll-to-text-fragment, see https://github.com/WICG/scroll-to-text-fragment, that can often accomplish this purpose. For example,
https://www.hospitalsafetygrade.org/h/ucsf-medical-center-moffitt-long-hospitals#:~:text=MRSA%20infection
works!
(But
https://www.hospitalsafetygrade.org/h/ucsf-medical-center-moffitt-long-hospitals#:~:text=Sepsis%20infection%20after%20surgery
doesn't work.)
To see how widespread support is, see https://wpt.fyi/results/scroll-to-text-fragment?label=experimental&label=master&aligned.
Related
The pre tag is used for defining block of preformatted text in order to preserve the tab, text space, line break e.t.c.
But I don't really know while this is not working for me. Am having excess WhiteSpace in all my blog posts.
I have provided a screenshot for view as well as a live url to see the effect of what am trying to explained.
I tried this:
.pre-blog{white-space:pre-line;white-space:-moz-pre-line;white-space:-pre-line;white-space:-o-pre-line;word-wrap:break-word;word-break:keep-all;line-height:1.5em; display:inline;margin:0}
But no luck with it cos it couldn't solve the issue.
Here is one of the blog posts that you can access and see what I am trying to explain.
Screenshot:
the whitespace you show in the screenshot is the space between li items. This is default styling applied for these html elements.
Easiest way to get rid of the space would be to apply display: flex and flex-direction: column to the parent, which is the ol element
You seem to be trying to put <div>s and other elements inside the <pre>. As far as I know that's not how <pre> works; it's only meant to contain plaintext that you want preformatted in a certain way as described here. It's usually used for displaying things like computer code that need all their indentation preserved.
Your screenshot and linked web page seem to be ordinary formatted text. I'm not sure what exactly you're trying to achieve, but <pre> is not the right way to do it; you'll have better luck with proper use of <p> and <br> tags and CSS styling with properties like margin, padding, and line-height. (Depending on your use-case, if you want to avoid manually typing tags, you might want to consider something like Markdown to automatically add the formatting tags for you).
I suggest you replace your <pre> with a <div>, and then post a different question regarding the whitespace if you're not able to figure it out yourself.
I'm fixing an old WordPress syntax highlighter plugin (the plugin owner abandoned it), and while fixing the PHP errors was easy, while I'm fixing it, I might as well improve accessibility as well.
My question is regarding the HTML structure for the code. I want to show the number on one side and the code next to it:
I figured the HTML would be something like this:
<section> <!-- Maybe article? -->
<header>
<h1>Sample HTML</h1> <!-- Maybe <h3> would fit my blog posts best -->
<div role="toolbar">toolabar buttons here</div>
</header>
<ol>
<li><span class="sh-r "><div </span><span class="sh-e ">class</span>=<span class="sh-s ">"grid"</span><span class="sh-r ">></span>
...
</ol>
</section>
But I'm not sure. Should the code be in an <ol> or a <table>? Are the spans for changing the color ok? Is the toolbar role appropriate? Am I missing something? If anyone has an example of an accessible code highlighter, I'd love to see it.
The way it is right now, it's a table with all numbers in one <td> and all the code in another!
Should the code be in an <ol> or a <table>?
I would say that <ol> is more appropriate than <table>.
Using a table here looks a bit like presentational purpose only. I wouldn't call a table with line numbers on the left and code lines on the right exactly a data table.
Are the spans for changing the color ok?
As as default and because you can't do better in HTML anyway, I would say yes, it's fine.
IF HTML has more specific elements to semantically indicate keywords, blocks, numbers, strings, variables, etc. then you would be strongly recommanded to use them instead of spans.
But there aren't really such specific elements, except maybe <var, <kbd> and/or <samp>; but their semantic signification has never been very clear.
However, as a higher level, you should be using <code> or <pre> to enclose the whole code, to mark it as such.
The problem is that, if you use those two elements, you can no longer use <ol> or <table>.
Perhaps the most acceptable compromise would be <ol><li><code>One line of code</code></li>...</ol>.
In any case, for specific things like marking keywords inside the line of code, you don't have another better choice than <span> in what HTML has to offer.
Is the toolbar role appropriate?
Given that you haven't given the code inside the div, it's a bit difficult to answer.
Normally, a toolbar should contain a set of buttons or occasionally other controls like dropdown menus, and in principle nothig else then that.
If the content of that div corresponds to this simple definition, yes, the toolbar is appropriate. Otherwise, no.
Not that it isn't very worth it to use the toolbar role for less than 3 buttons
As I can imagine here, this div contains only a single button to copy the code in clipboard. If it's indeed the case, then by the definition above, it isn't very appropriate.
I need to hide a
</div>
without JavaScript or Jquery. I tried
<span style="display: none;"></div></span>
but it didn’t work at all.
Any help is much appreciated.
EDIT:
Thanks for confirming that it is NOT possible!
That’s what I wanted to know.
I solved my problem by changing my markup a little bit.
In my case it would have been logic because it simply would have saved some lines of code. (Basically I wanted to insert a div into another when a user activates an option, hiding just one closing tag and one new div opening tag when the option is disabled, showing them when the option is activated. It’s a tumblr theme with some closing tags rendered in {block:Posts} after every post. No need to get further in detail, i think it would be unnecessary complicated because the problem is already solved. Thanks!
I can think of absolutely no logical reason for doing this. even though a div tag may look like two elements to some, it is in fact one element and neither the starting nor the closing tag function on their own.
The fact that a
</div>
tag is being displayed suggests that you have an extra closing tag - there is no corresponding
<div>
opening tag. These tags should never be displayed on a page if implemented correctly.
Try looking through your code and checking every opening
<div>
has a corresponding
</div>
In html all tags must be in pairs, having one opening and one closing tag. e.g.
<div id "test">
Test text!
</div>
JP
My website has a lot of big images (it is a t-shirt shop). I have added revelant keywords to <alt> tags for SEO purposes. The problem is that when the images are loading, the <alt> tags are displayed to the users and it looks really ugly because the <alt> tags are really long.
Is there a way to hide the <alt> tags from the user but keep them in the code to help search engine rankings?
The alt attribute is not a place to stuff keywords, and doing so will cause search engines to penalise you. It is supposed to contain a short replacement for the image. Use it correctly and it will look a lot less ugly.
If you need a javascript solution, user spezzino gave you one. BUT this will only work if it is actually the html image alt attribute displayed and not it's title. Also, using javascript to remove those attributes is the most efficient technique to avoir bad page ranking or search-engines penalties.
If you need a css solution :
This works, but will penalize your page ranking for 'spamming' techniques.
img {color:transparent;background-color:transparent}
jsFiddled with your code for example
If you need a firefox specif solution:
img:-moz-broken {color:transparent;background-color:transparent;}
If you want a solution only for YOUR work station :
Try to set the Boolean pref browser.display.show_image_placeholders to false on the about:config page.
Also, take note that we are NOT able to figure out if it is the 'title' or the 'alt' attribute displayed. This is why we ask for your html. To get a better understanding of your situation without having to 'try' answers on what we thing your situation is.
You can use jQuery removeAttr() to delete alt atribute
$("img").each(function(index, image){
$(image).removeAttr("alt");
});
Be sure to include that snippet inside $(document).ready() function
dirty way
use CSS:
img{
color:#fff;/*or transparent*/
background-color:#fff;
background-image:url('your loading image');
}
Probably a silly questions, but I'd like to have a hyperlink withing another hyperlink, much like a
<a href="#somewhere">
This is the hyperlink,
and this is the other one
</a>
Aside from that it's not compliant and all, is there a way of doing this?
*Edit: the outer hyperlink is used by a carousel, and won't take the browser somewhere.
Lets think about this. What is the browser suppose to do?
Go to the first hyperlink, or the second one, or both?
If you want the first one, then the second hyperlink is not required.
If you want the second one, then close the first one before and reopen if necessary after closing the second.
If both then write some Javascript to get it to open a new window. for the second hyperlink before loading the first hyperlink.
Anchor tags, just like inline or block level elements, layer up on top of each other when nested such that attributes can be set for different subsets of information or visual space within them. This may be useful if you have a large anchor element functioning as a large button, but want to insert a link to a different location within that button.
Have you tried implementing it? See this jsFiddle proving that nested inline elements work, both with span and anchor tags. Note that the nested element overrides the clickable area subset within the parent element, just as you'd expect it to if you were listening for a hover event.
Disclaimer: While technically this can be done, that doesn't mean that it should be done. Nesting links in particular can result in user confusion and be misleading about what content is pointing to what locations.
You can't nest it, but you can do something I did below..
<a href="somewhere">
This is the hyperlink,</a>
and this is the other one
May be you solution:
<form action="http://myhomepage.ru/" method="get">
second link within
<button>first link</button>
</form>