<a> tag created from nothing - html

This is really weird to me. Here's my code
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
</a>
</div>
</div>
</section>
If you have a look here http://jsfiddle.net/H2YxH/1/ and inspect the h2 tag, you will (hopefully) see it everything inside work-desc wrapped in a tag. Why is this being generated, when it's not in my code?

When the browser sees the other <a> tag inside the first one, it concludes that it has to close the first tag before it can open a new one.
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
</a>
View project
But this is an invalid DOM structure: the div has to be closed before the anchor can be closed. Because closing the div now would be rather destructive (and there'd still be a stray </div> up ahead to handle), it decides that it's better to duplicate the anchor so that everything it encloses in the markup is enclosed in the DOM too.
This is what happens in Chrome. Other browsers might behave differently. With invalid HTML browser behavior is undefined and can be whatever the browser considers best.

You can't encapsulate links/ "a"-tags in each other. Although it makes sense sometimes, it's generally a bad idea.
In addition:
You probably use "Right-click"->"Inspect Element"? The code you will see may not be the code you've written. This is because the code you will see is the code, that the browser creates during parsing and the code you see may change on-the-fly (e.g. you change an attribute with JavaScript). To see your actual code you always have to use "show sourcecode" in the contextmenu, but this probably doesn't work on jsfiddle.

Please read the comments in the code below first...
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" /></a><!--// You might want to close your anchor here... //-->
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
<!--// </a> and remove this one ;-) //-->
</div>
</div>
</section>
You can't open an anchor twice if you did not close the first anchor, so I kindly ask to close an open anchor before you open a new anchor, I hope this will be helpful to you. Happy coding!

Related

Accessibility for HTML reading out link and not label?

Hi I have the following question in regards to accessibility, I'm using JAWS screen reader software to test my code and I have the following issue:
JAWS reads out the heading label for the category, but it doesn’t represent the category and its repeating twice. The software says "Create case dash link";"Create case dash link".
The software should read should be Ask a question"
Please advise, my HTML is below
<div class="col-12 col-sm-6 col-md-4">
<article class="icon-feature icon-feature--first">
<a class="icon-feature__link" href="/support/create-case/"></a>
<div class="icon-feature__icon bg--blue-primary" style="height: 150px;">
<a class="icon-feature__link" href="/support/create-case/">
<span class="icon icon--signs"></span>
<div class="imghoveropacity">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>
</div>
<a class="icon-feature__link" href="/support/create-case/">
<h3 class="icon-feature__title">Ask a question</h3>
</a>
<p class="icon-feature__excerpt">Submit an enquiry</p>
</article></div>
JAWS is right, there's nothing to read from its perspective. Well, almost nothing.
If you want JAWS with default settings to read your links, they should have either A) link text, i.e., something meaningful between <a> and </a>, or B) The aria-label attribute that should not be empty.
You have here:
<a class="icon-feature__link" href="/support/create-case/"></a>
This link contains nothing to JAWS' eyes. I mean, nada. The easiest way to fix this is to add an aria-label attribute, like this:
<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question"></a>
Then JAWS would know what to read when the focus lands on that link. Otherwise, as it is a link, so a priority piece of data that must be announced somehow, it tries to get at least something and reads the (relative) URL, that's why you hear "Create Case".
The other link is a more cumbersome case. You have a link, a div inside it, and an img inside that div. Here JAWS is also confused because the link text is blank again, so it probably should read the alt attribute of the image, but this image is in another div, so it is not sure if the div should be read as the link contents. Oh yes, and there is an empty span also, and it is the first element of the link, so even more confusion arises.
If I were you, I'd also simply add an aria-label if you need that link to be read, too. And if the span is not needed and is only for decoration purposes, hide it from JAWS' view, otherwise you also will get some hard-to-notice troubles. After that, if you hear "Ask Question" twice on that link, hide the div with the image, you don't need it anymore (this last point is to be discussed, needs to be tested more thoroughly):
<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question">
<span class="icon icon--signs" aria-hidden="true"></span>
<div class="imghoveropacity" aria-hidden="true">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>

Browser compatibility while using anchor tag

