Chapter 1 of ?
html 8 min read

HTML Mastery — Chapter 1: HTML Introduction & Document Setup

Section 1 · Chapter 1

HTML Introduction & Document Setup

HTML is the standard markup language for creating Web pages. In this chapter, you will learn what HTML is, how to set up an HTML document step-by-step, master core tags, and test every tag in the interactive playground.

Live Code Example

Click Try it Yourself » to open this HTML code in a full-screen interactive playground page.

Example: My First HTML Page

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My First Web Page</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph in HTML!</p> </body> </html>
Try it Yourself »
1.1 What is HTML?
1.2 HTML History
1.3 Versions & Standards
1.4 Document Structure
1.5 Core Tags

1.1 What is HTML?

HTML stands for HyperText Markup Language. It is the core structural language of the World Wide Web, used by web engineers across the globe to define web page layout, text hierarchy, media components, and interactive controls.

  • HyperText: Refers to interconnected links (hyperlinks) that allow users to seamlessly navigate between documents across different servers worldwide.
  • Markup Language: Refers to structural elements and annotations (called tags) that tell web browser engines how to parse and render text, graphics, and controls.
Key Web Architecture Triad: HTML describes the semantic structure of a page, CSS governs its visual styling and layout, and JavaScript drives its dynamic logic and state.

1.2 History of HTML & Invention at CERN

In 1989, British computer scientist Sir Tim Berners-Lee invented the World Wide Web while working at CERN (the European Organization for Nuclear Research). He envisioned an open document-sharing system that would allow nuclear physicists and researchers to instantly share papers across different computer operating systems.

In late 1991, he published the first official document titled "HTML Tags", which contained the initial 18 HTML tags (including <a>, <p>, <h1>–<h6>, <ul>, and <li>). He also created the first web browser, named WorldWideWeb (later renamed Nexus to avoid confusion with the network).

1.3 Evolution of HTML Versions & Standards

Since its inception in 1991, HTML has evolved from a simple text-linking markup tool into an enterprise-grade application platform governed by international standards organizations like IETF, W3C, and WHATWG.

HTML Evolution Timeline (1991 – Living Standard)

HTML 1.0 1991 18 Tags (CERN) HTML 2.0 1995 Forms (IETF) HTML 3.2 1997 W3C Standard HTML 4.01 1999 CSS Separation XHTML 1.0 2000 Strict XML Rules HTML5 2014 Video, Canvas, APIs WHATWG Living Standard Continuous Updates

Evolution of HTML Versions & Standards Reference Table

HTML Version Release Year Governing Organization Key Features & Milestone Contributions
HTML 1.0 1991 Tim Berners-Lee (CERN) First web specification containing 18 basic structural elements (headings, paragraphs, hyperlinks).
HTML 2.0 1995 IETF (Internet Engineering Task Force, RFC 1866) First official standardized spec; added form inputs (<input>, <select>), tables, and inline images (<img>).
HTML 3.2 1997 W3C (World Wide Web Consortium) First specification published by W3C. Added table formatting controls, math formulas, applets, and font styling tags.
HTML 4.01 1999 W3C Recommendation Landmark release separating presentation (CSS) from structure; introduced scripts (<script>), frames, and accessibility.
XHTML 1.0 2000 W3C Recommendation Reformulated HTML 4.01 as XML 1.0. Enforced strict XML rules: lowercase tags, required quotes, and self-closing tags (e.g., <br />).
HTML5 2014 W3C & WHATWG Recommendation Major update introducing native <video>, <audio>, <canvas>, SVG, semantic tags (<header>, <nav>), and Web Storage.
WHATWG Living Standard 2019 – Present WHATWG (Apple, Google, Mozilla, Microsoft) HTML became a continuously updated "Living Standard" maintained directly by browser vendors without discrete major version numbers.
Try It Yourself — Interactive HTML Version Syntax Inspector

Click any HTML era button below to inspect how document syntax evolved across historical standards:

