I have seen this code from the tutorial that I'm studying. I searched for the purpose of the p attribute inside the li tag but found no answer. What is the purpose of that p attribute inside the li tag?
$msgs .= "<li p=\"$no_of_paginations\" class=\"inactive\">Last</li>";
The purpose cannot be inferred from the code snippet. As such, the attribute, being not defined in any HTML specification or draft or browser-specific extension, has no effect beyond being stored as data into the p element node in the document tree.
Such an attribute, though invalid by the specs, can be used like any other attribute in styling (e.g. attribute selector .p) in CSS or in scripting. In this case, it is probable, but by no means certain, that the attribute is meant to be used in scripting to carry a number as its value, with that number inserted with some server-side code, so that this value can be accessed in client-side scripting, as relating to a specific element.
The recommended way is to use data-* attributes instead, such as data-p, to avoid any risk of clashing with attribute names that might be introduced in some future HTML version.
The default HTML(whichever version) namespace doesn't have a purpose for "p" inside a li tag. If there's another namespace declared then that's where it's from. Other than that, it's not valid by w3 standards.
It should be a custom attribute to use in JavaScript codes to get something.
That is just a custom tag used in some javascript functions
Related
I have an ionic/angular app which autogenerates a custom tag element with a different _ngcontent attribute each time e.g.:
<tag _ngcontent-hgr-c2>...</tag> (1st refresh)
<tag _ngcontent-agj-c7>...</tag> (2nd refresh)
<tag _ngcontent-cfx-c5>...</tag> (3rd refresh)
Is there a way to use regex to target the custom tag attribute?
This didn't work:
tag[^=_ngcontent-] {
color: red !important;
}
Nor did just targetting the tag app e.g.:
tag {
color: red !important;
}
According to this answer, there is kind of regex in CSS, but it can be only applied to attribute's value, not to attribute itself. The W3C documentation says the same, so because Angular creates custom attributes, I'm afraid that it can be hard to achieve by regex.
If you want to style your tag like in the second example you can do it by defining its styles in global styles.scss. This is not the best solution, but should work.
This angular-blog article recently helped me understand the idea behind the style ecapsulation.
Unfortunately, there is no wildcarding support in CSS for attribute names.
If you have access to the application code which generates the custom tags, you should add classes to these elements (if the app supports it).
See also this question.
I know that custom tags need to have a "-". And I kwnow that custom attributes need the "data-" prefix. But what about custom attribute on a custom tag?
If I define a custom HTML tag/element, such as <x-sososlik></x-sososlik>.
And I need some custom attributes on it. For example: hair-color.
Does that attribute need the data-* prefix?
<x-sososlik hair-color="green"></x-sososlik>
-or-
<x-sososlik data-hair-color="green"></x-sosolik>
The question is more about "what is the CORRECT way", because it works with both.
I'm asking because I cannot find that information.
I need to know it because I'm trying to shorten the attribute names on existing project, in the real code there a lot of them.
No, you don't need to use the data- prefix on an autonomous custom element (as opposed to a customized built-in element). As specified in the WHATWG HTML standard:
Any namespace-less attribute that is relevant to the element's functioning, as determined by the element's author, may be specified on an autonomous custom element, so long as the attribute name is XML-compatible and contains no ASCII upper alphas. The exception is the is attribute, which must not be specified on an autonomous custom element (and which will have no effect if it is).
The template page http://www.blacktie.co/demo/kelvin contains a tag I haven't seen before: <t>Email</t>
The corresponding CSS styles this: #footwrap t {font-weight: 700;}
I'm curious as to the significance of the <t>. It's not listed at http://htmldog.com/reference/htmltags or other lists I can find.
Is this a custom HTML tag? From what I've read about custom elements (eg http://www.html5rocks.com/en/tutorials/webcomponents/customelements) you need to call document.registerElement() or document.createElement() but this doesn't seem to be the case here.
Is this code semantically correct, or should it be written as:
<span class="t">Email</span>
#footwrap .t {font-weight: 700;}
Yes, the <t> tag is a custom element. While custom tags can be useful, if you want them supported in all browsers, you have to register the element with JS:
var tTag = document.registerElement('t');
More about custom tags here
So to answer your question, the coding is not valid, unless they have registered the element with the browser with JavaScript.
Sometimes, its just easier to use a class :D
This may be completely wrong, but t is not a real HTML tag. Therefor I assume it is a XHTML item. So yes if it IS XHTML then that would be correct, and the class would not be (unless that was the name of it of course).
Is adding a css class to a <b> tag valid html/css
Example, can I do this:
<b class="myclass"> Foo Bar </b>
Is this valid html/css?
I need to add a class to a b tag as an identifier so I can use it in jQuery/js. It wont have any css styles
Yes, b tag can have all global attributes, including class.
The full list of attributes, you can add to b element:
accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
inert
itemid
itemprop
itemref
itemscope
itemtype
lang
spellcheck
style
tabindex
title
translate
You can also use any custom data attributes.
Finally, you can add also ARIA role attribute.
Of course. There's nothing wrong with that.
However, it's generally a bad idea to use class purely for identifying an element. Consider using something like data-reference or something, as this will be more correct (and more efficient on the browser not having to keep track of a class that's not used as a class)
Yes, this is perfectly valid. Absolutely nothing wrong with it.
There's nothing strictly wrong with it, except that the <b> bold tag is deprecated, in favor of using the <strong> tag.
I never give the strong (or b) tag a class because I only use it when I want the text strong to call attention to it, similar to <em> emphasizing words in text.
If I am bolding or emphasizing the text for some other reason I use a div or span with a class — for example, it is common to italicize the title of a book or article, and in that case I do not use <em> around the title, I use <span class="title">This Is That Title</span> to semantically mark what this thing is, then use a stylesheet to say "titles are italic".
There are no “CSS classes”. CSS has class selectors, but that’s a different issue and postulates the existence of a class attribute in a markup language. Thus, the question is meaningless as far as CSS is considered.
In HTML, the class attribute is valid (formally correct) on b elements, in any HTML version from HTML 4.0 (which introduced the attribute) onwards. Whether it makes sense or not is a different issue, but there are no formal restrictions on its use. Although class is most often used for styling, it can be used for other purposes, too, especially in scripting.
Like a tag that I can use to store some necessary info? But really isn’t required or used by the HTML? Works like the tag attribute for objects on Visual Basic?
Up until HTML5 no. With HTML 5 there is provision for this with the data-* attribute.
For example:-
<div id="myStuff" data-mydata="here is my data">
In current technology there is no "official" away to do this. However all browsers allow you to add any arbitary attribute to a HTML element so in HTML4 you can do this:-
<div id="myStuff" data-mydata="here is my data">
Which as you can see is identical but not offically sactioned and if you want strict XHMTL compliance will be considered "broken".
You can access the attribute just as you would any other:-
var mydata = document.getElementById("myStuff").getAttribute("data-mydata");
You could perhaps use the html5 data-* attributes? It'll fail validation on html4, but it is still probably the best option...
If you're storing data to use in javascript, you can also use something like jQuery's Metadata plugin. Basically, you can store data within the element's class="" attribute, like so:
<div id="aaa" class="class1 class2 class3 { type: 'food', color: 'green' }"></div>
Then in javascript:
alert($('#aaa').metadata().color) // "green"
Other kits use the title or rel attributes to store data. While this is more validation friendly, it may or may not be better than using AnthonyWJones' answer of just using non-standard attributes. It'll "break" validation, but then again according to Dojo, custom attributes are perfectly valid HTML, even if they don't validate against a DTD.
So no - there isn't a single well accepted specific attribute where you can dump all data. All existing attributes are for specific uses. But you can either 1) create your own attributes, or 2) coopt an existing tag to reuse for your purposes. Just wanted to point out the alternative.
Have a look at www.htmlref.com or W3C for the used attributes.
Other than those you can just add your own, they will render and they will be accessible via code for instance in C# you can access a controls attribute collection.
Control.Attributes["MyCustomAttribute"] = "Hello World";
there’s rel and rev attributes, which work in elements with an href-attribute. they have a semantic meaning, but are often abused as an attribute to store additional information