Post
Ask Question

Modes of HTML5 Syntax

Introduction

 
In this article am explaining parsing modes/syntax used in HTML5 for various functions and how these parsing modes work and what they do.
 
HTML5 | Syntax
 
HTML5 has two syntaxes; sometimes we call these syntaxes parsing modes. These are:
  • HTML
  • XML
HTML5 | Syntax
 
The basic difference between the functionalities of these two modes depends on whether the document is served with a content-type.
 
Content-Type for HTML
 
text/HTML
 
Content-Type for XML
 
application/xml+xhtml
 
Working | Parsing Modes
 
The functionality of the parsing modes depends only upon the content-type, so there exist the following two conditions respectively:
 
Parsing Modes
 
XHTML5 : HTML5's HTML Syntax
 
If it's served as text/html then the following rules will be applied:
  • Start tags are not required for every element.
  • End tag is not required for every element.
  • Only void elements may be self closed with />.
    (such as: br, img, link)
  • Tags are case-insensitive.
  • Attributes don't need to be quoted.
  • Attributes are case-insensitive.
  • Some attributes may be empty.
    (such as checked and disabled)
  • The document must be included in an HTML5 DOCTYPE.
Code Snippet | Example
  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <meta charset="utf-8"/>  
  5.       <title>NEW</title>  
  6.       <link rel=Stylesheet href="style.css" type="text/css" />  
  7.       <style>  
  8.          body  
  9.          {  
  10.          background: oceangreen;  
  11.          }  
  12.       </style>  
  13.    </head>  
  14.    <body>  
  15.       <p>  
  16.          <img src="new.png" alt="new"/>  
  17.          <!--anything u want to include in para-->  
  18.       </p>  
  19.       <script src="new1.js"/>  
  20.       </body>   
  21.       </html> 
XHTML5 : HTML5's XML Syntax
 
If it's served as application/xml+html then the following rules will be applied:
  • All elements must have a start tag.
  • Non-Void elements with a start tag must have an end tag.
    (such as p and li)
  • Any element may be self closed using/>.
  • Tags are case sensitive.
  • Attributes are case sensitive.
  • Attributes must be enclosed in quotes.
  • Empty attributes are forbidden
      (such as checked=” true” or checked=” false”)
  • Special characters must be escaped.
Code Snippet | Example
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3.   <head>  
  4.     <meta charset="utf-8"/>  
  5.     <title>NEW</title>  
  6.   </head>   
  7.   <body>  
  8.     <p>  
  9.       <img src="new.png" alt="new"/>  
  10.       <!--anything u want to include in para-->  
  11.     </p>   
  12.     <script src="new1.js"/>     
  13.   </body>   
  14. </html> 


Similar Articles