I am using anchor tag for linking my welcome page to my main page. It is working on chrome but not in mozilla.
Code:
<div id="wel1"><h1>WELCOME TO ASSESMENT ENGINE</h1></div>
<div id="wel2">
<div id="wel3"><p id="wel4">Instruction:</p><br>
<p id="lang">Total number of questions : 5.<br><br>
Time alloted : 3 minutes.<br><br>
Each question carry 10 mark, no negative marks.</p>
</div>
<div id="wel5">
<p id="wel4">
Note:</p><br>
<p >
<ul>
<li><p>Click the 'Submit Test' button given in the bottom of this page to Submit your answers.</p></li>
<li><p>Test will be submitted automatically if the time expired.</p></li>
<li><p>Don't refresh the page.</p></li>
</ul>
</p>
</div>
<button id="bu">START THE TEST</buttton>
</div>
In this image START THE TEST button working on chrome perfectly but not on mozilla.
You have invalid close tag </buttton>
Try:-
<button id="bu">START THE TEST</button>
Demo
Although the code works if the end tag spelling error is corrected, it is illogical and forbidden in HTML5 to nest interactive elements: the a element must not have interactive content like a button element. A click on such an element could activate the outer element, or the inner element, or both. Although this might not matter in this specific case, it’s still not recommended.
Instead, you can use an image of a button an make it a link:
<img src="start.png" alt="START THE TEST" border="0">
or use a minimal form (submitting a form is different from following a link, but the differences often don’t matter, or could be an improvement):
<form action="as.html"><button type="submit">START THE TEST</button></form>
Spell mistake in the Closing button tag, Use </button> instead </buttton>

anchor tag not working

I am trying to create an anchor tag but its not working in any of the browsers
I am going from one page to another
<p>
View All Code Related Issues
</p>
and its going to this page having 10-12 anchor tags..
<div class="grouping">
<h4 id="Code2011">
<a>Code 2011</a>
</h4>
</div>
I tried these too:
<div class="grouping">
<h4 id="Code2011">
<a id="Code2011">Code 2011</a>
</h4>
</div>
and
<div class="grouping">
<h4>
<a name="Code2011">Code 2011</a>
</h4>
</div>
but none of them are working: When I go to that page and press enter on the url it then works...so that means my url is coming up fine...any ideas?
I found that this works better. Don't know why.
<div class="grouping">
<h4>
<a name="Code2011"></a>
Code 2011
</h4>
</div>
I have found that sometimes you can mistakenly have another element with the same ID. In my case, it was an option tag, which cannot be moved into view. As such, I would recommend you try $('#yourid') to see if there are any tags unexpectedly with the same ID.
In general:
'name' is deprecated, so don't use it.
All id's must be unique, no exceptions. You cannot have duplicated
id's.
Anchor id's need to occur in anchor tags. So something like <h4
id="myanchor"> wouldn't work as an anchor.
Your second example would work for you if you removed (or rename) the id from the H4 tag.
For others future reference, I've noticed anchors not working well within some divs. They seem to work better when placed next to a recognizable page element like an image or a table row, something on the page that isn't buried within a div. I think what may happen is with floated elements and relative positioning the page can't find the precise spot of your anchor so you get nothing.
Try:
Code 2011

DNN MobiNuke Module Empty Div Tag Issue

I am using the DNN MobiNuke Module (v02.00.03) from DataQuadrant to create a mobile version of a website I have created. Everything is going well EXCEPT a weird issue I am running into with the Mobile Skins. I have a simple Mobile Skin that looks like this:
<div id="mobile_frame">
<div id="mobile_header">
...
...
</div>
<div id="main_wrap">
<div id="mobile_main" class="sub">
<div id="ContentPane" runat="server"></div>
</div>
</div>
<div id="mobile_footer">
...
...
</div>
</div>
The issue that is arising is that ANY content in the ContentPane that has an empty div tag will change itself when rendered in a mobile browser:
<div class="xxxx"></div>
Will change itself to
<div class="xxxx" />
The biggest problem that this is causing is that the browser is interpreting the tag as an opening div tag with no closing tag. Therefore it is placing an ending div tag essentially wherever it wants. It's causing ALL of the markup after this area to get very messed up.
Here is an example of the code as it should be, and how it is rendering on the page:
Should be:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
</div>
<div id="mobile_footer">
...
</div>
</div>
But it renders as:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
<div id="mobile_footer">
...
</div>
</div>
</div>
I can fix this in the markup that I have control of by putting inside of the tags, but I do not have the time/energy to go through EVERY module that might be showing up in the ContentPane to check for empty tags. In addition, there are places where I want an empty tag to fill it with content later with javascript.
Lastly, I did a TON of research to look this up and I cannot find a thing. The closest that I found is that this happens in XSLT when transforming some XML, but as far as I know MobiNuke is not doing that.
Any help is greatly appreciated. Thanks!
I have figured out the issue after having a discussion with the vendor. There is a setting in the module settings called "Enable content adaptation". Apparently the setting will try to make the HTML to be XHTML compliant, but it was definitely not working for me. Hope this helps anyone else seeing this.

