I'm trying to serve a dynamically generated html page with Erlang Cowboy, but it comes up as text in Firefox 14.0.1.
Here's the doctype and initial header tags copied from browser page source:
<DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset="UTF-8"><title>Welcome!</title>
<link href="css/bootstrap.css" rel="stylesheet">
yada yada
If I leave off the doctype, it displays as intended.
Bootstrap Scaffolding (http://twitter.github.com/bootstrap/scaffolding.html) calls for the html doctype.
I'm not sure if this is a problem with my html or my Cowboy configuration.
Here's the relevant portion of Dispatch in _app.erl:
{['...'], cowboy_http_static,
[ {directory, {priv_dir, cw, []}},
{mimetypes, [ {<<".css">>, [<<"text/css">>]} ]}
Can someone please show the me error of my ways?
Many thanks,
LRP
Try this
{['...'], cowboy_http_static,
[ {directory, {priv_dir, cw, []}},
{mimetypes, [{<<".css">>, [<<"text/css">>]},
{<<".html">>, [<<"text/html">>]}]}
I use cowboy_static to serve a DOCTYPE html and it serves fine, with the correct mimetype.
Missing the exclamation mark: "!DOCTYPE" instead of "DOCTYPE"
<!DOCTYPE html>
See http://www.w3schools.com/tags/tag_doctype.asp
Edit: Firefox and Chrome accepts <DOCTYPE html> as well. So the issue is most probably the Mimetype.
Related
I'm just trying to post a simple html file consisting mainly of some prose I wrote inside of <pre> elements.
Interestingly, when I view the file on my computer with my browser, the quotation marks display fine. But when I upload it to my website, quotation marks are rendered as something like “ or â€. I have looked around the web for solutions but they were few and in between.
I tried to use the meta tag and included
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
to my header but to no avail. Any ideas on how to solve this? It just wouldn't make sense to go back to the content inside the elements and code it into html as the prose is a draft and will go through many changes in the future.
The <!doctype html> tag indicates the file is HTML5 - so the browser will render it as such. lang="en" should be set to the language you are working with. Be sure to use the <meta charset="utf-8"> tag to set the character set in the <head>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template</title>
</head>
<body>
<pre>This is my stuff</pre>
</body>
</html>
Check your code with the browser's View Source and use the Validator at https://validator.w3.org/ to check the page.
Here what I tried.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<pre>Einstein said,"Once you stop learning, you start dying"</pre>
</body>
</html>
I also tried only this
<body>
<pre>Einstein said,"Once you stop learning, you start dying"</pre>
</body>
Still working
My code says
example.com
But when it comes to the browser, it looks like the following and the link is not working.
<a href="http: www.example.com"="">example.com</a href="http:>
Do you have any idea why this is happening?
Looks like you copied or accidentally added a blank space in the html. Simply set your cursor in front of the a and hit backspace till you hit the < ;-) Rinse and repeat for the closing bracket.
Make sure to specify a doctype and a charset on your HTML file. Also remember to save your file as ".html" or ".htm".
Here is a small example of a basic HTML structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your document title</title>
</head>
<body>
Your code goes here.
example.com
</body>
</html>
What is the correct way to use start tag when creating with HTML5
IE: HTML 4 Strict is like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The standard has been simplified because the previous doctypes were too cryptic. The new doctype is simply <!DOCTYPE html> . You may wonder why it is not <!DOCTYPE html5> but it is simply because it is just an update to the standard of HTML and not a new version of anything. As you can see below, all elements can now have a language attribute.
The <html> element is the root element of a document. Every document
must begin with this element, and it must contain both the <head> and
<body> elements.
It is considered good practice to specify the primary language of the
document on this element using the lang attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>
Jamie was here.
</p>
</body>
</html>
More info: https://dev.w3.org/html5/html-author/#doctype-declaration
you just use
<!DOCTYPE html>
<html>
</html>
First of all, html5 doctype is not case sensitive.
Either one of these three will work:
1) <!DOCTYPE html>
2) <!DOCTYPE HTML>
3) <!doctype html>
You can check the validity here.
It's as simple as
<!DOCTYPE html>
According to the WWW Consortium, the organization responsible setting current web standards, no one has answered this correctly.
The current standard for language declaration is
Always use a language attribute on the html tag to declare the default
language of the text in the page. When the page contains content in another
language, add a language attribute to an element surrounding that content.
Use the lang attribute for pages served as HTML, and the xml:lang attribute
for pages served as XML. For XHTML 1.x and HTML5 polyglot documents, use both
together.
W3C HTML Language Tag Page
Here is the answer regarding DOCTYPE declaration
Use the following markup as a template to create a new HTML document using a
proper Doctype declaration. See the list below if you wish to use another DTD.
W3C DOCTYPE Standards
<!DOCTYPE html>
<html>
<head>
<title>An HTML standard template</title>
<meta charset="utf-8" />
</head>
<body>
<p>… Your HTML content here …</p>
</body>
</html>
Hope this helps.
You use...
<!DOCTYPE html>
followed by your HTML tag etc..
You only need this:
<!DOCTYPE html>
<html>
...
There are several points here. This is supported by all browsers, even old ones like IE6/IE7. All browsers actually nee "html" part from doctype declaration to jump into standards mode.
<!-- simplified doctype works for all previous versions of HTML as well -->
<!doctype html>
Learning Resource:
http://diveintohtml5.info/
http://www.html5doctor.com
The start tag <html> is optional in HTML5, as in HTML 4.01. If used, it must be the first tag. It has different optional attributes: the global attributes of HTML5, and the special manifest attribute. The most common useful attribute in the <html> tag is the lang attribute.
(The doctype declaration is something quite different, and not a tag at all.)
The clearest most definitive answer of what the standard says seems to be for HTML 5.3 at:
http://w3c.github.io/html/syntax.html#the-doctype
Note especially the list-items 1 and 3 which specify that the doctype-statement is case-insensitive. Also note the number of spaces inside the statement can vary.
And note the clause "A DOCTYPE is a required preamble."
I have the following at the top of my document:
<html class="js" lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
Can someone tell me if I need the xmlns part? I am not 100% sure but I think this is
doing some things to my tags. For example when I look at the tag is see the
following with firebug:
element.style {
height: 100%;
}
If I just have this as at the top of my code then I don't see the element.style ..
<html class="js" lang="en">
Just to give some background. I'm developing an MVC application for use with English. It uses HTML5 things in a few places.
For the current html spec, (which is html5) you will not need any fancy attributes, the following is adequate:
<!DOCTYPE html>
<html>
<head>
<title>Html page</title>
</head>
<body>
<p>This is an example Html page.</p>
</body>
</html>
Also, if you are not using the html5 spec, you should.
If you are using HTML5, then the extra tags probably should not be there as they are not needed any longer.. HTML5 uses a much cleaner syntax. :)
Here is the W3 documentation about this
You do not need to give those attributes in the tag.
<html>
</html>
will work fine even in HTML5 or HTML 4.01
The xmlns attribute may be needed if the document will be processed by XML tools that do not necessarily use HTML namespace as the default. You can see this by saving the document locally and opening it in Firefox; if the xmlns attribute is missing, Firefox will display the document source, just with XML syntax coloring, because it treats all tags just as pure markup with do meaning or default rendering rules.
If the document is served as HTML (Content-Type: text/html), then browsers will imply HTML semantics (HTML namespace).
Regarding the question you asked in the heading, you should put a doctype declaration, such as <!DOCTYPE html>, for all new documents. Otherwise you will trigger Quirks Mode, which means a large and undocumented set of oddities.
I am using DreamWeaver to code xHtml docs. in the program the code is valid but when I upload it in the inspect element I see double <head> tags and when I right-click to see the source file it seems o.k.
Is it because I'm using dreamweaver? what can be wrong?
the first error is : "Extra <html> encountered. Migrating attributes back to the original <html> element and ignoring the tag." - in line 3
The code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="the content of my doc" />
<meta name="description" content="this is an example document" />
<link rel="alternate" type="application/rss+xml" title="rss feeds" href="linkto/xml/feeds.xml" />
<!-- scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>The Title</title>
</head>
<body>
<!-- content -->
</body>
</html>
Thank you very much.
No problem in Chromium 5.0.307.9 (Developer Build 39052) under Linux. I can't test it in Safari now.
EDIT: Proposed test case had nothing to do with this problem, neither could see any extra <head> tags. However, I looked at the Developer Tools of Safari and Chrome under Windows and Firebug in Firefox and all three rendered the DOM incorrectly. Just have a look at this picture and see that the first <link> tag has jumped into the body.
This problem also has nothing to do with Javascript because when turning off Javascript the result is the same, even more clear when comparing with the source code. Strange I didn't notice this under Linux.
The Developer Tools of the WebKit browsers give an even clearer picture (also notice the jQuery error message). I suspect the Unicode Byte-Order Mark (BOM) at the beginning of the file causing the problem: as you can see the BOM is moved to the <body> of the document, perhaps dragging several elements in the <head> with it. But also the unclosed <link> elements, as shown by the W3C validator, might give some issues, although browsers usually handle this without any problems. First get rid of the BOM in your file and see if the problem persists.
And I see another error: those tags beginning with <meta ... are called meta tags, not "meat tags". ;-)
You should have a title element what you write between
the <title></title> tags will been displayed in top bar of your browser
Just make sure your
</head>
tag has the slash in the actual file you're working on. That's an easy typo.
To remove BOM from your document, you can use this php function:
function removeBOM($str=""){
if(substr($str, 0,3) == pack("CCC",0xef,0xbb,0xbf)) {
$str=substr($str, 3);
}
return $str;}