Html "Already defined" Error - html

I am debugging a layout right now and have come across some strange errors. and I am serving the page up as DTD XHTML 1.0 Strict.
The error shows is like this
ID "OFFICENAME" already defined:
div class="office" id="officename"
ID "OFFICENAME" first defined here
span id="officename">
and
NET-enabling start-tag requires SHORTTAG YES
This error is showing in the break code
<br />
Please any one help me out of this and tell me the correct way of representing

id must be unique. You can't have two elements with the same ID. You should remove one of the ids or use class instead. You can have multiple classes on any given element, e.g.:
class="office officename"
In HTML/SGML meaning of / is different than in XHTML: <foo/bar/ is <foo>bar</foo> and <foo/> is <foo></foo>> (that's an archaic quirk supported only by W3C validator).
You're probably sending XHTML markup as HTML. Use text/html MIME type with HTML5 DOCTYPE instead (you'll get better compatiblity, better validation and /> talismans will be allowed).
<!DOCTYPE html>

You can't have multiple elements with the same id. Change the id on the span or the div to something else.

Related

Using an individual tag without breaking the standards?

I would like to create some kind of API where people can include a hidden information inside a website, so that a bot can read the information.
I know it is possible with meta-tags, but I am considering using some kind of individual tag, because then I can use DOM which is a bit more comfortable to work with, and it is easier to read by humans.
Example:
<html>
...
<body>
...
<mytag id="123" foo="bar" bar="foo"></mytag>
...
<mytag id="345" foo="bar" bar="foo"></mytag>
...
</body>
</html>
My question is, if it is possible to make this individual tag somehow conform to the standards, maybe by creating some kind of DTD ?
I would like to support HTML 4.01, XHTML and HTML 5, if possible.
Having to support HTML 4.01 and HTML5 makes this hard. You can’t use meta-name elements (would work for HTML 4.01, but they have to be registered for HTML5), you can’t use custom data-* attributes (not allowed in HTML 4.01), you can’t use Microdata (only defined for HTML5+), you can’t use custom elements (only defined for HTML5+).
I can think of two ways.
script element as data block
In HTML5, the script element can also be used for data blocks. Examples: text/html, text/plain.
The HTML 4.01 spec doesn’t define it like that, but it should still be possible/valid (it’ll understand it as "script", but user agents are not expected to try to run it if they don’t recognize the content type as possible for scripts).
Drawback: The content is not part of the document’s DOM.
RDFa
It’s allowed in HTML 4.01 and HTML5 (you might have to adapt the DOCTYPE for the older HTML versions, e.g., for XHTML).
You can’t use custom elements, but you can add property and content attributes (for name-value pairs), and you could use typeof for "items" (e.g., what you would use the element name for), and you can make use of meta and link elements (visually hidden by default) in the body.
<div vocab="https://api.example.com/voc#" class="the-hidden-information">
<div typeof="Item-123">
<meta property="foo1" content="bar1" />
<meta property="foo2" content="bar2" />
</div>
<div typeof="Item-345">
<meta property="foo1" content="bar1" />
<link property="foo5" href="/some-url" />
</div>
</div>
(when using RDFa 1.0 instead of 1.1, you’d have to use xmlns instead of vocab)

What is the purpose of the <html> element?

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.

What is the difference between this html5 form elements?

