liveBook · Manning

HTML

As explained in Learn Go with Pocket-Sized Projects

HTML is the standard markup language used to structure documents and applications displayed by web browsers.

HTML gives a browser page its structure. A Go HTTP handler can return an HTML document instead of plain text, turning a working endpoint into a page with a title, heading, and content. For a habits tracker, that page provides a browser interface to data held by a gRPC service. section 11.1.1 section 11.0

Listing 11.5 index.go: HTML for the index page
_, err := io.WriteString(w, `#1
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Learn Go</title> #2
</head>
<body>
    <h1>YAY</h1> #3
    <p>Way to go!</p> #4
</body>
</html>
`)

The index-page response shows the document skeleton: doctype, html, head, title, and body elements. section 11.1.1

HTML also supplies controls for sending user input. A form’s action names the destination path, while method selects the HTTP verb. Each input needs a name so the server can distinguish its value. A label describes the input to the user; its for attribute matches the input’s id. Clicking the button submits the form. section 11.4.1

Listing 11.33 index.html: Form to create a habit
<form action="/create" method="post">
    <label for="habitName">Objective:</label> #1
    <input type="text" id="habitName" name="habitName">

    <label for="habitFrequency">Weekly frequency:</label> #2
    <input type="number" id="habitFrequency" name="habitFrequency">

    <button>Create</button>
</form>

A habit-creation form posts a name and weekly frequency to /create. Its labels, inputs, and button make the submission path concrete. section 11.4.1

An HTML page can also be a target for code running in the browser. In a multiplication exercise, empty span elements have IDs for the operands. Go code compiled to WebAssembly finds those elements through the Document Object Model (DOM) and sets their content. The initial page provides the placeholders; the Go layer supplies the numbers. section 12.2 section 12.2.1

Listing 12.5 index.html: Multiplication content
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiplication Table Practice</title>
</head>

<body>
<h1>Multiplication Table Practice</h1>

<button>Generate new exercise</button> #1
<div>
    <span id="operand1"></span> #2
    <span>x</span>
    <span id="operand2"></span> #3
    <span>=</span>
</div>

</body>
</html>

The exercise page shows the button and the two identified spans that browser-side code later fills. section 12.2.1

How Learn Go with Pocket-Sized Projects covers it

How deep it goes
Works through a document skeleton, form attributes, and DOM-targeted placeholders; does not pursue a general HTML reference.
Examples
Uses an index page, a habit-creation form, and a multiplication page whose operand spans receive values from Go.
What it assumes
Assumes Go HTTP-server context while introducing the HTML form elements and attributes needed for the example.
What you can do after
Build it from scratch: serve a basic HTML page, add a submitting form, and prepare identified elements for browser-side Go updates.
How it connects
Connects HTML to HTTP handlers, forms, gRPC services, the DOM, and WebAssembly.
Cover of Learn Go with Pocket-Sized Projects
liveBookmanning.com
Read Learn Go with Pocket-Sized Projects on liveBook Get the book at manning.com

Also explained in

Compare how 12 books explain HTML →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Learn Go with Pocket-Sized Projects. The section links point to the parts of the book it draws on.