Reinventing the Web

HDOC format description

Written by

Karen

in

HDOC stands for ‘HTML document’. It is a static format which means you can’t add a script to it. You can use CSS classes from a list of predefined classes, but you can’t define your own CSS classes or use inline CSS.

HEAD

HDOC has head section just like a regular HTML file. Inside of it it may have a <title> tag. Other things that may go into head section are not yet defined.

<hdoc>
    <head>
        <title>Title of my post</title>
    </head>
</hdoc>

HTML

While regular html file contains <body> tag, HDOC has <html> tag that serves the same purpose. Inside it you can enter html usually starting with <h1> header.

<hdoc>
    <html>
        <h1>Title of my post</h1>
        <p>This is a paragraph.</p>
    </html>
</hdoc>

PANELS

Optionally HDOC may have panels section. It is responsible for header and footer which are standardised and will look the same on all websites. You as an author can only specify colors, main logo or website name, and a list of links. It may also contain link to a paired web page (usually used for comments).

Root Element: <panels>

Attributes:

  • bgColor (optional): A color string representing the background color of both top and bottom panels.
  • textColor (optional): A color string representing the text color in both top and bottom panels.

Child Elements:

  1. <top-panel> (optional): Defines the top panel of the page.
  2. <side-panel> (optional): Defines the URL of a page that will be shown on the side of the main document.
  3. <bottom-panel> (optional): Defines the bottom panel of the page.

Child Element: <top-panel>

Defines the top section of the webpage.

Attributes:

  • bgColor (optional): A color string for the background color of the top panel.
  • textColor (optional): A color string for the text color in the top panel.

Child Elements:

  1. <site-name>(optional): Represents the site name.
    • Attributes:
      • href (optional): URL to navigate to when the site name is clicked.
    • Content: The text of the site name.
  2. <logo>(optional): Represents a site logo.
    • Attributes:
      • src (required): URL to the logo image.
      • href (optional): URL to navigate to when the logo is clicked.
  3. <a>(optional, multiple): Represents a hyperlink in the top panel.
    • Attributes:
      • href (required): URL of the hyperlink.
    • Content: The text of the link.

Child Element: <side-panel>

Defines a side panel of the webpage, typically used for comments section.

Attributes:

  • side(optional): Specifies which side the panel appears on.
    • Values:
      • "left": The panel is on the left side.
      • "right" (default): The panel is on the right side.

Content:

  • The URL of webpage to be displayed in the side panel.

Child Element: <bottom-panel>

Defines the bottom section of the webpage.

Attributes:

  • bgColor (optional): A color string for the background color of the bottom panel.
  • textColor (optional): A color string for the text color in the bottom panel.

Child Elements:

Content: The text of the message.

<section>(optional, multiple): Defines a section within the bottom panel.

Attributes:

title (optional): The title of the section.

Child Elements:

<a>(optional, multiple): Represents a hyperlink in the section.

Attributes:

href (required): URL of the hyperlink.

Content: The text of the link.

<bottom-message>(optional): Defines a message at the bottom of the panel.

Example:

<panels bgColor="#dd1a1a" textColor="#ffffff">
    <top-panel bgColor="#db5432" textColor="#939393">
        <site-name href="https://google.com">hello   website</site-name>
        <logo src="https://mywebsite.com/wp-content/uploads/2024/12/logo.png" href="https://mywebsite.com"/>
        <a href="https://mywebsite.com/about">About</a>
        <a href="https://mywebsite.com/contacts">Contacts</a>
    </top-panel>
    <side-panel side="left">https://mywebsite.com/post1/comments</side-panel>
    <bottom-panel bgColor="#2d2d2d" textColor="#e8e8e8">
        <section title="About">
            <a href="https://mywebsite.com/me">About me</a>
            <a href="https://mywebsite.com/contacts">Contacts</a>
        </section>
        <bottom-message>All rights reserved 2025</bottom-message>
    </bottom-panel>
</panels>

Some notes on using <panels> section.

All panels – <top-panel>, <side-panel>, <bottom-panel> – are optional.

You should use either <site-name> or <logo> but not both. Default background color for all panels is white, and default text color is black. Attributes bgColor and textColor of <panels> tag define colors for both top and bottom panels. The same attributes of <top-panel> and <bottom-panel> tags will override those set in <panel> element. So if both panels should have the same colors you should define them only globally in <panels> element. If they must be different then define them for each individual panel.

COPY-INFO

Optional section that is used only when HDOC is a copy of some other HDOC in which case this section is required.

This section is currently not supported by LZ Desktop, but will be in the future.

Child Elements:

<source>(required, multiple): A URL of the source page. If hdoc represents a copy of a copy of some hdoc, then multiple source tags must be used. In general you should avoid making copies of copies if the original document is available. But if its unavailable and you have to make a copy of a copy, using multiple source tags allows us to save the history of the document.

Attributes:

  • copied-at (required): An ISO 8601 timestamp of the moment when the copy was made. For example (UTC), 2025-01-01T12:00:00Z or (with Timezone Offset) 2025-01-01T12:00:00+02:00

<media-mappings>(optional). This element represents a collection of mappings for media files, allowing you to replace old URLs with new ones. Contains one or more <m> elements, each defining a mapping between an old URL and a new URL.

Child Elements:

<m>: Represents a single mapping.

<old>: The original URL of the media file.

<new>: The updated URL of the media file.

<media-mappings> 
<m>    
    <old>https://example.com/images/image1.jpg</old>  
    <new>https://mywebsite.com/images/image1.jpg</new> 
</m> 
<m> 
    <old>https://example.com/images/image2.png</old> 
    <new>https://mywebsite.com/images/image2.png</new> 
</m> 
<m> 
    <old>https://example.com/images/image3.svg</old>  
    <new>https://mywebsite.com/images/image3.svg</new> 
</m> 
</media-mappings>

Since section is currently not supported, the details may change when the support is finally implemented.

CONNECTIONS

This is an XML structure that contains information about documents the current document wants to connect to as well as floating links that connect those documents with the current documents.

Connections section will be supported by all three document types: HDOC, CDOC, and SDOC. For that reason its description is on a separate page.

My Icon  My Icon

More posts