HyperText Markup Language
Learning Objectives
- You know of HyperText Markup Language (HTML) and you know the basic structure of a HTML document.
- You know how to use headings, text paragraphs, lists, and links in HTML.
- You know of the Document Object Model (DOM).
- You know how events work in HTML and JavaScript.
HyperText Markup Language (HTML) is a markup language that is used to define the structure and content of web pages. When a server responds to a request with HTML content, the browser interprets the content and shows it to the user.
Structure of a HTML document
The following HTML document is a simple example of a HTML document. It contains the basic structure of a HTML document, including the doctype declaration, the html element, and the head and body elements.
You can click on the “View content in browser window” button to see how the HTML document is rendered in a browser.
The HTML document above contains the following elements:
<!DOCTYPE html>declaration tells the browser that this is a HTML document.<html>element is the root element of the HTML document. It contains all other elements in the document.<head>element contains metadata about the document, such as the title of the document and links to stylesheets and scripts.<title>element defines the title of the document, which is shown in the browser’s title bar or tab.<body>element contains the content of the document that is shown to the user.<h1>element defines a main heading for the document, which is typically the most important heading on the page.<p>element defines a paragraph of text in the document.- text inside the
<h1>and<p>elements is the content of the elements, which is shown to the user in the browser.
Basic HTML elements
A HTML document consists of elements, which are defined using tags. The most important elements in terms of displaying information are headings, text paragraphs, and lists.
Headings
There are in total six heading elements, ranging from <h1> to <h6>. The character h comes from the word heading and the number represents the importance of the heading — the smaller the number, the more important the heading.
Every HTML document should have at most one main heading (h1). The main heading tells the reader what the page is about. Subheadings should be added under the main heading in a logical order. That is, after a h2 one should have either another h2 or a h3, but not a h4.
The following shows a document with two headings, h1 and h2.
Text paragraphs
Adding text to a HTML document is done with p-elements, where “p” comes from the word paragraph. The document below contains two headings and four paragraphs, each with text.
Lists
HTML documents may include ordered lists (created with ol element) and unordered lists (created with ul element).
When defining a list and its contents, the list is created using either the ol (ordered list) or the ul (unordered list) element. The difference is that an ordered list is numbered, while unordered list is not.
A list contains list items, which are created with the li element. Each list item can contain elements or text.
The example below contains a HTML document with an ordered list. The list has three list items with the texts “item 1”, “item 2” and “item 3”.
Buttons and input fields
HTML documents can contain buttons and input fields, which are used for user interaction. The most common input field is a text input field, which is created with the input element. The input element has a type attribute that defines the type of the input field. The most common type is text, which creates a text input field.
The example below shows a HTML document with a text input field and a button. The button is created with the button element.
Pressing the button does not do anything, however, as the button does not have an event handler attached to it. We will look into event handling later on.
Non-visible HTML elements
HTML documents can contain HTML elements that are not visible to the user, but that describe the structure or content of the page. Most relevant of these elements are header, section, and footer:
headeris used for creating a header areasectionis used for creating a logical entity (section)footeris used for creating a footer area
The example below shows a page that uses all of the three elements described above. As you notice, the elements that are used to describe the structure of the page are not visible to the user.
There are also other elements that are not visible to the user, such as div and span. The div element is used for grouping elements, while the span element is used for grouping inline elements.
Inline elements are elements that do not create a new line when placed on a page. Examples of inline elements are
spanandinput. Block elements, on the other hand, create a new line when placed on a page. Examples of block elements areh1,p, anddiv.
Navigating between pages
Navigation between pages is done with hyperlinks, which are created with the a tag in HTML. The href attribute of the a tag specifies the address of the target page. The address can be a URI or a path — in the former case, the link will lead to the URI, while in the latter case the link will lead to a relative location on the current server.
In the following example, the page has a link to Aalto main page at https://www.aalto.fi/en. Clicking the link would navigate the user to Aalto main page.
<ul>
<li><a href="https://www.aalto.fi/en">Aalto main page</a></li>
</ul>Similarly, in the following example, the links are paths. Clicking the “Home” link would navigate the user to the root of the current server, while clicking the “About” link would navigate the user to the /about path on the current server.
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>Document Object Model (DOM)
HTML is not just a static document; it is a dynamic structure that can be manipulated by programming languages, such as JavaScript. This is made possible by the Document Object Model (DOM) that is created by the browser when rendering a HTML document.
When an HTML page is rendered in a browser, the browser creates a Document Object Model (DOM) representation of the page.
DOM serves two purposes. It is (1) a tree-like data structure that represents the elements in the HTML document and their relationships, and an (2) API that allows programming languages (like JavaScript) to access and manipulate that structure.
As an example, the DOM tree for the above HTML document could look similar to the one in Figure 1 below. Text nodes (e.g. “Learning diary!”) are omitted for clarity, but text nodes are also a part of the DOM.
The browser uses the DOM to render the page. With JavaScript, we can also use the DOM API to interact with and change the page. For example, we can query for elements, attach event listeners, change content or styles, or even add and remove elements dynamically. Svelte also uses the DOM to render components and pages, but it abstracts away the direct manipulation of the DOM, allowing us to work with a more declarative style of programming.
Events and DOM
There are a wide variety of events that can happen in a web application. Clicking a button, typing to an input field, hovering over an element, and scrolling are examples of web application events — a more comprehensive list of event types is available on the MDN Web Docs on events.
All of the events are represented as objects in the DOM. When an event happens, the browser creates an event object that contains information about the event, such as the type of event, the target element, and other relevant data.
Events, HTML, and JavaScript
Events are handled using event listeners, which are functions that are called when a specific event happens. Event listeners can be attached to elements in HTML using event attributes.
The example below shows a simple HTML document with a button that reacts to it being clicked. When the button is clicked, the alert method is called. The alert method is a built-in JavaScript function that shows a dialog box with a message and an OK button.
The onclick is an event attribute. When the button is clicked, the onclick event attribute is triggered, and the code inside the attribute is executed.
Event attributes typically start with the word
on, followed by the name of the event, e.g.onclick. The value of the event attribute is the code that should be executed when the event happens.
As another example, the HTML document below has a text paragraph that reacts to the mouse being moved over it. When the mouse is moved over the paragraph, an alert dialog is shown with the message “Mouse over”.
The functions that are called can also be explicitly declared in a <script> tag in the HTML document. The following HTML document has a button that shows an alert dialog with the message “Hello, world!” when the button is clicked. The function showAlert is declared in the <script> tag, and the function is called in the onclick event attribute of the button.
Event object and properties
Whenever an event happens, the browser creates an event object that is passed as a parameter to the function that is called in response to the event. The event object is an instance of the Event interface, which is a built-in JavaScript object that contains information about the event.
The properties of the event object can be used to access the properties of the target element, such as its value or attributes. The event object has a property called target that refers to the element that triggered the event. If we have an input field that reacts to events, the target property would refer to the input field.
As an example, the following HTML document has an input field that reacts to the oninput event. Whenever the user types content to the input field, the text is updated in the paragraph below the input field.
The example above shows event handling in vanilla JavaScript, where we also manipulate the DOM. The variable document is a global variable that refers to the DOM of the current document. It provides various methods for accessing and manipulating the DOM. For example, the document.getElementById method allows finding an element by its identifier. In the example above, we use the method to access the paragraph element identified by the identifier text, and update its text. The text is changed to the value of the input field, which is accessed through the event.target.value property.
When working with Vanilla JavaScript — “vanilla” for no libraries or frameworks — we need to explicitly access the DOM (Document Object Model) elements and update them. With Svelte, we can use reactive variables that automatically update the user interface whenever the underlying data changes; Svelte takes care of updating the DOM elements.
Svelte and HTML
When we think of the walking skeleton and the Svelte client-side application in it, the application also comes with a HTML document. The document, app.html, is in the src folder of the client-side application.
The content of the document is similar to the following.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>When working with Svelte, we do not work directly with HTML, and the above document should not be changed (unless there’s a clear need for it). Instead of directly working with HTML, we create pages and components that may contain HTML and that Svelte compiles to HTML.
Summary
To summarize:
- HTML is a markup language that is used to define the structure and content of web pages.
- A HTML document consists of elements, which are defined using tags. The most important elements in terms of displaying information are headings, text paragraphs, and lists.
- HTML documents can contain buttons and input fields, which are used for user interaction.
- Links between pages are created with hyperlinks, which are created with the
atag in HTML. - HTML documents can contain HTML elements that are not visible to the user, but that describe the structure or content of the page.
- When an HTML page is rendered in a browser, the browser creates a Document Object Model (DOM) representation of the page. The DOM is a tree-like data structure that represents the elements in the HTML document and their relationships, and an API that allows programming languages (like JavaScript) to access and manipulate that structure.
- Events from HTML elements can be processed using JavaScript.