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">
Related
Is the following W3C Compliant:
<div>
<h3>Heading</h3>
This is the text for this section.
</div>
Or does the text require a container element?
<div>
<h3>Heading</h3>
<p>This is the text for this section.</p>
</div>
The first example doesn't sit right with me, but a content editor asked me and I realized I don't really know if it's okay.
Both examples are valid.
Technically in the first one, the text is inside a container, the outer <div>.
Anyway it is perfectly valid to put text directly inside the <body>, which means the following HTML document will pass validation with no errors or warnings:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>Heading</h3>
This is the text for this section.
</body>
</html>
The more relevant question is whether it is semantically correct. To put it simply, paragraph text should be surronded by a <p> tag. More generally each type of content SHOULD be written inside the semantically relevant tag.
I will advise you to use the second approach.
When you use the correct Heading Tag it helps boost your page SEO wise.
Moreover, paragraph tag, P, helps some browser to render your page in “reading mode”.
Finally, a div is a block-displayed element. This CSS code looks a bit weird: div {color: blue}. But, p { color: red; } make more sense for a lot people.
Technically, both are conforming HTML (unless you validate it against the strict HTML4.x/XHTML1.x scheme which has no connection to reality anymore). Hovewer, the second approach would be probably more convenient from the styling/scripting perspective, where it's always better to have a possibility to address any piece of content directly. The first example has an implicit paragraph, and explicit is usually better than implicit.
Not sure how to tag this question. I have a database of XHTML documents that are converted by LaTeXMLpost; however, saying that they have validation issues is an understatement. I need to show them inside a browser. However, tag autoclosing due to invalid markup messes up my structure.
A minimal example:
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="content" style="background-color:pink">
<!-- yield -->
<section >
<ul>
<li>
<div>
<p>
First
<li>
<div>
<p>
Second
</p>
</div>
</li>
</p>
</div>
</li>
</ul>
</section>
<section>
Next
</section>
<!-- end yield -->
</div><!-- end content -->
</body>
</html>
jsfiddle
Everything outside comments is layout; inside it is the loaded document. If things were taken at face value, everything should be pink, right?
The problem is, "Next" gets booted outside the #content. Even though it is valid XML, it does not conform to HTML/XHTML DTD (or whatever passes for DTD in HTML5), so it gets mangled.
The question is: How can I protect my layout against invalid markup inside it? Can I do something to the content to normalise it? I'm loading it into Nokogiri before displaying, but I still end up in this mess anyway (since the XML isn't malformed, I suppose, Nokogiri doesn't do anything about it).
I don't care if it's displayed nicely or not, all I care now is that it remains safely contained (otherwise I have trouble with manipulating it, attaching events, styling, and pretty much everything else).
You can try Nokogiri it has some built-in functionality for fixing invalid mark-up.
Related question : Repairing invalid HTML with Nokogiri (removing invalid tags)
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.
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>
Is there a coding standard for HTML? Please suggest links that have the coding styles for HTML.
For example:
<table>
<tr>
<td>
Data
</td>
</tr>
</table>
Here's a few standards to add to your list.
1. Indentation
You seem to have the right idea on this already. The main purpose of indentation should be to make it clear where a tag is opened and closed. Consider this example.
<div><p>Hello World</p><div><p>Hello World</p></div>
This looks okay until you indent it properly and spot the error:
<div>
<p>Hello World</p>
<div>
<p>Hello World</p>
</div>
The original div wasn't closed. Ooops! This is why indentation can be a great time saver.
2. Tags and Attributes
It is generally accepted now that all tags and attributes should be lower case. We dispensed with ALL CAPS tags a long time ago in HTML and also with camelCasing for things like onMouseOver and onClick, which are now all lower case. All attribute values should be surrounded with double-quotes. For example:
<div id="content">Hello</div>
Not
<div id=content>Hello</div>
<DIV ID="content">Hello</DIV>
3. Semantic mark-up only
Don't use any tags to infer style or to control style. For example...
<font>
<b>
Or attributes like...
<table border="2">
Also, don't use things like h1 tags just to get a bigger font.
Try to think of what the tag means, "h1" is a top level heading, "p" is a paragraph, "table" denotes data laid out in a tabular format. Never use a tag for a different purpose to what is intended and try to know what tags are available. For example, using lists instead of manually laying out lists of things.
Don't use tables for layout. (I have emphasised this important point using the semantic "em" tag).
Don't use too many div tags to solve a problem! (div-itus!)
Firstly choose your doctype and then validate your html against the W3C validator for formatting errors
Other things to consider off the top of the head are
Proper indentation
Resisting the temptation to add too much markup i.e. keep the markup simple
Structure your html semantically so that if you switched off style sheets the document would still make sense and be in the right order
Avoid deprecated tags e.g. <font>
Choosing generic class names e.g. mainHeader instead of largeRedHeader
Use classes for repeating elements and ids for elements that appear once
Use classes and ids on parent elements only and style child elements using css e.g. #intro > p instead of #intro .paragraph
HTML Tidy provides a pretty reasoble style, which it will also help you enforce.
Did you mean indentation style? Here is the de facto indentation style:
<table>
<tr>
<td>One line of text - no indent.</td>
<td>
<p>
Multiple lines of text. <br />
With line breaks - indent.<br />
Inline: <b>no indent</b>
</p>
</td>
</tr>
</table>
However, the style above takes too much spaces, for some indentation styles, HTML, HEAD and BODY are not indented.
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<h1>Title</h1>
<p>Hello, world! The content begins here.</p>
</div>
</body>
</html>
Personally I follow the xhtml standards (all open tags get a closed tag, case sensitivity and so on). It makes it easier to follow the code and to format things automatically. I also generally indent everything 1 from their parents:
<table summary="example table">
<tr>
<td>
Data
</td>
</tr>
</table>
I also tend to try and include all of the required attributes for accessibility, I figure it is a nice thing to do.