Designed to standardize HTML, XHTML specifications tried to make HTML more strict and made some rigid standards like every tag in HTML should have a closing tag which added different type of syntaxes like / in line breaks, which converted <br> element to <br />. This made XHTML overly complex for existing HTML developers and also for new non technical developers. The WHATWG (Web Hypertext Application Technology Working Group) started in year 2004 with a goal of producing new improved version of HTML (HTML5) which is preserves the simplicity of HTML and also extends it with new tags and features.
HTML specifications like HTML5 are purely depended on browser’s support. As HTML5 specification extend existing HTML and add many new features, it is very important the most used browsers support most of it in the correct way. Fortunately, old browsers like Internet Explorer are now outdated and are in end of life cycle and new browsers like Chrome, Firefox, Opera and Edge are in continuous development and deployment hence implementing latest specifications. Technology and internet are moving faster than earlier and hence supporting adaptation of latest trends faster.
What’s different in HTML5 ?
- First of all when writing there is no space between HTML and its version 5, it is written as HTML5.
- The declaration syntax of HTML5 is much simpler than other HTML versions, it is just <!DOCTYPE html>. This is because HTML5 is not defined as SGML or XML application.
- As HTML5 isn’t XML based so there isn’t a DTD which can be used to validate the document, instead the HTML5 document is checked against confirmation to specification. A simple tool is available at http://validator.w3.org/
- With HTML5 the loose Syntax returns, like quotes of attribute values can be ignored, the closing tag for every element isn’t mandatory and html, head and body if not included then also document can be rendered. The mistakes which are allowed in traditional HTML are allowed in HTML5.
Following is what isn’t allowed in both traditional HTML and HTML5:
- Nesting the elements is allowed but crossing them isn’t. e.g:
<b><i>this is bold and italic text</i></b>
is correct but following isn’t:
<b><i>this is not nesting of elements, this is crossed elements</b></i>
- The quotes in attribute values can only be ignored when the value isn’t having special characters like spaces:
<p class=highlight>This is text with class highlight</p>
but following isn’t correct:
<p class=highlight heading>The attribute value is not ok without quotes.</p>
- The content model should be followed. Some browser allows messing up with content model but it may introduce trouble:
<li> li (list item)tag without ul or ol ( a list) may work due to browser support, but is wrong</li>
It should be like below:
<ul><li>list item is in a unordered list, now it is good</li></ul>
- Do not invent new tags unless they are supported by some other specification:
<p> It is <danger>dangerous</danger> to use invented tags like danger in this paragraph </p>
Following is ok, as circle and svg are part of SVG specification.
<p> See this image: <svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg></p>