I am learning HTML5, i want to know why these elements are closed differently the first input ends with > and the second ends with /> what difference does it make?
<input name = "howtosite" type = "radio"
value = "search engine" checked>
<input type = "color" autofocus />
(Hexadecimal code such as #ADD8E6)
Briefly, some terminology: Confusingly, "HTML" now means two things:
The definition of the various kinds of elements that make up what we use in web pages and such. This is what tells us that there is an element called div and what it's for.
One of the two serializations of it (the written form), which tells us we write div elements like this: <div>content</div>.
The other serialization of HTML is XHTML. The two serializations differ in places, because XHTML is XML.
HTML defines some elements that never have content, like <br>, and in the HTML serialization they're usually written just like that, <br>. In the XHTML serialization that's a problem, because XML requires that all tags be closed and <br> is just a start tag. Putting the slash ("solidus") just before the ending > closes the tag, so in XHTML, <br> becomes <br/>. The / is tolerated in the HTML serialization, but it serves no purpose. It only serves a purpose in XHTML. (Note that in really, really old browsers, you may need a space before the solidus, e.g. <br />, but we're talking very old indeed.)
This is only true for void elements like <br> and <input> that never have any content, and foreign elements (MathML and SVG). You never write <div/>, for instance, even if the div is going to be empty. The correct form of an empty div is always <div></div> (whether in the HTML or XHTML serialization).
Full detail in the specification, and in particular §8.1.2.1.
So regarding your two specific examples: The first is only valid in the HTML serialization. The second is also valid in the HTML serialization, and would be valid in the XHTML serialization if the autofocus attribute had a value (in XML, attributes must have a value, so you have to write autofocus="autofocus").

Why does self closing tag work in a html document?

I have a html document:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
In it I have tags such as
<br />
But Im reading that this tag is an XHTML element. Yet it still works why?
Original answer based on the question as written before a character was moved and completely changed it:
But Im reading that </br> is an XHTML element.
It isn't. Is is the end tag for an element.
<br /> would be a self closing tag (representing an entire element) in XHTML. In HTML 4 it means the same as <br>> (although most browsers don't respect that) and in HTML 5 the / is meaningless syntactic sugar to keep people used to XHTML happy.
In XHTML <br/> means the same as <br></br> (the latter is an error in HTML documents).
Yet it still works why?
Browsers perform enormous amounts of error correction to try to deal with the sort of bad markup that was prevalent in the late 90s.
They are not always consistent in how they recover from different errors (for example, I believe that some browsers will ignore that completely while others will treat it as a line break), so you should never depend on this behaviour.
Browsers failed to implement parsers that correctly handled HTML 4 and earlier.
They should have treated <br/> as "A br element followed by a greater than sign", but instead implemented it as "A br element with a / attribute, what's a / attribute? We'll drop it". This led to the feature being marked as something to avoid.
XHTML then exploited the bug for HTML-Compatible XHTML.
HTML 5 then redefined it as syntactic sugar so the XHTML junkies could keep on using the syntax they were used to.
It's the browser that get rid of these differences. Anyways the </br> with that slash is incorrect both in HTML and XHTML.
Occurring to http://www.w3schools.com/tags/tag_br.asp
In HTML the <br> tag has no end tag.
In XHTML the <br> tag must be properly
closed, like this: <br />.
Self closing tag is valid format in XML
XHTML means all tag must be closed
HTML
<br> valid
<br/> valid
XHTML
<br> invalid
<br/> valid
Edited:
</br> is invalid anyway and you are lucky if browser fix it :)
</br> is the same as <div id="gd"/>, both are invalid

Are there any issues with always self closing empty tags in html?

Are there any browser issues with always collapsing empty tags in html.
So for example an empty head tag can be written like this
<head></head>
but is can also be written like this
<head/>
Will the second case cause issues in any scenerio?
Thanks
Self-closing <script> tags can mess up some browsers really badly. I remember my whole page disappearing into thin air in IE after I self-closed a script tag - everything after it was read as a script.
Assuming that you are serving your XHTML as XML, no. <head></head> is entirely equivalent to <head />. In fact, an XML parser won't even bother to tell you which one you have.
(There is, however, an issue in that the <head> tag must contain a <title>.)
You shouldn't use minimized form for head in XHTML.
http://www.w3.org/TR/xhtml1/#guidelines
About empty elements:
http://www.w3.org/TR/xhtml1/#C_3
Given an empty instance of an element
whose content model is not EMPTY (for
example, an empty title or paragraph)
do not use the minimized form (e.g.
use <p> </p> and not <p />).
In other words, paragraph should always be closed in XHTML, in HTML you could go with only opening tag. But if the element is supposed to have content it should be properly opened and closed.
For example line break has EMPTY content model and can be written as <br /> (same goes for <hr />) but not <div />.
Also see this SO question.
Empty Elements (XHTML)
Shorthand markup in HTML
Self-closing tags don't exist in HTML. The / is always ignored, that is, <foo/> and <foo> are equivalent. For elements such as br, that's fine, because you want <br>. However, <script src="..." /> means the same as <script src="...">, which is a problem (as noted in other answers). <head/> is less of a problem, because the </head> end tag is optional anyway.
In XML, on the other hand, self-closing tags do what you want. However, you probably aren't using XML, even if you've got an XHTML doctype. Unless you send your documents with a text/xml, application/xml or application/xhtml+xml MIME type (or any other XML MIME type), particularly if you send them as text/html, they will not be treated as XML.
Not that I am aware of. One caveat that has bitten me in the past is self closing my script tag: <script type="text/javascript" src="somefile.js" />
This results in some interesting fail.
In general an empty element can be written as a self closing tag, or opening and closing tags.
However, the HTML4 DTD specifies that the document HEAD must contain a TITLE element.
"Every HTML document must have a TITLE element in the HEAD section."
http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.4.1
I believe some older browsers had problems with the lack of whitespacing - in particular
<head/> would be interpreted as a "head/" tag, whereas <head /> will be interpreted as a "head" tag with a blank attribute "/" which is ignored.
This only affects a few browsers, AFAIK. Either is valid XHTML, but older HTML-only browsers might have trouble.
This is in fact documented in the XHTML guidelines as C.2
Even considering only browser issues (i.e. disregarding validity) and narrowing the question down to the head tag alone, the answer is still yes.
Compare
<head/>
<object>Does this display?</object>
against
<head></head>
<object>Does this display?</object>
each served as text/html to any version of IE.
Does this display? will be shown only in the latter example.