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 forms in HTML.
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.
To try this in practice, copy the following to a file and start the application using Deno.
import { Hono } from "jsr:@hono/hono@4.6.5";
const app = new Hono();
app.get("/", async (c) => {
return c.html(`<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Magic!</h1>
<p>Now, we will familiarize ourselves with HTML.</p>
</body>
</html>`);
});
Deno.serve(app.fetch);When you open up the browser and navigate to the address at which the above application is running, you will see something like the content in Figure 1.
The reason why the browser shows the content in a structured way instead of showing the response as plain text is that the server tells the browser to interpret the content as HTML. This is done by Hono’s html method, which adds a Content-Type header to the HTTP response.
If we query the server using curl, we can see the value of the Content-Type header and the raw HTML content as text.
curl -v localhost:8000
// ...
> GET / HTTP/1.1
> Host: localhost:8000
// ...
< HTTP/1.1 200 OK
< content-type: text/html; charset=UTF-8
// ..
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Magic!</h1>
<p>Now, we will familiarize ourselves with HTML.</p>
</body>
</html>Structure of a HTML document
HTML documents start with a doctype declaration that provides information to the browser on how to interpret the HTML document, required for legacy reasons. In our case, we use <!DOCTYPE html>.
The doctype declaration is followed by the actual HTML content, which is structured in a tree-like manner. The root of the tree is the html element, which contains two elements: head and body. The head element contains elements that are not visible on the page, but may influence the behavior of the browser, while the body element contains information that can be visible in the browser.
Elements have a starting tag that with the name of the element between the smaller than and greater than characters, e.g. <element>. The starting tag is followed by the content of the element, and finally an ending that corresponds to the starting tag. The ending tag is almost the same as the starting tag, but it has slash after the smaller than character, e.g. </element>.
As an example, the following HTML document starts with the doctype declaration, followed by the html element. The html element contains the head and body elements. The head element contains the title element, which defines the title of the document. The body element contains the h1 and p elements, which define a main heading and a text paragraph, respectively. Both the heading and the paragraph contain text.
You can click on the “View content in browser window” button to see how the HTML document is rendered in a browser.
Basic HTML elements
HTML documents consist of elements. 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) for understandability and accessibility. 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 subheading one should have either another subheading or a subsubheading, but not a subsubsubheading.
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 or the ul element, depending on which type of a list one prefers to use. 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 a numbered list. The list has three list items with the texts “item 1”, “item 2” and “item 3”.
Forms and input fields
Forms are used for entering data. Forms are created using the HTML form-element. Each form can contain from zero to a nearly unlimited amount of input fields, where each input field is represented with a separate element.
The form element form has two attributes: method and action. The method attribute describes the used HTTP method (either POST or GET), while the action describes the address to which the data is sent. If the method attribute is missing, GET is used by default. Similarly, if the action attribute is missing, the current address is used by default.
The example below has a form element that uses the POST method to send data to the current address. The form has no input elements, however.
Input elements are created using the input element. The input element has a number of attributes, of which the most important ones are type, id, and name. The type attribute describes the type of the input field, while the id and name attributes are used for identifying the input field. The id attribute is used for referring to the input field from other elements, while the name attribute is used for identifying the input field when data entered to the form is processed (either on the server or on the client).
The example below creates a form that contains an input field for entering text (the value of the type attribute is text). The name of the input field is address. The form also has an input element for submitting the form. The input element has the type submit, which creates a button — the value attribute provides the text for the button.
When the button is pressed, the browser sends the data using a HTTP POST request to the current address.
Input labels
The label element is used for referring to an input field within the form and for adding a textual description for the input field. The attribute for of the label element tells which input field the label refers to. The value for the attribute for should be the same as the value of the id attribute of the input field that the label refers to.
The example below shows a form that contains a label for the input field. The label has the text “Address: ” and it refers to the input field with the id attribute address.
If we would wish that the label for the address field is “Enter address here”, we would modify the label as follows.
Multiple input fields
Forms may have multiple input fields. In the example below, there is both a text input field and a checkbox.
The form also contains a <br/> element, which is used for creating line breaks.
The type of the input field is controlled using the type attribute. There are over 20 different input types, some of which are shown in the next example.
Some input fields types such as number and email may do data validation on the browser, depending on the browser. As data validation done in the browser cannot — and should not — be trusted, we will look into server-side validation later on in the course.
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. The element header is used for creating a header area for the page, the element section is used for creating a logical entity (section) on the page, and the element footer is used for creating a footer area for the page.
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.
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. Instead of directly working with HTML, we create components that may contain HTML and that Svelte compiles to HTML. Let’s next look into creating Svelte components.