Contents
Links
HTML: HyperText Markup Language | MDN
When in doubt, refer to the MDN documentation!
A very calming introduction by Laurel Schwulst.
HTML is the standard markup language/format for creating web pages, containing the content and structure of a page as a series of tags/elements.
In our ongoing analogy, HTML is the skeleton of the web. At its most basic it is a text file, in a folder on a computer, with a .html extension.
This format was codified by Tim Berners-Lee in 1991, a couple years after he created the web (using SGML, a similar/proto language). There have been five major revisions to the spec since then, which (and sometimes deprecated) tags and syntax:
HTML consists of a range of elements, nested inside one another, like a matryoshka doll of text.
As a visual:
As code:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
The <html> element contains all elements of the page, the <head> element contains the title, and the body contains <h1> and <p>.
We call these semantic elements—which is saying that they give their contents a meaning or a role. These roles are then interpreted by your browser (Chrome, Safari, Firefox, etc.) when it loads the file, to ultimately display the page. We call this parsing document.
From the example above, here is what we’ve told the browser:
<!DOCTYPE html> What kind of file this is, so it knows how to parse.<html> The root element of an HTML page, contains all the content.
<head> The meta information about the HTML page—like its title, default language, scripts, and stylesheets. Nothing in this element is visible on the page itself.
<title> Specifies a title for the page—which is shown in the browser’s tab.<body> Defines the document's body—the container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<h1> Defines a heading.<p> Defines a paragraph.