HTML: Build Web Pages for Dashboards and Live Displays
Keeping an announcement or dashboard visible starts with a web page that fits its screen. HTML gives web pages their structure; CSS controls their appearance, and JavaScript adds behavior such as fetching updated dashboard data. A small HTML page is enough to display a clear announcement on an office TV.
At Variabl, our products help teams put web content on displays using the URLs they already have. HTML knowledge gives you more control over custom content, while existing dashboards and our built-in announcements provide starting points without writing code.
For a useful first page, we recommend one message with a clear heading and enough contrast to read across the room. Once that page is hosted, its URL becomes content you can schedule alongside operational dashboards.
How Do Browsers Turn Markup Into Web Pages?
A web browser turns HTML into a document structure, applies CSS, and draws the result on screen. JavaScript runs alongside that process when the page includes it.
What Does Hypertext Markup Language Do?
HTML stands for Hypertext Markup Language. It identifies the meaning and organization of content: a heading, paragraph, link, image, or other page element.
For example, <p>Safety briefing at 10:00 AM.</p> marks a sentence as a paragraph. The tags give the browser instructions about the content’s role.
“Hypertext” refers to connected documents, including links that lead to other pages. For display content, we recommend keeping the essential message visible without requiring anyone to click a link.
How Do HTML, CSS, and JavaScript Work Together?
HTML supplies the content structure. CSS, short for Cascading Style Sheets, sets properties such as text size and background color. JavaScript handles programmed behavior, including requesting fresh data from a service.
The browser parses HTML into the Document Object Model, or DOM, an in-memory representation of the document. It combines that structure with styling information, calculates element sizes and positions, then paints the page.
Changes to content or styles trigger additional rendering work. For a screen announcement, HTML and CSS are sufficient; a custom live dashboard also needs a way to retrieve current information.
How Does HTML5 Relate to the Living Standard?
HTML5 is the familiar name associated with modern HTML features, including semantic page elements and native video support. Tutorials still use the term to distinguish modern markup from older approaches.
The current specification is the HTML Living Standard, maintained by WHATWG, the Web Hypertext Application Technology Working Group. It evolves continuously as the platform develops.
For your first display page, we recommend standard HTML features supported by current browsers. The declaration <!doctype html> belongs at the top of the document.
Which Building Blocks Does a Page Need?
A dependable HTML page needs a document declaration, page information, and visible content organized into meaningful elements. We recommend a small, explicit structure so your first display is easy to edit and troubleshoot.
Document Structure and the Doctype for Standards Mode
Begin with <!doctype html> to request standards mode, where browsers use modern layout rules. Missing or older declarations can trigger compatibility behavior called quirks mode.
The <html> element contains the document. Inside it, <head> holds information such as character encoding and the browser-tab title, while <body> contains the displayed content.
Use lang="en" on the root element for an English page and <meta charset="utf-8"> for text encoding. A viewport declaration helps layouts respond to the available screen width, especially on mobile devices.
HTML Tags, Elements, and Attributes
HTML tags mark element boundaries. In <p>Display ready</p>, <p> is the opening tag, </p> is the closing tag, and the complete expression is a paragraph element.
Attributes provide additional information inside an opening tag. For example, class="notice" assigns a styling hook, while a link’s href attribute specifies its destination.
Some HTML elements are void elements, which have no closing tag or child content. Images use <img>, and metadata commonly uses <meta>. We recommend quoting attribute values and keeping nesting tidy to make errors easier to spot.
Headings, Links, Images, and Tables for Readable Content
Use HTML headings to show content hierarchy: <h1> for the page’s main heading, followed by <h2> for major sections. Choose heading levels by their role, then set their visual size with CSS.
Links use <a href="…">, and images use <img src="…" alt="…">. Give informative images meaningful alternative text; decorative images use an empty alt="" attribute.
Tables suit information with genuine row-and-column relationships, such as a shift schedule. Include header cells with <th> and use a <caption> to identify the table. For TV content, we recommend limiting rows so the text remains readable at the intended viewing distance.
Semantic Markup and Optional Metadata
Semantic markup describes a block’s purpose. Elements such as <main>, <header>, and <nav> give browsers and assistive technology useful information about a page.
For a single announcement, a <main> containing a heading and message provides a sensible foundation. Additional containers should serve a clear content or styling purpose.
Microdata and microformats add machine-readable meaning, such as identifying an event or organization. Microdata uses attributes including itemscope and itemprop; microformats use agreed class names. We suggest leaving these optional formats for a later project unless another system needs that structured information.
How Do You Create and Preview Your First Page?
Create a plain-text file, add a complete HTML document, and open it in a browser to preview the result. Our beginner example uses embedded CSS so you only need to manage one file.
Choose an HTML Editor
Notepad works for a first HTML tutorial because HTML code is plain text. Visual Studio Code adds syntax highlighting and editing assistance, which helps when a document grows.
Choose an editor that saves plain text without adding word-processing formatting. If you use TextEdit on a Mac, switch to plain-text mode before saving.
We recommend creating a dedicated folder for the page. Keep any future images or separate CSS files there so their paths stay easy to follow.
Build a Simple Announcement Page
Paste this complete example into your HTML editor. It creates a static announcement with a dark background, large text, and a visible schedule.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Team Announcement</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
padding: 5vw;
display: grid;
place-items: center;
background: #102033;
color: #ffffff;
font-family: Arial, sans-serif;
}
main {
width: 100%;
max-width: 1400px;
}
.label {
color: #a9e8ff;
font-size: clamp(1.25rem, 2.5vw, 3rem);
font-weight: bold;
}
h1 {
margin: 0.3em 0;
font-size: clamp(2.5rem, 6vw, 7rem);
line-height: 1.1;
}
.message {
max-width: 32ch;
font-size: clamp(1.5rem, 3vw, 3.5rem);
line-height: 1.4;
}
</style>
</head>
<body>
<main>
<p class="label">Team announcement</p>
<h1>Safety briefing</h1>
<p class="message">
The briefing starts at 10:00 AM in Conference Room A.
</p>
</main>
</body>
</html>
The <title> names the browser tab; the <h1> provides the visible headline. The CSS clamp() function lets text grow with the viewport while retaining minimum and maximum sizes.
Edit the message to match your announcement. This example contains fixed text, so changing its content requires editing and publishing the file again.
Save an HTML File and Open It in a Browser
Save the file as index.html using UTF-8 encoding. In Notepad’s Save As dialog, select All files so the filename stays index.html and avoids an added .txt extension.
Open the file in a web browser by double-clicking it or using the browser’s Open File command. A local preview will have a file:// address.
After each edit, save the file and reload the browser. We recommend checking that the browser displays the page and that the tab title reads “Team Announcement.”
Style and Test Your Page for a Large Screen
Test the page on the actual display at its intended resolution. A layout that looks comfortable on a nearby laptop still needs a viewing-distance check across the room.
Our suggested checks are:
- Read the smallest text from the farthest expected viewing position.
- Confirm that the entire message fits without scrolling.
- Inspect the edges for clipping caused by TV overscan.
- Check contrast under the room’s normal lighting.
- Open the page in the browser or player you intend to deploy.
For browser playback on Windows, press F11 to enter fullscreen. Keep generous space around the content, and shorten the message before reducing its text size.
How Do You Put Web Content on Screens With Variabl?
Publish your HTML page at a reachable URL, then add that URL to a Variabl playlist for screen playback. Our products also display existing web pages, so a custom announcement can sit alongside dashboards your team already uses.
Host Your Page and Add Its URL to a Playlist
Publish the page through a web host or an internal web server that the playback device can reach. Use HTTPS where available, and publish supporting assets with the page.
An internal address requires the display computer to have access to that network. A localhost address points to the machine opening it, so it only works when the required server runs on that playback machine.
To add the hosted page:
- Open our playlist dashboard.
- Select New Playlist, or open the playlist you want to update.
- Add the Website URL content app.
- Paste the page’s URL and configure its display settings.
- Start playback on the intended screen.
Open the hosted URL on the playback device first to check access and asset loading. Our website URL setup guide explains the available page controls.
Choose Tab Revolver or Variabl Player
We recommend Tab Revolver for straightforward browser-tab rotation in Chrome or Microsoft Edge. You add URLs to a playlist and select fixed or per-page intervals for hands-free monitoring.
Variabl Player, currently labeled Beta, suits dedicated displays that need fullscreen presentation and remote screen management. Our Electron application runs locally on Windows or Mac computers and supports per-screen playlists.
For a computer connected to a TV, connect the display through HDMI, ensure internet access where needed, and disable automatic sleep or hibernation. Our Windows guidance recommends Windows 10 or later.
For Tab Revolver’s screen-broadcasting workflow, keep the browser window containing the rotating tabs open. That window supplies the live views the extension captures and broadcasts.
Configure Timing, Zoom, Reloading, and Scroll Position
Give each page enough screen time for its content. With Tab Revolver’s custom intervals, for example, a dashboard can remain visible for 60 seconds while an announcement appears for 30 seconds.
Our Website URL settings include:
- Zoom from 25% to 200%: Adjust the page’s displayed scale.
- Reload on Rotate: Refresh the page whenever it returns to the screen.
- Scroll position in pixels: Focus below navigation headers or other unwanted page elements.
We recommend fixing your custom page’s layout before compensating with playback controls. For an existing dashboard, zoom and scroll position help bring the relevant information into view.
Reloading retrieves the content available at that URL. If a dashboard’s source dataset refreshes hourly, rotating back to it every minute still shows the latest available dataset.
Display Private Dashboards With Local Authentication
Variabl Player uses persistent local authentication for private dashboard playback. Sign in on the playback device, then reuse that authenticated session during rotation.
We keep dashboard content, login sessions, and authentication credentials on the playback device; this data does not pass through our servers. Our Power BI workflow opens report URLs in a persistent authenticated session, and private Grafana dashboards also support an initial sign-in followed by session reuse.
Apply your organization’s access policies to the playback machine. Session expiry or an identity provider’s sign-in requirements can require authentication again, so include an access check in your display-maintenance routine.
When your hosted page is ready, add it to a playlist and check it on one screen before expanding the setup. You can name and configure connected displays through our Screens page.
Turn Your First Page Into a Useful Live Display
A useful display starts with readable HTML content and a playback setup that keeps the right page visible. We recommend completing one announcement page before adding more content to the rotation.
Save and preview the page, publish it at a reachable URL, then verify it on the actual screen. Adjust its timing and display settings after checking readability from across the room.
Use our Tab Revolver for browser rotation or Variabl Player Beta for dedicated fullscreen playback with remote management. Before leaving the display running, confirm that sleep is disabled and any required dashboard session remains signed in.
Frequently Asked Questions
HTML files and existing web pages both support display workflows, with hosting and browser settings determining how they reach the screen. These are the practical details we recommend checking when setting up your first page.
Do I need to learn HTML to use Variabl?
You can use our products without learning HTML by adding existing dashboard URLs or using our Announcements app. HTML is useful when you want to build a custom page with your own structure and styling.
What is the difference between an HTML file and an HTM file?
The .html and .htm extensions both identify HTML documents, and web browsers read both. We recommend .html for a new project and keeping filenames consistent with any links pointing to them.
Why does my HTML page look different on a TV?
Screen resolution, operating-system scaling, browser zoom, and TV overscan affect how an HTML page appears. We recommend checking the display’s native resolution, resetting browser zoom, and selecting the TV’s fit-to-screen setting before changing the page’s CSS.
Can I upload an HTML file directly to Variabl?
Our documented webpage workflow accepts a hosted URL, so publish your HTML file through a web host or reachable internal server first. Then add that address through the Website URL app in your playlist.
Does reloading a page automatically make its data live?
Reloading requests the content currently available from the page; data freshness follows the source system’s update schedule and caching behavior. For custom dashboards, we recommend showing a data-update timestamp so viewers know when the information was refreshed.