If for example, I have a tag: Ex1, I want to identify what that tag is doing there. Title,class & id attributes aren't options as I use class&id for CSS and title displays text when hovered. So, is there any attribute to do that? Thanks!
Not really sure what your asking, but are you trying to apply meta-data as an attribute? If so, you can add more than one class (class="one two three fourClasses"), or use the data- attribute.
You can also use "data-[yourText]" as a cross-browser-safe attribute in any elements, and this often makes it nice to describe things because you can include more information in the custom data attribute value:
Ex1
Ex2
Ex3
What's wrong with <!-- HTML comments --> for annotations?
Related
Can I set data-* attribute with Thymeleaf?
As I understood from Thymeleaf documentation I tried:
<div th:data-el_id="${element.getId()}"> <!-- doesn't work -->
<div data-th-el_id="${element.getId()}"> <!-- doesn't work -->
Yes, th:attr to the rescue Thymeleaf documentation - Setting attribute values.
For your scenario, this should do the job:
<div th:attr="data-el_id=${element.getId()}">
XML rules do not allow you to set an attribute twice in a tag, so you can't have more than one th:attr in the same element.
Note: If you want more that one attribute, separate the different attributes by comma:
<div th:attr="data-id=${element.getId()},data-name=${element.getName()}">
With Thymeleaf 3.0 there is the Default Attribute Processor which can be used for any kind of custom attributes, e.g. th:data-el_id="" becomes data-el_id="", th:ng-app="" becomes ng-app="" and so on. There is no need for the beloved data attribute dialect anymore.
This solution I prefer, if I want to use json as the value, instead of:
th:attr="data-foobar='{"foo":'+${bar}+'}'"
You can use (in combination with literal substitution):
th:data-foobar='|{"foo":${bar}}|'
Update: If you don't like the th namespace, you can also use HTML5 friendly attribute and element names like data-th-data-foobar="".
If someone is interested, related template engine tests can be found here: Tests for Default Attribute Processor
Or you can use this Thymeleaf dialect https://github.com/mxab/thymeleaf-extras-data-attribute and you'll be able do
<div data:el_id="${element.getId()}">
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.
Should I be using class names in HTML page that describe it completely, eg. navbar-static-8 to describe a fixed navbar containing 8 items?
Or should I be wrapping the metadata into separate attributes e.g. type="static" items="8".
I want such names to be parsed in javascript.
Cleaner would be to use data attributes like:
<div data-type="static" data-items="8"></div>
John Resig wrote a nice article about this http://ejohn.org/blog/html-5-data-attributes/
But if "static" refers to something you want to use for the design of the item, you should use classes since these are designed to be used in CSS. The data attributes are more used in Javascript as meta data about the object.
yes you can use navbar-static-8 type of name of class , and you can 'type="static" items="8"' your custom attribute but test on all browser (specially Intenet Explorer)
You should use descriptive class names for a intuitive css use, like "navbar navbar-static" and use the html5 data for js, like data-navitems="5"
Make use of cascading, use two css classes, navbar to describe general nabvars properties, and navbar-static to describe styles only for the static navbars.
I just need to know if this is the correct way of doing this.
I am trying to create an anchor tag that has an embedded image in it using a data attr. This will be used to determine what will be displayed at different media queries.
is this syntax correct? I have no idea. I am using bootstrap as my framework
<div class ="col-lg-12" data-test="<a href='http://www.army.mil/veterans/' target='_blank'><img id='va_badge' class ='badges img-responsive' src='images/armybadge.png' alt='Army Veteran Badge'></a>"> </div>
The syntax is correct. (You can check this using a validator like http://validator.w3.org) A data-* attribute may have any value. It may cpntain “<” characters, as they are not treated as starting a tag when inside an attribute value.
What you are going to do with the value is a completely different thing. It is all up to you. The data-* attributes are just containers for that that you can process with a script.
Is it bad thing if I add more than one class for one object. Let's say:
text
Don't ask me why, I just need it.
Thanks.
You can use multiple class names (a perfectly normal thing to do), but are only allowed one class attribute on your HTML element.
Do this instead:
text
Following on from RedFilters' answer you could of course extend your class selectors by using the angular ng-class attribute as follows:
text
The resulting html would then be:
text
Might come in useful to get around a tslint "line too long" error :-)
There's no need for two class statements, simply:
text
Now, in order to handle this in CSS you need to do this:
.paren.default{
}
...Whithout spaces between the two class selectors.
Cheers!