Firefox rendering gone WRONG - see something really weird

I have the following is really weird. Bassically when I view the source of the page everything looks fine but the page looks all wrong. So I decided to take a look at the source using firebug and firebug shows a very different story. But if I refresh the page the page looks fine and the source and firebug match up.
See below for what the source is but what firefox displays and firebug shows:
View source shows this:
<div class="mainpanel">
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Little-Rock">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB001D_0.jpg" alt="Little Rock" /></td></tr></table></div>
<div class="thumbphototitle">Little Rock</div>
</a>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB002D_0.jpg" alt="Split Rock" /></td></tr></table></div>
<div class="thumbphototitle">Split Rock</div>
</a>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Rock-Pointer">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB003D_0.jpg" alt="Rock Pointer" /></td></tr></table></div>
<div class="thumbphototitle">Rock Pointer</div>
</a>
</div>
But firebug shows this and it renders on the screen as if its like this:
<div class="mainpanel">
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Little-Rock">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB001D_0.jpg" alt="Little Rock" /></td></tr></table></div>
<div class="thumbphototitle">Little Rock</div>
</a>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"></a>
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB002D_0.jpg" alt="Split Rock" /></td></tr></table></div>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"> </a>
<div class="thumbphototitle">
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock">Split Rock</a>
</div>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"> </a>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Rock-Pointer">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB003D_0.jpg" alt="Rock Pointer" /></td></tr></table></div>
<div class="thumbphototitle">Rock Pointer</div>
</a>
</div>
The offending html is the middle a tag which goes crazy...
Any ideas.
Cheers
Anthony
Like others said, this happens because your markup is invalid. Going a bit deeper, the problem is that when the parser received <a><div> in its input, it may mean two things:
You forgot to close the anchor tag, in which case this should become <a></a><div>... in the DOM, or
The anchor wraps the div, in which case the DOM should be <a><div></div></a>.
The correct decision can be made only when more (potentially much more) characters are known; the parsing, as you could have noticed, happens incrementally -- i.e. you can see parts of the page before it's fully downloaded.
Unfortunately, the Mozilla's HTML parser (as of Firefox 3.6 and earlier) is non-deterministic in this case -- the resulting DOM depends on the portions your HTML is split into, while going over network.
There's a Mozilla bug about a problem that looks very similar to yours.
I'm sorry for you, and I don't know how to implement (nor have any desire to try implementing ;) the solution to your original problem, but perhaps a hack involving setting innerHTML (to avoid parser non-determinism) is in order?
BTW, it would be interesting to check how the HTML5 parsing algorithm says your markup should be treated, since that's what will eventually be implemented in the browsers.
You should not wrap block elements/tags (like <div>) in inline tags (like <a>). That's asking for trouble.
That's because your HTML is invalid. Inline elements can only contain other inline elements and cannot contain block elements.
Browsers encountering HTML which breaks this rule is allowed to do anything at all in order to parse the page (including not displaying the page) and apparently firefox's interpretation of anything-at-all is not the same as yours.
Note that you can convert inline elements like <span> to a block element by setting it's display css property. But I'm not entirely sure if that is legal for an element with additional semantics such as an <a> tag. Of course, you could convert those divs to inline elements.
I don't want to stop putting block elements inside anchors. It's just too useful:
http://html5doctor.com/block-level-links-in-html-5/
I developed a workaround which seems to disable progressive rendering and avoid this problem.
I use server-side sniffing to look for "Firefox/3" in the user-agent. If found, I put this right after <body>:
<script type="text/javascript">
// hack for firefox 3.x progressive rendering pessimism
document.body.style.display = 'none';
</script>
And this right before </body>:
<script type="text/javascript">
document.body.style.display = 'block';
</script>
In testing, I found that simply inserting an empty <script> tag after the body tag avoided the issue I was experiencing. But it feels more correct and safer doing a show/hide.
Hard to know for sure what FF is really thinking - I'm curious to know whether this solves the problem for others.
I'm used to doing this sort of thing for IE. FF3.x is vying for my new least-favorite browser award.