Html Overview and Features

This document explains the fundamentals of HTML and HTML5, including their purpose, evolution, and key features. It highlights how HTML5 builds upon earlier versions to support modern web development needs. It also explains the structure of the Document Object Model (DOM) tree, and the differences between HTML and XHTML. It highlights how HTML5 enhances web development by supporting modern tools and creating engaging user experiences.

Introduction to HTML and HTML5

What is HTML

• HTML stands for HyperText Markup Language and is referred to as “the language of the Internet.”
• It is a markup language originally designed for sharing scientific documents but has evolved to describe various types of documents displayed as web pages.
• HTML elements, represented by tags, are the building blocks of a web page. Tags define content types such as paragraphs, lists, and tables.
• Browsers use these tags to render content but do not display the tags themselves.

Evolution of HTML

• HTML was introduced in the early 1990s by CERN and the Internet Engineering Task Force (IETF).
• The World Wide Web Consortium (W3C) has made recommendations to HTML standards over the years, adding new features and updating specifications.
• The Web Hypertext Application Technology Working Group (WHATWG) initially worked independently on HTML recommendations.
• In 2007, W3C and WHATWG began collaborating on the development of the HTML5 specification.

Objectives of HTML5

• Defines a single language called HTML5, which can be written in HTML or XML syntax.
• Provides a processing model that interoperates with earlier HTML implementations.
• Improves markup for documents and includes APIs for modern web features such as web storage, video, and audio content.

Key Notes on HTML5

• HTML5 is the latest version of HTML and is often used interchangeably with the term HTML.
• The term HTML5 is used specifically when discussing features unique to this version.
• In this course, HTML refers to HTML5 unless stated otherwise.

HTML5 Features

• HTML5 provides tools for categorizing web pages into sections and managing data, video, and audio.
• It facilitates the development of cross-browser applications for the web and portable devices.
• Offers flexibility for creating interactive and engaging websites.
• Enables the development of applications that provide a uniform experience across platforms and devices.
• Supports enhanced multi-platform development by integrating APIs.

Example of an HTML5 Document

• The !DOCTYPE declaration specifies the document type and version of HTML. It is not an HTML tag but an instruction for the browser.
• The html tag is the root element containing all other HTML elements except the !DOCTYPE declaration.
• The head tag includes metadata, such as the title, scripts, styles, and browser support information.
• The body tag contains all the content displayed on the webpage.

Document Object Model (DOM) Tree

• Browsers parse HTML markup into a DOM tree, which is an in-memory representation of the document.
• The DOM tree consists of nodes, including:
  • DOCTYPE nodes: Represent the document type.
  • Element nodes: Represent HTML elements like headers and paragraphs.
  • Text nodes: Represent the text content within elements.
  • Comment nodes: Represent comments in the document.

HTML vs. XHTML

Key Differences

• Case Sensitivity: XHTML requires all tags to be in lowercase, while HTML is case-insensitive.
• Well-Formed Syntax: XHTML requires every element to have an end tag, attributes to have values, and quotation marks around attribute values.
• Error Handling: XHTML parsers stop processing if the syntax is not well-formed, while HTML allows unmatched quotation marks and non-terminated elements.

Choosing Between HTML and XHTML

• The choice depends on the intended use of the application.
• XHTML is preferred when using tools like XSLT for creating other documents and resources.
• HTML is less rigorous and more forgiving in syntax, making it suitable for general web development.

Conclusion

HTML is the foundational language for creating web pages, and HTML5 builds upon earlier versions to support modern web development needs. Its features enable developers to create dynamic and interactive web content. HTML5 enhances web development by providing tools for modern applications, supporting cross-browser compatibility, and enabling engaging user experiences. The DOM tree serves as the structural representation of HTML documents, while the choice between HTML and XHTML depends on specific application requirements.

FAQ