HTML 1.0 (1991 Syntax) No DOCTYPE · 18 Tags 
<HEADER><TITLE>CERN World Wide Web</TITLE></HEADER>
<BODY>
<H1>HyperText Markup Language</H1>
<P>Welcome to the first WWW project.</P>
<A HREF="http://info.cern.ch">CERN Server</A>
</BODY>

1.4 A Simple HTML Document & Structure

Every standard HTML5 document follows a strict, hierarchical tree structure.

Example: Document Structure

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Try it Yourself »

HTML5 Document Tree Architecture

<!DOCTYPE html> <html lang="en"> (Root Container) <head> (Metadata) <body> (Visible Content) <title>, <meta> <link>, <style> <h1>, <p> <a>, <img>, <form>

1.5 Core HTML Tags & Metadata

The <!DOCTYPE html> declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the very top of the page (before any HTML tags). The declaration is not case sensitive.

Example: DOCTYPE Declaration

<!DOCTYPE html> <html> <body> <h2>HTML5 Standards Mode</h2> <p>The DOCTYPE declaration ensures standards mode execution.</p> </body> </html>
Try it Yourself »

1.4 The <html> Element & lang Attribute

The <html> element is the container for all other HTML elements (except for the <!DOCTYPE> tag).

You should always include the lang attribute inside the <html> tag to declare the language of the Web page. This assists search engines and screen readers.

Example: Language Attribute

<!DOCTYPE html> <html lang="es"> <body> <h2>¡Hola Mundo!</h2> <p>Declared language: Spanish (lang="es")</p> </body> </html>
Try it Yourself »

1.5 The <head> Section: <title>, <meta> & Favicons

The <head> element is a container for metadata (data about data). It is placed between the <html> tag and the <body> tag.

The <title> Element

The <title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

The <meta> Elements

The <meta> element is used to specify character set, page description, keywords, author of the document, and viewport settings:

  • <meta charset="UTF-8"> — Defines character encoding for international text formatting.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — Configures mobile viewport scaling for responsive web design.

Example: Head Section & Page Metadata

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Metadata Demonstration</title> </head> <body> <h3>Check the Browser Tab Title!</h3> </body> </html>
Try it Yourself »

1.6 The <body> Section & Core Visible Tags

The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

HTML Headings (<h1> to <h6>)

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.

Example: Headings

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Try it Yourself »

HTML Paragraphs (<p>)

HTML paragraphs are defined with the <p> tag. Browsers automatically add a blank line before and after a paragraph.

Example: Paragraphs

<p>This is a paragraph.</p> <p>This is another paragraph.</p>
Try it Yourself »

💻 Chapter 1 Hands-On Code Challenge

Put your knowledge to test! Create a complete HTML5 document for a personal profile page with the following requirements:

  1. Add <!DOCTYPE html> declaration on line 1.
  2. Wrap the document in <html lang="en">.
  3. Add a <head> section containing <meta charset="UTF-8"> and <title>My Developer Profile</title>.
  4. Inside the <body>, add an <h1> heading with your name and an <h2> sub-heading with your title (e.g., Frontend Developer).
  5. Add a <p> paragraph introducing yourself and your favorite web technologies.

Starter Challenge Code

<!-- Complete the profile page challenge --> <!DOCTYPE html> <html lang="en"> <head> <!-- Add meta tags and page title here --> </head> <body> <!-- Add h1, h2, and paragraph tags here --> </body> </html>

Chapter 1 Key Takeaways

  • Sir Tim Berners-Lee invented HTML at CERN in 1989-1991; WHATWG now maintains HTML as a Living Standard.
  • <!DOCTYPE html> must be the first line of every HTML5 document to trigger browser standards mode.
  • The <html> element wraps all content; use lang="en" for accessibility and screen readers.
  • The <head> section contains metadata (title, character encoding, mobile viewport settings, favicons).
  • The <body> section contains all visible layout elements like headings, paragraphs, images, and links.
Done with this chapter?
Mark it complete to track your progress and unlock your certificate.
Next Up
—

Learner Reviews

Write a Review
Share your experience to help other learners.
Your Rating *
★ ★ ★ ★ ★