My HTML5 tabindex skips over a link element. Even when using tabindex=0, the tabindex skips right over and ignores the <a> element. AFAIK <a> should already be in the tabindex (even without the tabindex attribute) as long as it has a href attribute.
sample code:
Hello world!
Related
In the <button> specification part we see that permitted content is only Phrasing content. It's valid HTML code part (checked here):
<button>
<span></span>
</button>
This is not valid HTML code part (checked here):
<button>
<div></div>
</button>
Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
But we can change display property of the <span>:
<button>
<span style="display: block"></span>
</button>
And it looks like we use a <div> instead a <span>, but the HTML is valid. Is it OK (by the specification) to use a permitted content element and change its display property?
Even though you style a span with display: block you still can't put block-level elements inside it:
<div><p>correct</p></div>
<span style="display: block;"><p>wrong</p></span>
The (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.
So they are different, and thus there is nothing problematic here.
But in HTML5 some block elements may be placed inside inline! we say about putting block elements inside link and in other cases it doesn't have sense. “Block-level” links in HTML5
Iam getting a problem while i place mouse on tooltip only when the page loads intially. When i login to website, after the page is loaded when i place my mouse on '?' glyphicon symbol, iam able to see the whole title script that written inside the html.
This is the below text iam seeing when i hover. This is the title with close button 'x' inside the tool tip.
About your score<button type=button class=close data-dismiss=popover aria-hidden=true onclick=$('#abcPopover').popover('hide')>×</button>
I made the tooltip clickable. when i click on '?' glyphicon symbol the popover is not coming on first click and the script is now hiding. when i click on '?' glyphicon symbol second time it works fine the popover is coming. This is the problem iam seeing only on when page loads and when i click on '?' glyphicon symbol the title will hide and on second click works fine and popover will come up.
This is the code i have written in html.
<a href="#" id="abcPopover" data-html="true"
title="About your score<button type=button class=close data-dismiss=popover aria-hidden=true onclick=$('#abcPopover').popover('hide')>×</button>"
data-toggle="popover" data-content="{{abcTooltip}}" ng-click="open()"><i class="glyphicon glyphicon-question-sign"></i></a>
nesting a button in Html tag it isn't valid HTML5 according to the HTML5 Spec Document from W3C:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
In other words, you can nest any elements inside an except the following:
<a>
<audio> (if the controls attribute is present)
<button>
<details>
<embed>
<iframe>
<img> (if the usemap attribute is present)
<input> (if the type attribute is not in the hidden state)
<keygen>
<label>
<menu> (if the type attribute is in the toolbar state)
<object> (if the usemap attribute is present)
<select>
<textarea>
<video> (if the controls attribute is present)
However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.
Check this link out to create your tooltip. Link
Fiddle
I have the following html form
<div>
<p>Field1</p>
<input type="text" name="fld_one" id="fld_one" value="" />
</div>
<div>
<p>Field2</p>
<input type="text" name="fld_two" id="fld_two" required value="" />
</div>
I want to use CSS to mark required fields like so
div input[required]:before { color: #f00; content: "*"; }
However this css line does not make a visible change in the document.
For reference I was able to modify all required fields with the following:
div input[required] { background-color: #000; }
TL;DR - Can the :before pseudo-class be used with an attribute selector? If so, how?
:before is a pseudo-element, not a pseudo-class. It can be used with an attribute selector, but you can't use it with input elements with some browsers because it is a replaced element. (Some browsers, because it's not very well-defined whether they're supposed to work, although most lean toward "no".)
The reason why your attribute selector works is because you're applying styles to the input element itself, which works consistently in every browser.
Pseudo elements do not work with input elements, as they have no content.
From the specs:
Authors specify the style and location of generated content with the
:before and :after pseudo-elements. As their names indicate, the
:before and :after pseudo-elements specify the location of content
before and after an element's document tree content. The 'content'
property, in conjunction with these pseudo-elements, specifies what is
inserted.
Input elements have no childNodes in the DOM, hence, no content property to insert into.
As a possible workaround, apply the stars to the labels instead of the input elements
:before is not valid on <input> as it doesn't have "content" - see: CSS content generation before or after 'input' elements for a full explanation.
The "traditional" way of doing it is inserting the * on p or label (label is more semantic).
Lets say I want to display tool tips for links using the title attribute:
<a class="editcommand" title="Edit" ...>
Is there a way to specify the title text for all elements of the same class using CSS, so I don't have to repeat it within each element?
CSS is only for the content of the style="" attribute, not other HTML tags. This sounds like a job for Javascript. If you're using jQuery here's an example:
$('a').attr('title', 'My universal title');
Unfortunately, no, CSS does not provide that ability. Since title is an HTML attribute (besides the <title> element of course), it's up to the markup structure (DOM) to define it, not the style (CSS).
With JavaScript it's just a matter of attaching the attribute to a set of DOM elements with that class. But again, that's modifying the DOM elements themselves, not their style properties.
What tag should be used for short text like.
Back to top
Read more
is <p> appropirate or something else should be use. because these are not paragraph.
Which is more semantic
<p>Back to top</p>
or
Back to top
or
<div>Back to top</div>
In general you should use the anchor <a> tag.
Nesting an <a> inside a <p> is perfectly valid, but in general the <p> should be reserved for paragraphs of text. Since yours is just a link, the <a> tag alone will probably be the most recommended.
If you want your link to appear as a block element, simply style it with display: block;. The fact that the <a> tag is normally displayed inline is only because it is its default style.
Anchor tag
Back to top
Read more
You can embed an anchor tag inside a block element. So something like this
<p>Back to top</p>
Inline elements must be enclosed inside block level elements, so this is the basic approach:
<p>Back to top</p>
Usually though the <a> element is already inside a <div> tag so the <p> isn't absolutely necessary but it is more semantically correct – it's still a paragraph of text even if there's only a few words in it.
There's no obvious semantic tag for such.
Perhaps you don't really need a tag there at all! Please check for this case.
If your "short texts" are links, then you obviously need <a href=. If you need a CSS style for the text, you can put it into the a tag too.
* If you need a tag for structuring only or to hang CSS styles from, then use <span>.