I am learning about AngularJS and see it adds some of its own attributes that nor start with data neither are standard html tags attributes, like this:
<html ng-app>
or this:
<body ng-controller="PhoneListCtrl">
Where from do these ng-* attributes come and is that a valid HTML? Where can I read more about this?
Strictly speaking these extra attributes are not defined in the HTML specifications thus, are not valid HTML. You could say that AngularJS provides and parses a superset of the HTML specification.
However, as of v1.0.0rc1, you could use data-* attributes, for example <html data-ng-app> which, I believe, are valid HTML5. Source.
There is a guide to the AngularJS Compiler that contains some more information on the process. In short; the AngularJS compiler reads your HTML page, using these attributes to guide it as it edits and updates your page, after loading, via javascript and the HTML DOM.
From the docs: http://docs.angularjs.org/guide/directive
<!doctype html>
<html data-ng-app>
<head>
<script src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div data-ng-controller="Ctrl1">
These are all valid directive declarations:<br/>
<input ng-model='name'> <hr/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
</div>
</body>
</html>
I like the data-*whatever* declaration the best as it's HTML5 compliant.
So for any of my Angular declaration (e.g. ng-controller, ng-app, ng-repeat etc) or custom directives I'll always prefix them with data-.
Where from do these ng-* attributes come
From main ng module. Source code.
is that a valid HTML?
No. But attribute-style directives can be prefixed with x-, or data- to make it HTML validator compliant. See direcives documentation.
Another option is to ignore undefined attribute names. If you are using Eclipse, you can set this by going to project properties>>validation>>html syntax>>attributes>>ignore undefined attribute names.
Related
I'm creating an html form with a datepicker field. I'd like to force the names of the months to appear in french, regardless of the user's browser settings. Is there a way to do this?
The html code I have is:
<input type="date" name="closedate">
I found a webpage that suggested adding a language to the field, but it seems to have no effect.
<input type="date" name="closedate" lang="fr">
I am not using a framework. It's just plain html.
The most effective method seems to be setting an element's translate attribute to no and adding the class notranslate:
<html lang="fr">
<div>
Bonjour
</div>
<div translate="no" class="notranslate">
Bonjour
</div>
</html>
Now the latter <div> content should not be translated.
As your native language is French, here is a duplicate of the above in English, which Chrome should try to translate:
<html lang="en">
<div>
Hello
</div>
<div translate="no" class="notranslate">
Hello
</div>
</html>
To test this code, you may have to save the code in a separate html file, and open it in Chrome, then said "Yes" to translating the page.
translate="no" appears to be the officially recommended method (references: 1, 2), although did not seem to be effective on its own. Adding the class="notranslate" was what allowed this to work in my testing. As of now, Google translate seems to recognize this class, and will not translate within a class="notranslate" element. I could only find various articles on it though (references: 1, 2), no official documentation.
I'm working on some oracle code to generate an HTML eMail. It's mostly working, but I took the resulting HTML and placed it in Dreamweaver CS6 to use the validation. I get a few errors:
1) No Character encoding declared at document level [HTML 4.01]
2) element "U" undefined [HTML 4.01]
The html code is generated automatically by a rich text editor widget. Should I use something other than HTML 4.01? I'm not too savvy with HTML Header code.
Here's the HTML code that is generated from my test.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Saint Susanna Parish Mailing</title>
</head>
<body>
<p>This is normal text</p>
<p>
<strong>This is bold</strong>
</p>
<p>
<u>This is Underscored</u>
</p>
<ol>
<li>
<span style="color:#ff0000;">This is numbered</span>
</li>
</ol>
<ul>
<li>This is bulleted</li>
</ul>
<p style="text-align: center;">This is centered</p>
<p>
<span style="font-size:18px;"><span style="font-family: times new roman,times,serif;">This is a new font</span></span>
</p>
<p style="text-align: right;">This is right justified</p>
<p> </p>
</body>
</html>
Thanks for looking at this.
I think the encoding can -and must- be specified in the mail headers, so I would ignore that warning.
The article The Importance of Content-Type Character Encoding in HTML Emails says:
[The client] will display the email based on what Content-Type has been set.
However, email clients read the Content-Type value that is set in the
email header and they completely ignore the META tag that is within
the HTML.
So that suggests that you should add the proper header, and can safely ignore the validator's warning, although it can't hurt at all to add the meta tag as well.
If you want a second opinion, you can try the W3C Markup Validation Service, although that one might also complain about missing content types. After all, these validators don't know what headers you are going to supply.
Different rules apply to HTML mail anyway. Clients ignore basically everything that is outside of the body. They also filter out all kinds of attributes, won't allow JavaScript and fully ignore external stylesheets and inline style tags.
The <u> tag was deprecated in HTML 4.01 but not obsolete. In that case the validator seems to be wrong, so I would ignore that warning as well. I wouldn't underline text at all though, because obviously that text could easily be mistaken for a link. If you need to, and you don't want to use <u>, you can use an inline text-decoration style.
Some suggestions:
U can do a lot of control by using classes etc - declared in a style.css file that u call first as well.
<!DOCTYPE HTML> - HTML 5
<b> and </b> can replace strong to save characters
<link rel="stylesheet" type="text/css" href="../style.css" title="Standard Style">
Is class a legal attribute of the HTML element?
<html class="...">
My Oracle ADF application does this — why?
It is not valid in HTML 4:
<!ENTITY % html.content "HEAD, BODY">
<!ELEMENT HTML O O (%html.content;) -- document root element -->
<!ATTLIST HTML
%i18n; -- lang, dir --
>
It is not valid in XHTML 1.0:
<!ELEMENT html (head, body)>
<!ATTLIST html
%i18n;
id ID #IMPLIED
xmlns %URI; #FIXED 'http://www.w3.org/1999/xhtml'
>
It is valid in HTML 5:
The following attributes are common to and may be specified on all HTML elements (even those not defined in this specification):
...
class
...
My Oracle ADF application does this - wounder why
Presumably to apply style or JS from a shared external file to specific pages.
There are some great reasons to use a class on the HTML tag.
You can use such css globals to style around different pages, different browsers, etc.
modernizr uses this technique
css_browser_selector.js uses this technique
Richard Pianka discusses how the technique is used in the above css_browser_selector script
Chris Coyier discusses why the technique is useful
Further Reading:
Avoid setting a global class for html
"The class attribute is not valid in: base, head, html, meta, param, script, style, and title".
http://www.w3schools.com/tags/att_standard_class.asp
You can get what you want using this pattern :
<html>
<body class="">
</body>
</html>
or (better, I guess)
<html>
<body>
<div class="">
</div>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want to place an example of code without the tags being processed?
Xmp tag will work:
<xmp>
...code...
</xmp>
ETA:
As of this writing this still works in all major browsers, but as others have pointed out it has officially been obsoleted in HTML5 [link]. Browsers could stop rendering it any day without warning or notice and it should be avoided for production sites. Still, there is no replacement that doesn't involve HTML encoding your string manually or using iframe trickery. It still has a place in my personal utility page tool-belt, but I would not consider it for a client.
The <pre> tag allows you to display text with whitespaces and line breaks as-is. Also, code must be entity-encoded:
For example, the code sample
<html>
<head><title></title></head>
<body></body>
</html>
will become
<pre><html>
<head><title></title></head>
<body></body>
</html></pre>
< encodes into < & encodes into &
PHP htmlentities does the job:
<pre><?php echo htmlentities($code) ?></pre>
<textarea> does the job too: it also allow the code to be copied.
To present code in HTML typically one would use the <code> tag.
Your question isn't very clear, and I don't know what you mean by "without the tags being processed". If you're saying that you want to present a fragment of HTML as code in an HTML page (for example), then you need to "escape" the HTML tags so that the web client doesn't attempt to parse them.
To do this, you should use the entity > for the greater-than angle bracket, and < for the less-than bracket.
Try:
<xmp></xmp>
or
<code></code>
for exemple:
<pre>
<xmp><!-- your html code --></xmp>
</pre>
<pre>
<code><!-- your html code --></code>
</pre>
bye
put it in a text area, its an html tag that will prevent all text inside him to be rendered
If you're using an XHTML <!DOCTYPE> declaration, then you could use CDATA sections:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>My Example</title>
</head>
<body>
<h1>Example!</h1>
<pre><code>
<![CDATA[
<div>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</div>
]]>
</code></pre>
</body>
</html>
Note that you'll want to use a .xhtml file extension and you'll want to consider serving these documents with a Content-Type: application/xhtml+xml header.
The only thing I can think of is just converting all your ‘<’ and ‘>’ to ‘<’ and ‘>’ respectively
Beyond putting your code in 'pre' tags and escaping th '<' and'>' you may want to look as syntax highlighting. A good library for this was written by Alex Gorbatchev.
http://alexgorbatchev.com/SyntaxHighlighter/
Run the HTML you wish to display though htmlspecialchars() to properly escape the code you wish to display if you're using PHP. Do NOT use htmlentities() because your browser will choke on extended characters. Just make sure your page's encoding is set correctly in the <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> if you are outputting UTF-8 for example.
Good luck.
You can use textarea with this way.
<textarea class="form-control" rows="25">
<form action=".. " method="post" id="postForm">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" value="Customer Name" /></td>
</tr>
</table>
</form>
</textarea>
Note this use Bootstrap 3, if you want pure html remove textarea class and rows attribute.
Make it a comment.
<p>This will be rendered.</p>
<!-- from here on, this is a comment
<p>This won't be rendered.</p>
end of comment -->
<p>This will be rendered too.</p>
This works like a gem. I am trying to get the code on the HTML page. We need to use the combo as below. I have tested this as well.
<xpm>
<pre>
#include<stdio.h>
void fun(){
printf("%s","yooo");
}
fun();
</pre>
</xpm>
Visual Studio doesn't like on-page anchor tags:
Validation (XHTML 1.0 Transitional):
Attribute 'name' is considered
outdated. A newer construct is
recommended.
I'm using name attributes in this way…
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
...
<body>
...
<p>On this page…</p>
<ul>
<li>Section One</li>
...
</ul>
...
<h2><a name="one">Section One</a></h2>
...
</body>
</html>
Is there really a more-modern way of doing this? Or is Visual Studio full of crap?
You should use the id attribute instead. Works the same way, and you don't need an artifical <a name=...>, but simply
<h2 id="one">Section One</h2>
name attributes are deprecated in XHTML 1.0 - you can use an id attribute in the same way though, see Fragment Identifiers in the HTML Compatibility Guidelines of the XHTML spec.
So you can simply use
<h2><a id="one">Section One</a></h2>
But note that the 1.0 spec recommends playing it safe with something like this:
<h2><a name="one" id="one">Section One</a></h2>
However, your fragment uses XHTML 1.1, where the name attribute has been entirely removed from a and map elements - so you can only use an id.
I believe the modern approach is to use the id attribute, which would be evaluated as an anchor. For example, if you changed
<h2><a name="one">Section One</a></h2>
to
<h2><a id="one">Section One</a></h2>
You would still address it as page.html#one.
You can also link on a section header :
Table of Contents
<P>
Introduction<BR>
Some background<BR>
On a more personal note<BR>
...the rest of the table of contents...
...the document body...
<H2 id="section1">Introduction</H2>
...section 1...
<H2 id="section2">Some background</H2>
...section 2...
<H3 id="section2.1">On a more personal note</H3>
...section 2.1...
[...]
</P>
Source: http://www.w3.org/TR/REC-html40/struct/links.html
I believe the proper way to do it is <a id="one">
Yes it is outdated. You should replace with the "id" attribute.
Quoting w3schools page:
"The id Attribute Replaces The name Attribute
HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead."
http://www.w3schools.com/Xhtml/xhtml_syntax.asp
name= attributes are for labeling elements in a form, and can only be used on <form> elements (input, textarea, select etc). For everything else, ID= is used. Exactly why the W3C folks thought two different ways of naming an element (with different sets of allowable characters) were needed is not readily known.
But here http://www.w3.org/TR/html4/struct/links.html#h-12.2.3 I read this: "Some older user agents don't support anchors created with the id attribute." So?
Until <a name="..."></a> is no longer supported by the (X)HTML standard you are using--and not just deprecated--it may be safest to use both name and id on anchors linking to a part of the same page. From the W3C's XHTML 1 spec:
In XML, URI-references RFC2396 that end with fragment
identifiers of the form "#foo" do not refer to elements with an attribute name="foo"; rather,
they refer to elements with an attribute defined to be of type ID, e.g., the id attribute in HTML
4. Many existing HTML clients don't support the use of ID-type attributes in this way, so identical
values may be supplied for both of these attributes to ensure maximum forward and backward
compatibility (e.g., <a id="foo" name="foo">...</a>).