Page File Structure

In Essepage, web pages are generally created using +page.essepage files.

You can write HTML, CSS, and JavaScript in the same way as in a regular HTML file.

You can also create HTML files with any name, such as index.html. However, a +page.essepage file is accessed using the path of the folder containing it, while a regular HTML file requires the file name in the URL.

Page file	URL
/public/about/+page.essepage	/about
/public/about/index.html	/about/index.html

Use a +page.essepage file when you want to use the folder path as the page address without displaying a file name in the URL.

You Can Omit the Basic HTML Document Structure

When Essepage builds a page, it automatically adds the basic HTML document structure that you omit.

You can write a complete HTML document, but a typical page file can omit the repeated basic tags and contain only the code required for the page.

A standard HTML document has the following structure:

<!doctype html>
<html>
    <head>
        <title>About Us</title>
    </head>

    <body>
        <h1>About Us</h1>
        <p>Learn more about our website.</p>
    </body>
</html>

In Essepage, you do not need to write this complete structure every time.

It is enough to include the page title and the content displayed in the browser.

<head>
    <title>About Us</title>
</head>

<h1>About Us</h1>

<p>Learn more about our website.</p>

The omitted <!doctype html>, <html>, and <body> are added automatically when the page is built.

You can also write the complete HTML document structure, so you can choose the approach that best suits your project and workflow.

HTML

Write content such as headings, text, images, and links in the same way as in regular HTML.

<main>
    <h1>About Us</h1>

    <p>
        We create simple tools that help people
        build and publish websites.
    </p>

    <a href="/contact">Contact Us</a>
</main>

You do not need to learn a separate HTML syntax to use Essepage. You can use the standard HTML elements and attributes you already know.

CSS

You can write CSS for a page inside a <style> element in the same file.

<h1>About Us</h1>

<p>Learn more about our website.</p>

<style>
    h1 {
        color: royalblue;
    }

    p {
        line-height: 1.7;
    }
</style>

When the page is built, a <style> element written in the page file is automatically placed in the document’s <head>.

This allows you to add the styles required for the current page without creating a separate CSS file.

If multiple pages use the same styles, it is better to move them into a separate file or layout. See CSS and Assets for details.

JavaScript

As with a regular web page, you can write a <script> element in the same file.

<button id="messageButton">Show Message</button>

<p id="message"></p>

<script>
    const button = document.getElementById("messageButton");
    const message = document.getElementById("message");

    button.addEventListener("click", () => {
        message.textContent = "Hello from Essepage!";
    });
</script>

When you click the button, the following message appears:

Hello from Essepage!

You can use standard JavaScript and browser APIs just as you would on a regular web page.

In a regular HTML document, the position of a <script> can affect when it runs. In Essepage, a <script> written directly in a page file runs by default after the page content has been rendered.

You therefore do not need to adjust the position of the <script> to ensure that the related HTML elements have already been created. However, placing the <script> below the related HTML is recommended because it makes the code structure easier to understand.

To run code before the page is rendered, add the data-essepage-before-render attribute to the <script> element.

<script data-essepage-before-render>
    // Code to run before the page is rendered
</script>

However, if the code becomes long or the same JavaScript is used on multiple pages, it is better to move it into a separate file.

To learn how to check JavaScript messages and errors, see Console and Debugging.

Code Order

HTML, <style>, and <script> do not have to appear in the following order inside an Essepage page file.

However, organizing them in this order makes the page structure easier to understand and maintain:

Title and metadata for the <head>
HTML displayed on the page
CSS used by the page
JavaScript executed by the page

<head>
    <title><!-- Title --></title>
</head>

<main>
    <!-- HTML -->
</main>

<style>
    /* CSS */
</style>

<script>
    // JavaScript
</script>

Following this order makes it easier to distinguish page information, content, design, and behavior even as the page becomes longer.

Complete Page Example

The following page file combines everything covered above:

<head>
    <title>About Us</title>
</head>

<main>
    <h1>About Us</h1>

    <p>
        We create simple tools that help people
        build and publish websites.
    </p>

    <button id="messageButton">Learn More</button>

    <p id="message"></p>
</main>

<style>
    main {
        max-width: 640px;
        margin: 80px auto;
        padding: 20px;
        font-family: system-ui;
    }

    h1 {
        color: royalblue;
    }

    p {
        line-height: 1.7;
    }

    button {
        padding: 12px 20px;
        color: white;
        background: royalblue;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
    }
</style>

<script>
    const button = document.getElementById("messageButton");
    const message = document.getElementById("message");

    button.addEventListener("click", () => {
        message.textContent = "Thank you for visiting our website.";
    });
</script>

This page file contains:

<head>: The page title and metadata
<main>: Content displayed to visitors
<style>: CSS applied to the page
<script>: JavaScript that implements the page’s behavior

Because you can see the HTML, CSS, and JavaScript in one file, it is convenient for quickly creating and editing pages.

Using Layouts and Components

As a website grows, repeatedly writing shared code such as menus, headers, and footers on every page becomes inconvenient.

You can move this shared code into layouts or components.

When you use a layout, the content of the page file appears in the location defined by the layout. This allows the page file to contain only the content that differs from other pages.

Components allow you to manage repeated elements such as menus, buttons, and cards in separate files.

See Layouts and Components for detailed instructions.

Next Steps

Now that you understand the basic structure of a page file, continue with the following guides:

Connect pages with menus and links: Navigation and Links
Use a shared structure across multiple pages: Layouts
Manage repeated elements in separate files: Components
Manage CSS and image files: CSS and Assets
Learn how <head> works in detail: Understanding <head>
Review the elements provided by Essepage: Essepage Tags

Languages

On this page

Title