Text with tags
HTML (HyperText Markup Language) describes the structure of a web page: which part is a heading, which is a paragraph, which is a link. It is plain text, typed in any editor and saved as a file such as index.html.
Labels in angle brackets are tags. <h1> is an opening tag; </h1>, with a slash, is the closing tag. Together with the content between them, they make one element: here, a heading that says Hello!
The browser draws it
Open the file in a web browser. The browser reads the text from top to bottom and draws the page. The first line, <!DOCTYPE html>, says: this is a modern HTML page. It is not shown.
Line 2 is a title element. Its text, My page, is not drawn on the page itself. The browser shows it on the tab, and uses it for bookmarks and in search results.
Line 3 is an h1 element: the main heading, level 1 of 6 (h1 to h6). The browser draws it big and bold on its own line. The tags themselves never appear on the page, only the content.
Line 4 is a p element, a paragraph. The browser starts it on a new line, with a little space above and below. Paragraph text wraps to fit the window, however long it is.
Elements can sit inside other elements. This is called nesting. Here <em>love</em> is inside the paragraph, so it closes first: open p, open em, close em, close p. em means emphasis; browsers show it in italics.
Line 5 is a link: an a element. Its opening tag holds an attribute, href="about.html": a name and a value that add a detail. href is the address the link goes to when you click it. Browsers usually underline links.
HTML and friends
Every web page arrives in your browser as HTML like this. To read it, right-click the page and choose View Page Source, or press Ctrl+U (on a Mac: Cmd+Option+U in Chrome, Cmd+U in Firefox).
HTML is not a programming language: it describes what each part is, but cannot calculate or decide. Looks come from CSS (Cascading Style Sheets). One CSS rule, h1 { color: teal; }, turns the heading teal.
JavaScript is a programming language. The browser runs it to make a page interactive. One line of it finds the h1 and changes its text to Hi there!, while you watch. The file itself does not change.
What happens
;; step 1/11 · html-is-text
file index.html (plain text, 5 lines)
1 <!DOCTYPE html>
2 <title>My page</title>
3 <h1>Hello!</h1>
4 <p>I <em>love</em> coffee.</p>
5 <a href="about.html">About</a>
HTML HyperText Markup Language
it marks up text: says what each part IS
A complete page usually also has <html>, <head> and <body> tags. The HTML standard lets you leave them out, and the browser adds them for you, so these five lines make a working page. A later lesson shows the full shape. The browser reads the whole file in order and builds the page from it almost at once. The figure draws one element per step so you can follow it.