HTML (HyperText Markup Language) is the language for describing the structure and content of a web page. HTML is very important for accessibility: it was developed with accessibility in mind, and assistive technology like screen readers are built on top of it. In order to make visualisations (and other content accessible), a basic understanding of HTML is indispensable.
This module introduces HTML in general, the next module, Accessible HTML, focusses on its accessibility features.
When you click a link and your web browser navigates to a new page, a lot of things happen behind the scenes. In order to understand how HTML is involved in all this, you should have an understanding of these processes.
In its most basic form, when a web browser opens a page, it is sending a request to a web server to send the content of the requested page. If the request is valid, the web server will respond by sending the content of the page to the browser, after which the browser can display it. In its most basic form, that content is described in a HTML file.
Source: Maarten Lambrechts, CC BY SA 4.0
HTML is is human readable: you can open a HTML file with any text editor, like Notepad on Windows or TextEdit on Mac, and you will be able to read and understand its content without much difficulties. HTML is also machine readable: after a browser has received the HTML of a web page, it parses it and renders the content on screen.
The building blocks of HTML are called elements, and each element consists of an opening and closing tag, with the content of the element in between. Tags are enclosed in less than (<) and greater than (>) characters.
<!DOCTYPE html>
<html>
<head>
<title>Webdev 101</title>
</head>
<body>
<h1>Learning about HTML</h1>
<p>HTML is fun: set the src attribute of an img tag to an image hosted somewhere, and your page will display it.</p>
<img src="<https://upload.wikimedia.org/wikipedia/commons/8/81/Playfair_TimeSeries-1.png>" width="600px"/>
</body>
</html>
The HTML above displayed in a browser. Source: Maarten Lambrechts, CC BY SA 4.0
<aside>
🔗 You can see this most basic of web pages live in your browser by navigating to the basic-html.html page. You can inspect the source HTML of that page here.
</aside>
All elements of a web page are contained in the parent <html> tag. The <head> tag is a direct child element of <html> and contains metadata about the HTML page. Its content is not displayed directly by web browsers, but the <title> element in <head> is displayed in the title bar of web browsers, or as the title of a browser’s tab. It can also read out loud by screen readers.
The content of the page displayed by browsers is contained in the <body> tag, which should also be a direct child element of <html>.
HTML elements can be nested: elements can be part of the content of other elements. In the HTML snippet above, the <head> element is nested in the <html> element, and the <title> element in its turn is nested in the <head> element. A nested element is called a child of the parent element it is nested in.
HTML elements can also have attributes. Attributes contain additional information about elements, and are not displayed. Attributes are used to style elements and to target them to define interactive behaviour, for example. In the snippet above, the <img> tag has a src attribute that specifies where the image should be loaded from.
The most basic HTML elements are paragraphs and headers. Paragraphs are specified with <p> tags, and headers with the <h1> to <h6> tags. With the header tags, you can create structure and hierarchy in the content of your web page. With header tags, you can generate a table of content automatically, for example.
<!DOCTYPE html>
<html>
<head>
<title>Webdev 101</title>
</head>
<body>
<h1>1. Intro to HTML</h1>
<h2>Images</h2>
<p>With img tags you can embed images.</p>
<img src="<https://upload.wikimedia.org/wikipedia/commons/8/81/Playfair_TimeSeries-1.png>" width="600px"/>
<h2>Paragraphs</h2>
<p>With p tags you define paragraphs.</p>
<h2>Headers</h2>
<p>With h1 to h6 tags you define headers.</p>
<h1>Other elements</h1>
<p>A lot of other HTML elements exist.</p>
</body>
</html>
Source: Maarten Lambrechts, CC BY SA 4.0
<aside>
🔗 See this paragraphs-headers.html page live, or inspect the source HTML here.
</aside>