Is it a valid html? (AngularJS Directives)

Hi ,

is it a valid html snippet ? I added hell in div. Is it okay ?

<div hell>Hello</div>

No. It depends on what you’re trying to do, but you probably want a class

<div class="hell">Hello</div>

Does browser complain error for writing hell there ?

<div hell>Hello</div>

Check it out for yourself here:

http://jigsaw.w3.org/css-validator/#validate_by_input

that is a CSS validator. I’m not writing CSS here.

my question is what complain/error browser throws if I write this code in HTML

<div hell>Hello</div>

OK try this:

HTML W3.org Validator

Edit:
Amended link and may I ask what you are trying to do?

Thanks … I get it.
It says “HELL” is not a member of a group specified for any attribute

So it does not stand alone.

@regarding your query … I was trying to make a directive with hell

I have some confusion on attribute vs directive

Try to start with a valid HTML page and continually validate until it breaks:

<!DOCTYPE HTML>
<html>
<head lang="en">
<title> $title </title>
<style type="text/css">
	body  {background-color: #fafafa; margin:0; padding:0;}
	#hell {border: dotted 4px #f00}

	.bd0 {border: 0;} .bd1 {border: solid 1px #ddd;}
	.bgs {background-color: snow;}
	.clr {color: #f00;} .clg {color: #0f0;}
	.clb {clear: both;}
	.fs2 {font-size: 200%;}
	.fwb {font-weight: 700;}
	.hhh {display: none;}
	.mga {margin:  0 auto;}
	.p42 {padding: 0.42em;}
	.tac {text-align: center;} .tal {text-align:left;}
	.w42 {width: 42%; max-width: 420px;}
	.w88 {width: 88%; max-width: 888px;}

</style>
</head>

<body>

	<h1 class=""> Template </h1>
	<div class="w88 mga p42 tac bgs clr"> 
		<h2 class="tal">
			This test is aligned left and colored red on snowy background
		</h2>	

		<p id="hell" class="w42 mga fwb fs2 clg">
			This is a "hell" id applied to a &lt;p&gt;
			<br>
			Notice how this is centered
		</p>

	</div>

</body>
</html>


May I also suggest trying this FireFox HTML Validator Addon because it validates a web page immediately after rendering. Either a red, amber or green icon will show on the top left indicating validation errors, warnings or valid.

##Marc Gueury’s Mozilla Addon:

It helps if we use the same vocabulary. What is a “directive”?

3 Likes

Elements will support standard attributes such as id and class etc. I have no idea what you mean by “directive” but you can in html5 now have custom data attributes for storing additional data. The syntax is data- followed by a word of your choosing (lower case), then ="value", where “value” is the value you want to assign.
So you could have:-

<div data-directive="hell">

…and it would be perfectly valid in html5.

3 Likes

I was referring to this code…

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" w3-test-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        template : "I was made in a directive constructor!"
    };
});
</script>

</body>
</html>

w3-test-directive became a valid html stuff in this example . …this is where I am confused

Looks like it’s this:-

Angular is not my thing, so I don’t really understand it. All I know is that code does not validate with those “made-up” attributes.
Not sure if that’s a current thing (being w3schools) or if the data-* attribute has taken over the role for made-up attributes.

Hmmm. It’s a cinch that the code becomes non-standard with the angular JS attributes in it and that the page will probably not render correctly if the browser cannot load angular JS for any reason. Of course, that’s no different than using jQuery to code a page and not being able to access jQuery except that jQuery does not (or should not) require non-standard attributes in the HTML so the HTML is valid.

Personally, I don’t care for non-standard code.

A programmer probably understands the purpose of “directives”. I don’t.

Thanks for looking that up.

No, I think that was the reason for the introduction of the data-* custom attributes, so there is a standard way to add your own attributes without breaking validity.

I think we can answer the original question, as to whether the html is valid, in saying “no, it is not”. But I wonder if the topic should be passed over to our javascript experts to see if this is a proper way to achieve whatever it is the OP wants to do. :thinking:

1 Like

Aren’t the data- attributes for data storage? By themselves, they do not affect the element, do they? whereas the the angular JS “attribututes” are actionable by angular. Seems like angular could have used the data- attribute to preface theirs but that would have reduced efficiency a tad.

I agree the code isn’t valid and agree that forwarding the topic to the JS category would be appropriate. I’ll go ahead and move it. HA! You already did :smile:

Angular is a Google invention. That could account for the non-standard code

1 Like

I believe if you want the page to be valid then you pre-prend the custom attributes width data- to make them valid and according to the angular page they will still work.

Modern browsers however work fine with custom attributes (as most have done for years) and then data- attribute was introduced in html5 to standardise this. As usual because it works either way developers tend to ignore the standard if something works either way:(.

Generally angular sites are used to construct complex applications and the issue of js disabled is not really an issue because of the type of site that is being delivered. Usually a message would be delivered saying that ‘the application needs js to work’ or instead to offer a reduced set of features for normal browsing. Generally though these sites are too complex to offer a reduced set of features or would be unusable for the purpose they were designed. A normal website on the other hand that is just browsed without interaction (apart from forms) cannot be used as a real comparison and should of course work equally well with or without js.

3 Likes

I’m now getting more confused.

As per my understanding attributes are written in this way say
attribute=“somevalue”

but directves are wriiten without assigning any value …e,g mydirective (// note we do not assign any value to this)

is it right or wrong ?
we are talking about directives here.

Directives have nothing to do with html as they are angular speak. Your question was about valid html so all we need to focus on is the raw html.

Attributes are valid in html5 without asssigning a value to them (i.e. . HTML5 allows attribute values without quotes).

e.g.

This is valid:

<div data-ngBind>Test</div>

This is also valid:

<div data-ngBind="">Test</div>

This is not valid:

<div ngBind>Test</div>

What angular decides to do with the attributes is another matter and they can call them what they like (directives) but directives are not part of html as such. I assume that directive refers to the use of custom attributes but it has no bearing on the validity of the html as they are separate things.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.