Introduction to HTML

The picture shows that the page you see is drawn from the tree, not directly from the text. This is why a small mistake in the markup can change the page in surprising ways: the browser has to guess where an element ends, and the tree it builds may differ from what you meant.

HTML, CSS and JavaScript

Most web pages use three languages, and each one has its own job. On the bakery page, they divide the work like this:

• HTML says what each part of the page is: the heading "Maya's Bakery", the paragraph about opening hours, a photo of the bread, a link to the menu.
• CSS says how those parts look: the brown color of the heading, the font, the space around the photo, the layout on a phone screen.
• JavaScript makes the page respond to the reader: for example, it can show today's specials when the reader clicks a button.

HTML comes first, because CSS and JavaScript both work on the elements that HTML creates. A page with HTML and no CSS still works: the browser shows it with simple default styles. A page with CSS and no HTML shows nothing at all. This course teaches HTML only; when an example needs a line of CSS, the lesson explains what that line does.

What HTML Gives You

HTML includes much more than headings and paragraphs. With HTML alone you can add images, audio and video, link pages to each other, build lists and tables, and create forms that collect information from the reader. Elements such as <header>, <nav>, <article> and <footer> describe the parts of a page, so that browsers, screen readers and search engines can tell the navigation menu apart from the main text.

Writing HTML costs nothing. The standard that defines it is free to read, every browser understands it, and you can write it in any plain text editor. The same file works on a desktop computer, a tablet and a phone.

Good HTML also helps people who cannot see the screen. A screen reader is a program that reads a page aloud for blind and visually impaired users. It relies on the markup to know which text is a heading, which is a link and what an image shows. Search engines read the same markup to understand what a page is about. Correct markup does not guarantee a high place in search results, but it makes the page easier for search engines to understand.

What HTML Cannot Do

HTML has clear limits, and knowing them early prevents confusion later in the course:

• It does not control appearance beyond simple defaults. Colors, fonts, spacing and layout are the job of CSS.
• It does not calculate, and it reacts to the reader only in a few built-in ways. The elements that respond are links, form controls and a few others, such as the collapsible <details> box. Anything more, such as updating a shopping cart total, needs JavaScript.
• It does not share parts between pages. If every page of a website has the same menu, plain HTML needs a copy of that menu in each file. Websites solve this with tools that build the pages before they are sent, which are outside the scope of this course.

A Short History

Tim Berners-Lee created HTML at CERN, the European physics laboratory, so that researchers could share documents that linked to each other. His document "HTML Tags", from 1991, described the first set of tags. The IETF, a group that writes internet standards, published HTML 2.0 as RFC 1866 in 1995, and it already included forms.

The W3C, the World Wide Web Consortium, then took over. A draft called HTML 3.0 never became a standard. HTML 3.2 became a W3C Recommendation in January 1997, HTML 4.0 in December 1997 and HTML 4.01 in December 1999. XHTML 1.0, a stricter version based on XML, followed in 2000.

In 2004 a group of browser makers formed the WHATWG, the Web Hypertext Application Technology Working Group, to continue developing HTML. Their work became the version known as HTML5, which added elements such as <header>, <article>, <footer>, <audio> and <video>. The W3C published it as a Recommendation in 2014, followed by HTML 5.1 and 5.2. In 2019 the W3C and the WHATWG agreed that the WHATWG standard would be the only HTML specification.

HTML Today

Today HTML is defined by one document, the HTML Living Standard, which the WHATWG maintains at html.spec.whatwg.org. It has no version number. It is updated whenever browser makers agree on a change, so new features arrive a few at a time instead of in large releases.

People still say "HTML5", but now it is only an informal name for modern HTML. There is no HTML6 planned. When this course says "HTML", it means the Living Standard as current browsers implement it.

The Living Standard also defines exactly how a browser must read HTML, including markup that contains mistakes. As a result, Chrome, Firefox, Safari and Edge build the same document tree from the same file. Their default styles can still differ a little, for example in the look of buttons and other form controls.