<h1><a id="Didn't-answer-your-question?">Didn't answer your question?<!--ID end--></h1></a><!--link end-->
Can I have an id element inside a href element, for the link text or does this not work, if so do people have an alternative?
There are several problems with your markup.
You don't close the <h1> tag properly. Your <a> id may technically work, but I wouldn't recommend it as an element ID.
The one that's giving you an issue though is the fact that you have an <a> tag nested inside another <a> tag. That is not valid markup.
Your inner tag does not need to be an anchor tag, change it to a span or something and it should work fine.
<a href="http://www.website.com">
<h1>
<span id="Didn't-answer-your-question??">Didn't answer your question?</span>
<!--ID end-->
</h1>
</a>
<!--link end-->
You didnt properly close the h1 tag but other than that it looks like it should work.
This is from the w3 website:
I just returned from vacation! Here's a
<A id="anchor-two">photo of my family at the lake.</A>.
http://www.w3.org/TR/html401/struct/links.html#h-12.2.3
Related
This question already has answers here:
Why are nested anchor tags illegal?
(4 answers)
Closed 1 year ago.
I've run into a rendering issue I can't explain. I'm hoping someone can shed some light.
In its most simplified form I have the following HTML:
<html>
<body>
<a id="anchor1" href="#">
<div>
<a id="anchor2" href="#">Edit</a>
</div>
</a>
</body>
</html>
When this actually renders in a browser the result is this:
<html>
<body>
<a id="anchor1" href="#"> </a>
<div>
<a id="anchor1" href="#"> </a>
<a id="anchor2" href="#">Edit</a>
</div>
</a>
</body>
</html>
Notice #anchor1 adjustments:
Its been closed in its original location, no longer wrapping around the div tag.
It's been copied as a standalone element just inside the div tag.
If I remove the innermost anchor tag (#anchor2) there is no rendering issue.
Can someone please explain what's going on here? I've been able to wrap div tags in anchor tags before, but for some reason this but of HTML has unexpected results. I've reviewed in Chrome, Safari, Firefox, Edge...I've even tried Codepen.
You cannot have an anchor <a> tag inside of another anchor <a> tag unfortunately.
Browser wouldn't know which one is clicked when a user clicks it, so browser tries to correct your incorrect implementation and closes the first anchor <a> tag and in turn it creates a havoc of html.
You can't have an <a> tag inside another <a> tag. It's not valid HTML. A browser will do the best it can, but it's probably not going to be what you want.
Solution: don't do that.
So I'm working on a website
<img src="Images/PaintEverythingPreview.png" herf="Pages/PaintEverything.html">
<p> - <a herf="Pages/PaintEverything.html">
Paint Everything
</a> - </p>
and the code here isn't working, none of the links work! I've coded a little program on my website, and this is supposed to take you to it, but it's not working, please help!
Use href instead of herf.
Paint Everything
HTML Tags
The correct way to include a link in your HTML is to use the href element (you mis-spelt it as herf.
Secondly, you cannot use href inside an img tag as it's not valid HTML. Instead, you should nest the img tag inside the link.
Update your code to this:
<a href="Pages/PaintEverything.html">
<img src="Images/PaintEverythingPreview.png">
</a>
<p>
Paint Everything
</p>
To validate (check) your HTML in the future, try the W3C Validator
error writing the attribute href.
Paint Everything
error in attribute href in img tag (not exists):
<img src="Images/PaintEverythingPreview.png" herf="Pages/PaintEverything.html">
html tag reference: HTML tags list
Change herf to href and enclose the img in <a> tags to make the image a clickable link.
<img src="Images/PaintEverythingPreview.png">
Firstly you need to remove href from the image tag, since you cannot put a href in an <img> tag.
Secondly you need to check if the path/link to which you want to redirect to, is correct or not.
I have updated your code and let me know if this is what you are looking for.
<img src="Images/PaintEverythingPreview.png"><p> - Paint Everything - </p>
Is it appropriate to use <i> tag within any of the heading tags?
html:
<div class="">
<h5>Hello <i>HI</i> </h5>
</div>
Yes its appropriate, You can use i tag inside the other html tags. Mainly i tag used for italics. You can achieve the same result by using CSS also.
for more information about i tag please visit http://www.w3schools.com/tags/tag_i.asp
Yes, definitely, You can use <i> tag inside any HTML tags. Nowadays it is used to display vector icons like font-awesome icons, glyphicons and many more.
<!--First page-->
Note
<!--page2.html-->
<a name="note">
<article>
<div>
.
.
.
</div>
</article>
</a>
i have tried putting "note" as id of article tag as well as of main div tag under article tag. Also i have tried wrapping main div tag in anchor tags. Still it displays the whole page2.html on click. Can anyone help?
The name attribute is not supported in HTML5. To Link to an element with a specified id within a page
Try using this:
<!--page2.html-->
<a href="#note">
It will show the whole page, but its going to your specific location in that page.
Take a look at this page:
http://www.w3schools.com/tags/att_a_href.asp
Imagine this block of HTML:
<a href="/somewhere/">
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
</a>
This gets rendered in my browsers like this:
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
This happens only if there is another a tag inside the outer a tag.
I totally don't understand why this is happening. How this could even be. And it's driving me insane.
The problem looks so basic, that i wonder what it was about the HTML standard that i have misunderstood? After all, shouldn't as of HTML5 any tags be allowed within a tags?
What am i missing here?
You can't next anchor tags. As the W3 says:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
If you try to validate your code, you will get
Document type does not allow element "div" here; (...)
One possible cause for this message is that you have attempted to put
a block-level element (such as "<p>" or "<table>") inside an inline
element (such as "<a>", "<span>", or "<font>").
So you can't put a <div> inside an <a>.
To expand a bit on why you can't nest A tags, the browser would not know where to direct the user, since the multiple A tags would have multiple HREF attributes. This is why it is illegal to nest A tags.