HTML Tutorial

HTML XHTML

HTML Media

HTML Advanced

HTML document type

Here's a tutorial on HTML document types:

HTML (Hypertext Markup Language) document types are used to specify the version of HTML that a web page is written in. HTML document types are important because different versions of HTML have different syntax and features, and the web browser needs to know which version of HTML a web page is written in to correctly display the content.

The most common HTML document types are:

  • HTML5 HTML5 is the latest version of HTML and is the recommended version for creating new web pages. The HTML5 document type is:
<!DOCTYPE html>

This document type is placed at the beginning of an HTML document, before the <html> tag.

  • HTML 4.01 HTML 4.01 is an older version of HTML that is still used by some web pages. The HTML 4.01 document types are:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">

These document types are placed at the beginning of an HTML document, before the <html> tag.

  • XHTML XHTML is a combination of HTML and XML, and is a stricter version of HTML. The XHTML document types are:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

These document types are placed at the beginning of an XHTML document, before the <html> tag.

By specifying the correct HTML document type, you can ensure that your web page is displayed correctly in different web browsers and devices.

  1. HTML document type declaration:

    • Description: The Document Type Declaration (DOCTYPE) is an instruction that declares the document type and version of HTML being used.
    • Example Code:
      <!DOCTYPE html>

  2. DOCTYPE in HTML:

    • Description: The DOCTYPE declaration is placed at the beginning of an HTML document to specify the HTML version.
    • Example Code:
      <!DOCTYPE html>
<html>
    <!-- HTML content goes here -->
</html>

  3. HTML5 document type declaration:

    • Description: The HTML5 DOCTYPE is a simplified declaration for HTML5 documents, signaling modern HTML usage.
    • Example Code:
      <!DOCTYPE html>

  4. Choosing the right DOCTYPE for HTML:

    • Description: Choose the appropriate DOCTYPE based on the HTML version you are using to ensure correct rendering and validation.
    • Example Code:
      <!-- HTML5 DOCTYPE -->
<!DOCTYPE html>

<!-- HTML4.01 Strict DOCTYPE -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  5. HTML DOCTYPE versions:

    • Description: Different DOCTYPE versions exist for various HTML specifications, such as HTML5, HTML 4.01, and XHTML.
    • Example Code:
      <!-- HTML5 DOCTYPE -->
<!DOCTYPE html>

<!-- HTML 4.01 Strict DOCTYPE -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  6. DOCTYPE and HTML validation:

    • Description: DOCTYPE declarations aid in HTML validation, ensuring that the document adheres to the specified HTML version.
    • Example Code:
      <!DOCTYPE html>

  7. HTML DOCTYPE and browser compatibility:

    • Description: Browsers use the DOCTYPE declaration to determine how to interpret and render the HTML document.
    • Example Code:
      <!DOCTYPE html>

  8. HTML DOCTYPE and rendering modes:

    • Description: DOCTYPE influences the rendering mode of browsers, affecting how they interpret and display HTML content.
    • Example Code:
      <!DOCTYPE html>

  9. Custom DOCTYPE in HTML:

    • Description: Custom DOCTYPEs can be defined for specific requirements, but using standard DOCTYPEs is recommended.
    • Example Code:
      <!DOCTYPE html>

  10. HTML transitional DOCTYPE:

    • Description: Transitional DOCTYPEs were used to transition from older HTML versions to newer ones, providing flexibility in validation.
    • Example Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  11. Strict vs. transitional DOCTYPE in HTML:

    • Description: Strict DOCTYPEs enforce stricter HTML validation rules compared to transitional DOCTYPEs.
    • Example Code:
      <!-- Strict DOCTYPE -->
<!DOCTYPE html>

<!-- Transitional DOCTYPE -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  12. HTML quirks mode and DOCTYPE:

    • Description: Quirks mode occurs when no DOCTYPE or an outdated one is provided, affecting how browsers render the page.
    • Example Code:
      <!-- No DOCTYPE (quirks mode) -->
<html>
    <!-- HTML content goes here -->
</html>

  13. HTML5 DOCTYPE vs. earlier versions:

    • Description: The HTML5 DOCTYPE is a simplified and recommended choice compared to earlier, more complex DOCTYPEs.
    • Example Code:
      <!-- HTML5 DOCTYPE -->
<!DOCTYPE html>

<!-- HTML 4.01 Strict DOCTYPE -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  14. DOCTYPE in HTML templates:

    • Description: DOCTYPE should be included in HTML templates to define the HTML version and ensure consistent rendering.
    • Example Code:
      <!DOCTYPE html>
<html>
    <!-- HTML template content goes here -->
</html>

  15. HTML DOCTYPE for mobile:

    • Description: Use the HTML5 DOCTYPE for mobile-friendly web pages, ensuring compatibility with modern browsers.
    • Example Code:
      <!DOCTYPE html>

  16. HTML quirks mode and box model:

    • Description: Quirks mode can affect the box model, leading to inconsistencies in layout and spacing.
    • Example Code:
      <!-- No DOCTYPE (quirks mode) -->
<html>
    <!-- HTML content goes here -->
</html>

  17. HTML DOCTYPE and meta tags:

    • Description: Meta tags, along with DOCTYPE, contribute to specifying character encoding, viewport settings, and other document attributes.
    • Example Code:
      <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Other meta tags -->
    </head>
    <!-- HTML content goes here -->
</html>

  18. HTML DOCTYPE and character encoding:

    • Description: The character encoding declaration in the meta tag ensures proper interpretation of text in the HTML document.
    • Example Code:
      <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- Other meta tags -->
    </head>
    <!-- HTML content goes here -->
</html>

  19. HTML5 DOCTYPE example:

    • Description: The HTML5 DOCTYPE is a concise declaration that signals the use of HTML5.
    • Example Code:
      <!DOCTYPE html>
Copyright © devanddep.com | All Rights Reserved