HTML5 Intro

Modern HTML Introduction

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages and web applications. It describes the structure of a web page using markup.

HTML elements are the building blocks of HTML pages, represented by tags like <h1>, <p>, <img>, etc.

The latest version, often referred to as HTML5 or simply ‘HTML’, introduced many new features while maintaining backward compatibility.

Key Characteristics of Modern HTML

Simplified Syntax:

The DOCTYPE declaration is straightforward:

<!DOCTYPE html>

Character encoding is also simplified using the <meta> tag within the <head> section:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document Title</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

Note: Setting the lang attribute on the <html> tag is important for accessibility and search engines.

	UTF-8 is the universal character encoding for the web, supporting almost all characters and symbols worldwide.

Semantic Elements:

HTML introduced elements that describe their meaning, improving code readability, accessibility, and SEO:

• <header>: Represents introductory content or navigational links.
• <footer>: Typically contains authorship, copyright, or contact information.
• <nav>: Contains navigation links.
• <main>: Specifies the main content of a document.
• <article>: Represents a self-contained piece of content (e.g., blog post, news story).
• <section>: Defines a thematic grouping of content.
• <aside>: Represents content tangentially related to the main content (e.g., sidebar).

Multimedia Support:

Native support for embedding audio and video without relying on plugins:

• <audio>: Embeds sound content.
• <video>: Embeds video content.

Graphics:

Elements for drawing graphics directly in the browser:

• <canvas>: Allows drawing graphics via JavaScript (pixels).
• <svg>: Defines vector-based graphics in XML format.

Enhanced Form Controls:

New input types offer better user experience and validation:

Examples: date, time, email, url, number, range, color.

Modern Web APIs

HTML works closely with browser APIs (Application Programming Interfaces) to enable dynamic and interactive web applications:

• Geolocation API: Access user’s location (with permission).
• Drag and Drop API: Enables dragging and dropping elements.
• Web Storage (Local Storage & Session Storage): Store data locally in the browser, more powerful than cookies.
• Web Workers: Run JavaScript in background threads without blocking the main UI thread.
• Server-Sent Events (SSE): Allow servers to push data to clients.
• Service Workers: Act as proxy servers, enabling offline capabilities, background syncs, and push notifications (largely superseding the deprecated Application Cache).

	Web Storage (Local and Session) provides a simple key-value store in the browser. Local Storage persists even after the browser is closed, while Session Storage clears when the session ends.

Removed Elements

Some older HTML elements, mostly related to presentation, have been removed or deprecated. Styling should now be handled exclusively by CSS:

Removed Element	Modern Approach
<font>, <basefont>, <center>, <big>, <strike>, <tt>	Use CSS for styling (e.g., font-family, color, text-align, font-size, text-decoration, font-family: monospace).
<frame>, <frameset>, <noframes>	Use <iframe> or modern layout techniques (Flexbox, Grid) instead of framesets.
<applet>	Use <object>, <embed>, or modern web technologies like JavaScript frameworks.
<acronym>	Use <abbr> for both abbreviations and acronyms.
<dir>	Use <ul> (unordered list).

HTML History & Evolution

HTML has evolved significantly since its inception:

Year	Milestone
1991	Tim Berners-Lee invents HTML.
1995	HTML 2.0 defined by the HTML Working Group.
1997	W3C Recommendation: HTML 3.2.
1999	W3C Recommendation: HTML 4.01.
2000	W3C Recommendation: XHTML 1.0 (HTML as XML).
2004	WHATWG (Web Hypertext Application Technology Working Group) formed to advance HTML development pragmatically.
2008	First public working draft of HTML5.
2014	W3C Recommendation: HTML5.
2019-Present	WHATWG maintains the HTML Living Standard, which is continuously updated. W3C focuses on publishing stable recommendations based on the Living Standard.

The key takeaway is that HTML is now a ‘Living Standard’ maintained by the WHATWG, constantly evolving with input from browser vendors and the web community. While W3C publishes versioned ‘Recommendations’, the Living Standard represents the current state of HTML.

You can follow the latest developments at the WHATWG HTML Living Standard website.