Page HTML Structure

In this blog post, we will delve into the process of content authoring using Google Docs and explore how it translates into HTML structure on a webpage.

Content authoring is a critical aspect of any website, and Google Docs provides an accessible and user-friendly platform for this purpose. However, the journey of content from a Google Doc to a webpage involves its transformation into HTML, the standard markup language for documents designed to be displayed in a web browser.

In this exploration, we will author some content in Google Docs and observe how this content is rendered in terms of HTML structure on the webpage. This involves understanding how various elements of the content — such as headings, paragraphs, and links — are encapsulated within appropriate HTML tags to ensure correct display and functionality.

Join us in this comprehensive exploration as we shed light on the intricate process of content authoring and its translation into a webpage’s HTML structure. By the end of this post, you will have a solid understanding of how content changes form from its initial creation in Google Docs to its final display on a webpage.

Blank Google Doc

Empty the Google Doc as shown below and click on preview to see the HTML view of the page.

OOTB it will create below HTML structure for an empty Google docs. HTML body gets divide mainly into three parts as header, main and footer section. Click on preview to see the HTML page view.

Google Doc having content

Now as part of google docs, lets author some of the content and see how it behaves on page. We have authored headings, paragraph text and bulleted list.

All components will get fit within wrapper div which will be surrounded by a section div as shown below.

It will create <h1>, <h2>, <h3> tag elements for respective tags. For text it will use paragraph <p>tag element and for bulleted list it will use <ul> and <li> tags.

Section

Below is an example to divide a <main> tag element within multiple sections. We can use below separators highlighted in red to create sections. Click on preview to see the HTML page view.

Below is an HTML representation of above placed sections where it created multiple section div.

Columns Component

Let’s consider an example of one of the out-of-the-box Columns Components to comprehend the underlying logic of its loading process. In the below example, we have implemented a default text and an out-of-the-box columns component via drag-and-drop. To denote a Columns component, we have labeled ‘Columns’ as block at the top of the component, as depicted in the screenshot below.

In the codebase, we have a component named ‘columns’, as showcased below, which is responsible for rendering this component on the HTML page.

Let’s first unravel how Google Docs operates without ‘Columns’ as a block. The view presented below illustrates a typical HTML structure. Upon close inspection, you’ll notice that the first row of data defined in Google Docs isn’t loading. Interestingly, by default, it only considers and displays the second row. Let’s delve deeper into this intriguing behaviour!

Defining Columns row within Google Doc will try to fetch component defined with blocks folder.

If the component name is identified within the first row — in this case, it’s ‘Columns’ — the system will search for the ‘columns’ component within the codebase blocks folder. This action facilitates the loading of the component in the desired view as illustrated below.

Let’s delve into the inner workings of default and custom block components. For a default component like ‘text’, the system orchestrates a ‘div’ with a class name ‘default-wrapper’. Now, when it comes to custom block components like ‘Columns’, things get a bit more interesting. The system designates the parent ‘div’ class name as ‘columns-wrapper’, as you can vividly see in the screenshot below. Similarly, for a ‘Carousel’ component, the system opts for ‘carousel-wrapper’. Fascinating, isn’t it? Let’s explore further!