Menu
can use anything in any order? does placing of <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> is important before <title>
this is most used, is it best way?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Title Goes Here</title> <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912"> <link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#wmd-input").focus(); $("#title").focus(); $("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); }); }); </script> </head> <body> <p>This is my web page</p> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script> </body> </html> this site http://stackoverflow.com doesn't have any encoding and <meta>
I use a CMS which has SEO component which adds every <meta> for SEO after all js and css. files. can placing of any elements in any order which are allowed in <head> affect document compatibility and encoding?
914
The HTML <head> Element The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
<meta> element: The <meta> element is used to specify the Character set, Page description, Keywords, Author of the document and Viewport settings.
In an HTML file, the html head is the first section in the code containing information about a web page's properties and links to external related files. For example, in the HTML head, you can have the title of the page, meta tags, CSS code, Open Graph tags, and JavaScript code.
Metadata typically define the document title, character set, styles, scripts, and other meta information. The following elements can go inside the <head> element: <title> (required in every HTML document)
In HTML, the DOCTYPE must come first, followed by a single <html> element, which must contain a <head> element containing a <title> element, followed by a <body> element. See the description of the global structure of an HTML document in HTML 4.01 and the HTML5 draft; the actual requirements are mostly the same other than the DOCTYPE, but they are described differently.
The actual tags (<html>, </html>, <head>, etc) are optional; the elements will be created automatically if the tags don't exist. <title> is the only required tag in HTML. The shortest valid HTML 4.01 document (at least, that I could generate) is (needs a <p> because there needs to be something in the <body> to be valid):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><title></title><p> And the shortest valid HTML5 document:
<!DOCTYPE html><title></title> Note that in XHTML, all tags must be specified explicitly; no elements will be inserted implicitly.
Browsers perform content type sniffing in some circumstances to determine the type of a resource that hasn't been specified using a Content-Type HTTP header, and also character encoding sniffing if the Content-Type header hasn't been supplied or doesn't include a charset (you should generally try to include these headers, and make sure that they are correct, but there are some circumstances in which you cannot, such as local files not transferred over HTTP). They only sniff a limited number of bytes at the beginning of the document for these purposes, though, so anything that is intended to affect the content sniffing or character encoding sniffing should be near the beginning of the document.
For this reason, HTML5 specifies that any meta tag which is used to specify the character set (either <meta http-equiv="Content-type" content="text/html; charset=..."> or simply <meta charset=...>) must be within the first 1024 bytes of the file in order to take effect. So, if you are going to include character encoding information within your document, you should put the tag early in the file, possibly even before the <title> element. But recall that this tag is unnecessary if you properly specify a Content-type header.
In CSS, later style declarations take precedence over earlier ones, all else being equal. So, you should generally put the most generic style sheets that may be overridden earlier, and the more specific style sheets later.
For performance reasons, it can be a good idea to put scripts at the bottom of the page, right before the </body>, because loading scripts blocks the rendering of the page.
Obviously, <script> tags should be ordered so that scripts that depend on each order have the dependencies loaded first.
On the whole, other than the constraints I have already specified, the ordering of tags within <head> shouldn't matter too much, other than for readability. I tend to like to see the <title> towards the top, and put the other <meta> tags in some sort of logical order.
Most of the time, the order you should put things into the body of an HTML document should be the order they should be displayed in, or the order they should be accessed. You can use CSS to rearrange things, but screen readers will generally read things in source order, search indexes will extract things in source order, and so on.
118
This is the template I use, just delete whatever you dont need for a new project.
<!doctype html> <html class="no-js" lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <meta name="robots" content="index, follow"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <link rel="stylesheet" href="scss/style.css" /> <!-- http://realfavicongenerator.net/ --> <meta property="fb:page_id" content=""> <meta property="og:title" content=""> <meta property="og:image" content=""> <meta property="og:description" content=""> <meta property="og:url" content=""> <meta property="og:site_name" content=""> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary"> <meta name="twitter:url" content=""> <meta name="twitter:title" content=""> <meta name="twitter:description" content=""> <meta name="twitter:image" content=""> <meta name="twitter:site" content=""> <script src="js/vendor/modernizr.js"></script> </head> <body> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
