HTML Variants

• Web pages can use different types of HTML, including HTML 4.01, HTML 5 and XHTML. The type of HTML being used is indicated by the DTD (Document Type Definition) at the top of the file. The DTD dictates which HTML structures and elements are allowed in the document. Using markup that is not allowed according to the DTD listed may cause rendering problems. Different browsers also vary in terms of how they render the different variants of HTML. The W3C recommend using XHTML as it is stricter and therefore more likely to appear consistently across browsers.
  
  

Markup Errors

• Markup errors are among the most common causes of rendering problems. There are many ways to include an error in HTML markup. Not including a closing tag for an element is a common error, as in this example:
  
  <div><p>A paragraph</div>
  
  Simple syntax errors are also common, as in this example, where the end ">" character has been missed in the opening "div" tag:
  
  <div<p>A paragraph</p></div>
  
  Browsers vary in their ability to cope well with syntax errors. You can identify syntax errors by using a Web Validator on your markup code. Validators check through the structure and syntax of HTML, identifying any errors within it.
  
  

Browser Differences

• When HTML content is sent to the user's browser, the browser program interprets the markup code in order to display it. Some browsers differ in terms of how they present certain HTML and CSS structures, particularly in terms of layout and alignment. For example, some versions of Internet Explorer will not display elements with a total width of 100% on the same horizontal line, whereas most other browsers will. There are many browser differences in rendering HTML, which is why thorough testing on different platforms is essential for successful Web development projects.
  
  

Special Characters

• Certain characters have a special status in HTML, so using them in the conventional fashion can cause rendering errors within your pages. To avoid causing errors, these characters need to be listed using their HTML Entity codes, as in the following examples, for ">" and "&":
  
  >
  
  &
  
  The reason these characters are considered "special" is that they are used within the actual code for HTML pages. The Web browser may therefore interpret them in their role as HTML markup rather than as readable characters within the text displayed on a site.
  
  

Box Model

• The Box Model is the convention used to layout and present elements with HTML and CSS. The Box Model defines the area an HTML element occupies within the page, including its content and any margins, padding and borders around it. According to this model, each element has an area defined for its content, an area of padding around this, an area for a border around that and finally an area for a margin around the outside. Some browsers, for example certain versions of Internet Explorer, interpret the measurements for each of these areas differently, which is why you may see your HTML displayed in unexpected ways.