Doesn't the file type already let the browser know that the document is an html document. MDN mentions that it is the root element, so is using it just a formality?
It is a family trait of HTML, XML, and SGML that they all need to be nested inside a root element. It's just part of the data standard and lets the interpreter know where to start and stop, and verifies that the document is complete and well-formed.
<!DOCTYPE html> specifies the type of document. In that case it means that it is HTML 5 currently, as opposed to XML or XHTML 1.0 transitional, as examples. Keep in mind that if you are downloading these as byte streams you may not always know the file type.
Yes. The <html> tag is the root and can even be omitted in somes cases (from MDN):
The start tag may be omitted if the first thing inside the <html> element is not a comment. The end tag may be omitted if the <html> element is not immediately followed by a comment, and it contains a <body> element either that is not empty or whose start tag is present.
But not only:
It can be styled with CSS (though styling the <body> will usually be enough).
It can have global attributes, especially lang, which is the W3C way of defining an HTML document language.
There is probably more to say but that’s what I see as arguments for the <html> element, apart from its main role of being the root element for an HTML document.
I am working on a website consists of four languages (Arabic, English, French and Spanish), (Arabic is a right-to-left language for people who don't know that).
Basically left-to-right (en, es and fr) sites will have the same layout/CSS.
in order to handle different arabic styles I am wondering between two methods:
1. specific language/direction class:
adding the following classes to html tag, and using one simple file to handle that
arabic <html class="ar rtl" dir="rtl">
english <html class="en ltr">
french <html class="fr ltr">
spanish <html class="sp ltr">
2. using separate files:
in this case I would use lets say a common.css file for all common things, and load a separate specific language/direction file (something like arabic.css or western.css)
What do you think the best option will be ?
Thanks
Option #2 sounds like the more manageable solution. This way you can simply load the appropriate style sheet based on the language chosen. Since it sound like the text in your webpage updates based on the language selected (ie it is not physically written out twice) two separate style sheets will allow you to modify the layout without messing with the content in the html markup. So more information on how the languages are going to be switch might help you to get better answers.
I am not really sure why you need specific classes for Arabic texts. OK, you might want to modify fonts (as in font-family or font-size) but not much more than that. To switch directionality, you should use dir attribute (that is W3C recommendation).
As for styling elements, if you really need to modify styles for each element, you might want to use universal selector:
* { font-family: Verdana; }
For elements in given language (if you remember to use lang attribute), you can also use universal selector in conjunction with lang pseudo-selector (beware that some web browsers does not seem to support it, although it should be supported since CSS2):
*:lang(ar) { font-size: 14px; }
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Does <STYLE> have to be in the <HEAD> of an HTML document?
I am part of a team that has developed a CMS system.
We would like to be able to insert <style> tags within the <body> of an HTML page in a way that validates to W3C standards, as validation is a requirement of our SEO consultant.
The style tag functions perfectly well within the body tag across all browsers, yet it refuses to validate.
The HMTL DTD does not allow it, therefore it doesn't validate. Doesn't matter, all browsers support it anyway.
The HTML 4 spec states that is supposed to be within the HEAD element, not the BODY element. See also this related (duplicate?) question
does-style-have-to-be-in-the-head-of-an-html-document
W3C HTML 4.01 ref on <style>
HTML permits any number of STYLE elements in the HEAD section of a document.
<style> elements contain meta data that applies to the whole document. This is what the <head> element was designed to contain. It just makes sense for them to live in the head, so that is where the specification requires that they be.
Literally, a <style> tag within the <body> tag won’t validate because all the HTML specs say it can’t be there.
As to why the specs say that, I don’t know. The requirement is still in the latest HTML spec, and recently things that work in the real world that were forbidden by previous specs (e.g. omitting the type attribute on the <style> tag) have been allowed, so I’m assuming there must be a reason why the requirement is still there.
I imagine there are some cases where including a <style> tag in the body makes page rendering harder/slower/less reliable.
What are you validating against? HTML, XHTML Transitional, XHTML strict?
Probably because inline styles are not valid in XHTML Strict. You need to use class="foo" instead, and define foo inside a CSS file.
I need to know what is the use of <html> tag from the beginning of the webpage although website runs perfectly without these <html> </html> tags.
I knew that doctype is required but why this <html> tag is required.
The <html> tag is not required.
From the DTD:
<!ELEMENT HTML O O (%html.content;) -- document root element -->
The two Os indicate that the start and end tags (respectively) are optional.
The element, on the other hand, is required (but the language is designed so that browsers can imply it).
Since a DOM consists of a tree of nodes, you have to have one node (the root element) for everything else to hang from, and that is the html element.
It is also a really useful place to stick a lang attribute that will apply to the entire document.
You don't have to use it, it's optional:
7.3 The HTML element
Start tag: optional, End tag: optional
Source: http://www.w3.org/TR/html401/struct/global.html#h-7.3
It is optional tag, but some browsers add it to page, when you are browsing.
generally it works
but when we have to give some arguments like html vesion
any encryption then these are followed through tag
I want to create something like
<menu>
<lunch>
<dish>aaa</dish>
<dish>bbb</dish>
</lunch>
<dinner>
<dish>ccc</dish>
</dinner>
</menu>
Can it be done in HTML5?
I know I can do it with
<ul id="menu">
<li>
<ul id="lunch">
<li class="dish">aaa</li>
<li class="dish">bbb</li>
</ul>
</li>
<li>
<ul id="dinner">
<li class="dish">ccc</li>
</ul>
</li>
</ul>
but it is so much less readable :(
You can use custom tags in browsers, although they won’t be HTML5 (see Are custom elements valid HTML5? and the HTML5 spec).
Let's assume you want to use a custom tag element called <stack>. Here's what you should do...
STEP 1
Normalize its attributes in your CSS Stylesheet (think css reset) -
Example:
stack{display:block;margin:0;padding:0;border:0; ... }
STEP 2
To get it to work in old versions of Internet Explorer, you need to append this script to the head (Important if you need it to work in older versions of IE!):
<!--[if lt IE 9]>
<script> document.createElement("stack"); </script>
<![endif]-->
Then you can use your custom tag freely.
<stack>Overflow</stack>
Feel free to set attributes as well...
<stack id="st2" class="nice"> hello </stack>
I'm not so sure about these answers. As I've just read:
"CUSTOM TAGS HAVE ALWAYS BEEN ALLOWED IN HTML."
http://www.crockford.com/html/
The point here being, that HTML was based on SGML. Unlike XML with its doctypes and schemas, HTML does not become invalid if a browser doesn't know a tag or two. Think of <marquee>. This has not been in the official standard. So while using it made your HTML page "officially unapproved", it didn't break the page either.
Then there is <keygen>, which was Netscape-specific, forgotten in HTML4 and rediscovered and now specified in HTML5.
And also we have custom tag attributes now, like data-XyZzz="..." allowed on all HTML5 tags.
So, while you shouldn't invent a whole custom unspecified markup salad of your own, it's not exactly forbidden to have custom tags in HTML. That is however, unless you want to send it with an +xml Content-Type or embed other XML namespaces, like SVG or MathML. This applies only to SGML-confined HTML.
I just want to add to the previous answers that there is a meaning to use only two-words tags for custom elements.
They should never be standardised.
For example, you want to use the tag <icon>, because you don't like <img>, and you don't like <i> neither...
Well, keep in mind that you're not the only one. Maybe in the future, w3c and/or browsers will specify/implement this tag.
At this time, browsers will probably implements native style for this tag and your website's design may break.
So I'm suggesting to use (according to this example) <img-icon>.
As a matter of fact, the tag <menu> is well defined ie not so used, but defined. It should contain <menuitem> which behave like <li>.
As Michael suggested in the comments, what you want to do is quite possible, but your nomenclature is wrong. You aren't "adding tags to HTML 5," you are creating a new XML document type with your own tags.
I did this for some projects at my last job. Some practical advice:
When you say you want to "add these to HTML 5," I assume what you really mean is that you want the pages to display correctly in a modern browser, without having to do a lot of work on the server side. This can be accomplished by inserting a "stylesheet processing instruction" at the top of the xml file, like <?xml-stylesheet type="text/xsl" href="menu.xsl"?>. Replace "menu.xsl" with the path to the XSL stylesheet that you create to convert your custom tags into HTML.
Caveats: Your file must be a well-formed XML document, complete with XML header <xml version="1.0">. XML is pickier than HTML about things like mismatched tags. Also, unlike HTML, tags are case-sensitive. You must also make sure that the web server is sending the files with the appropriate mime type "application/xml". Often the web server will be configured to do this automatically if the file extension is ".xml", but check.
Big Caveat: Finally, using the browsers' automatic XSL transformation, as I've described, is really best only for debugging and for limited applications where you have a lot of control. I used it successfully in setting up a simple intranet at my last employer, that was accessed only by a few dozen people at most. Not all browsers support XSL, and those that do don't have completely compatible implementations. So if your pages are to be released into the "wild," it's best to transform them all into HTML on the server side, which can be done with a command line tool, or with a button in many XML editors.
Creating your own tag names in HTML is not possible / not valid. That's what XML, SGML and other general markup languages are for.
What you probably want is
<div id="menu">
<div id="lunch">
<span class="dish">aaa</span>
<span class="dish">bbb</span>
</div>
<div id="dinner">
<span class="dish">ccc</span>
</div>
</div>
Or instead of <div/> and <span/> something like <ul/> and <li/>.
In order to make it look and function right, just hook up some CSS and Javascript.
Custom tags can be used in Safari, Chrome, Opera, and Firefox, at least as far as using them in place of "class=..." goes.
green {color: green} in css works for
<green>This is some text.</green>
<head>
<lunch>
<style type="text/css">
lunch{
color:blue;
font-size:32px;
}
</style>
</lunch>
</head>
<body>
<lunch>
This is how you create custom tags like what he is asking for its very simple just do what i wrote it works yeah no js or convoluted work arounds needed this lets you do exactly what he wrote.
</lunch>
</body>
For embedding metadata, you could try using HTML microdata, but it's even more verbose than using class names.
<div itemscope>
<p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>
<div itemscope>
<p>My name is <span itemprop="name">Daniel</span>.</p>
</div>
Besides writing an XSL stylesheet, as I described earlier, there is another approach, at least if you are certain that Firefox or another full-fledged XML browser will be used (i.e., NOT Internet Explorer). Skip the XSL transform, and write a complete CSS stylesheet that tells the browser how to format the XML directly. The upside here is that you wouldn't have to learn XSL, which many people find to be a difficult and counterintuitive language. The downside is that your CSS will have to specify the styling very completely, including what are block nodes, what are inlines, etc. Usually, when writing CSS, you can assume that the browser "knows" that <em>, for instance, is an inline node, but it won't have any idea what to do with <dish>.
Finally, its been a few years since I tried this, but my recollection is that IE (at least a few versions back) refused to apply CSS stylesheets directly to XML documents.
The point of HTML is that the tags included in the language have an agreed meaning, that everyone in the world can use and base decisions on - like default styling, or making links clickable, or submitting a form when you click on an <input type="submit">.
Made-up tags like yours are great for humans (because we can learn English and thus know, or at least guess, what your tags mean), but not so good for machines.
Polymer or X-tags allow you to build your own html tags. It is based on native browser's "shadow DOM".
In some circumstances, it may look like creating your own tag names just works fine.
However, this is just your browser's error handling routines at work. And the problem is, different browsers have different error handling routines!
See this example.
The first line contains two made-up elements, what and ever, and they get treated differently by different browsers. The text comes out red in IE11 and Edge, but black in other browsers.
For comparison, the second line is similar, except it contains only valid HTML elements, and it will therefore look the same in all browsers.
body {color:black; background:white;} /* reset */
what, ever:nth-of-type(2) {color:red}
code, span:nth-of-type(2) {color:red}
<p><what></what> <ever>test</ever></p>
<p><code></code> <span>test</span></p>
Another problem with made-up elements is that you won't know what the future holds. If you created a website a couple of years ago with tag names like picture, dialog, details, slot, template etc, expecting them to behave like spans, are you in trouble now!
This is not an option in any HTML specification :)
You can probably do what you want with <div> elements and classes, from the question I'm not sure exactly what you're after, but no, creating your own tags is not an option.
As Nick said, custom tags are not supported by any version of HTML.
But, it won't give any error if you use such markup in your HTML.
It seems like you want to create a list. You can use unordered list <ul> to create the rool elements, and use the <li> tag for the items underneath.
If that's not what you want to achieve, please specify exactly what you want. We can come up with an answer then.
You can add custom attribute through HTML 5 data- Attributes.
For example: Message
That is valid for HTML 5. See http://ejohn.org/blog/html-5-data-attributes/ to get details.
You can just do some custom css styling, this will create a tag that will make the background color red:
redback {background-color:red;}
<redback>This is red</redback>
you can use this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyExample</title>
<style>
bloodred {color: red;}
</style>
</head>
<body>
<bloodred>
this is BLOODRED (not to scare you)
</bloodred>
</body>
<script>
var btn = document.createElement("BLOODRED")
</script>
</html>
I found this article on creating custom HTML tags and instantiating them. It simplifies the process and breaks it down into terms anyone can understand and utilize immediately -- but I'm not entirely sure the code samples it contains are valid in all browsers, so caveat emptor and test thoroughly. Nevertheless, it's a great introduction to the subject to get started.
Custom Elements : Defining new elements in HTML