Documents Live, a web authoring and publishing system
If you see this, something is wrong
Table of contents
First published on Friday, Jan 31, 2025 and last modified on Friday, Jan 31, 2025 by François Chaplais.
1 Fundamentals
HTML is an internet document description language. Its vocabulary has much in common with other document description tools.
Objects in HTML are of two sorts : inline and block. Inline objects can be split, while blocks cannot.
1.1 Inline elements
The most common inline element is our good friend, the paragraph. You can put many kinds of things in paragraphs, as we shall see later.
Headings are used to create titles, but, besides that, they are not very different from paragraphs. There are some other variations on paragraphs, such as quotations, margin notes (the aside element), code text, cite (to reference creative content), and maybe a few more.
Some form elements may be considered as inline, but since they are mostly designed for user input (by contrast to the document display as such), we will treat them separately.
Inline elements can include several variations on text.
1.1.1 Links
Links have been here since the beginning of the Internet, and most people think that they are simple to understand. It is beneficial, however, to consider them from a more general point of view. On the Internet, there are quite a few links that are more than usual static links as we know them. Some of these links can produce requests to a server, including some request parameters.
Let us take the simple example of a Google request. Pasting the following URL in your browser URL field
https://www.google.com/search?q=what+is+an+HTTP+requestwill actually send a request to https://www.google.com/search with a request that has a q parameter set to what+is+an+HTTP+request. Google will receive the request, and since it has a valid form, it will reply by serving a web page that is the response to the request. There are more complicated types of requests that we shall not discuss here. But remember that the humble link can do more than just redirecting you to a static URL.
1.1.2 Spans
Spans isolate portions of text to enrich them. For instance, a span can be used to style its text, or include various kinds of data. A span is an intermediary between ordinary text content and the more advanced functions of a web page.
1.2 Block elements
The typical block element of a web page is the image. Obviously, this is not meant to be split into bits. But the most important block element in HTML code is a div, and as the span, it cannot be viewed directly in a web page.
1.2.1 Divs
The div elements in a web page create a block element. It makes a block out of its content. This is useful for styling and all kinds of processing on the web render and interaction. Divs are placed on top of each other. A div is the equivalent for blocks of spans for inline text.
1.2.2 Flex blocks
Technically, flex blocks are not HTML content, but I think they have their place in this tutorial.
Usually, div blocks are placed on top of each other. The flex system makes it possible to align them horizontally, and wrap them in the web page as if they were huge letters in text.
In LaTeX2Web, these are implemented as grid environments, which contain gridItems. Each gridItem is a div block in the flex system.
1.2.3 Block elements and LaTeX minipage
Usually, minipage environments are used in LaTeX to place block content. Unfortunately, they are determined by fixed dimensions, and totally ignore the size of the device in which they are viewed. The best corresponding object in LaTeX2web is a gridItem inside a grid. Grids let you place things in columns, for instance, but with a setup that is adapted to mobile devices. In practice, the columns are side by side on a large screen, but they will be on top of each other on smaller devices.
2 Tables
Like everywhere, tables are special beasts. In the early days of the Internet, tables were used to implement page layout. Naturally, this approach was blown to bits when mobile devices emerged.
A specific feature of tables is that their size is determined by their content, while divs can constrain their content in size.
The practical result is that large tables may overlap the display on mobile devices. A solution consists in breaking the table into a collection of rows on mobile devices. Each row is a block that encapsulates the information about the row.
By default, this is not enabled in LaTeX2Web. To enable it, check the Use responsive tables on mobile option for your document.
3 Lists
Lists exist in HTML and are recursive. They can be numbered or unnumbered. You can specify the widget that is at the beginning of the list item, which is usually a bullet of a number. LaTeX2Web lets you specify Font Awesome icons as list markers, i.e., the element that starts the list item. You can also use emojis.
For more details, see the help about lists.
4 Forms
Forms a collection of input elements that let the user provide data to the browser. Although this is not technically mandatory, forms send the data to the server through a request. Usually, the request uses the POST method, which hides data from the browser. By contrast, the previous request for Google search used the 'GET' method, which exposes the data to the browser.
The nature of input elements in a form reflects both the diversity of the data being submitted and the corresponding user interfaces.
5 Dig deeper
online HTML Tutorial
book: HTML and CSS: Design and Build Websites by Jon Duckett