HTML: The structure of web pages
HTML started as a portable markup language to share academic papers with other people on the same network. Browsers were co-developed as a way to (1) fetch those files, and (2) display them.
While the web has changed a lot since then, that core technologies haven't.
A basic page
The most basic HTML page you could write looks something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo app</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>In this example, we're creating a page that has a single paragraph, <p>, with the text "Hello, world!".
HTML is a subset of XML, that is to say it encodes the document as a tree of tags; tags can be <opening>, </closing>, or <both />. Every opening tag must have a closing tag, and opening and self-closing tag (what we referred to as "both") can have attributes that change the behavior of the tag (for example, <img width="800" /> is an image with a width of 800px). You can even define your own attributes if you prefix them with data- (this is used for scripting and is covered later).
A tag nested within another tag is referred to as a child, and the outer tag is referred to as the parent:
<parent>
<child />
</parent>Building on that, the entire nomenclature for family trees applies (there are grandparents, siblings, descendents, etc...)
HTML documents begin with a <!DOCTYPE html> declaration that tells the parser the document is HTML (much like a shebang in a scripting language), and consist of at most two children:
head: defining the metadata of the document (such as the tab's title)body: defining the contents of the document (such as the paragraph with the text hello world to show)
Tags, tags, tags
If you were to only know 2 other tags beyond <html>, <title>, and <body> they would definitely be:
<div>: an arbitrary block of content<span>: a way to select text within a block
We'll talk about both of these more in the CSS section.
There are other common tags to add functionality to the page: <img> for images, <video> for videos, <textarea> for long-form text-input, but we don't need to understand those yet. There are also other tags that encode the purpose of the element: <main>, <article>, <header> (these act the same as a div, but allow bots and accessibility software to more easily read the webpage). My advice with these semantic elements is to use them where you can, but not to stress about them; there are still many, many websites that get along just fine with divs.
Try it yourself
To play with this further, you can use a service like CodeSandbox, which allows you to define and render an HTML file (and allows you to define CSS and JS files, but more on that later).
The browser and URLs
When you navigate to a URL like google.com/foo/bar.html, the browser requests the shared file foo/bar.html from the server at google.com; if you specify a folder path without a file, the browser will automatically request index.html on your behalf (specifically, the requests google.com/foo/ and google.com/foo/index.html are the same).
While most of this is probably familiar to anyone who's worked with web services before, one part that's unique to the browser is the hashtag (#): an artifact of the browser's origins as a document viewer. If there is a hashtag, the browser will scroll to the corresponding a element with that ID; for example, navigating to #try-it-yourself will scroll to the element <a id="try-it-yourself">.
Embedding media
In addition to HTML, browsers can render and embed a variety of media files to make documents more rich. For example, they can handle a variety of images:
- JPEG: Lossy image files
- PNG: Lossless image files
- WEBP: Google-optimized image files
- SVG: Vector files
They can also natively embed audio and video through MP4s.