style
content

HTML Markup reference

While for most development tasks the DOM is the relevant interface for a developer, there are certain situations (eg. Auto Blocking) where a developer interacts with the raw HTML markup that is rendered by the Franklin pipeline on the server.

General HTML Markup Document structure

<!DOCTYPE html>
<html>
  <head>
    <title>...</title>
    {metadata}
    {head.html}
  </head>
  <body>
    <header></header>
    <main>
	{main-content}
    </main>
    <footer></footer>
  </body>
</html>

Metadata

The metadata portion of the document consists of a list of <meta> tags, some of them correspond to well known HTML metadata or metadata data without defined semantics. See more in the metadata block specification.

In the simplest case there is a eg.

<meta name="template" content="docs">

which maps a metadata property named template to a value of docs.

head.html

The head.html portion of the document contains verbatim of what’s found in the head.html of the corresponding github branch.

Main Content

All the content that semantically maps to document semantics of an individual page or fragment is found in the main-content content section of the markup. It consists of default content, sections and blocks.

It is important that both default content and any cell of a block can contain the following HTML tags and attributes.

<a>
<br>
<code>
<del>
<em>
<h1> to <h6>
<img>
<li>
<ol>
<p>
<picture>
<pre>
<source>
<span>
<strong>
<sub>
<sup>
<table>
<tbody>
<td>
<th>
<thead>
<tr>
<u>
<ul>

While most of those are self explanatory and align very much with their respective semantic definitions there are a couple that are worth calling out.

<h1> to <h6>

Headings 1 through 6 have an id= attribute containing a sanitized version of the .innerText to allow for direct addressing of a heading in a URL fragment

<picture>, <source> and <img>

Images are rendered as a <picture>, <source> and <img> combination, with a mobile and desktop breakpoint, as well as a fallback for browsers that don’t support webp.

The <img> element features a height= and width= attribute containing the intrinsic dimensions of the image as well as an alt= attribute with the alt text as provided.

<span>

The use of <span> is limited to icons, and indicates the icon as part of the class="icon icon-<iconname>" attribute

<a>

There is special handling for links to AEM preview and live domains (hlx.page, hlx.live, aem.page, aem.live). Any link to one of these domains is rendered as a relative link. This allows authors to link to any of these domain from content pages and still work across preview, live, and production domains.